Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. Mostly passes!This page has been written to help people using CSS with "raw HTML" on the 'net. For help with other internet topics, go back to the main "helpful hints" menu and choose again.
Some of the following will be easiest if you edit your pages "by hand", i.e. by working directly with the html that you put on your website host. For example, writing your html using Notepad (or, better (it has spell check, automatic text and syntax highlighting) Textpad) will facilitate applying the hints below. If you use some of the "do it for you" WYSIWYG html editors, it may be difficult or impossible to achieve the fine control needed for some of the following.
CSS help you get work done without lots of typing. You can do highly complex things with CSS, but for now a small, simple example to get you started....
For my pages about programming with Lazarus and Delphi, I frequently want to display some text in a distinctive style, so that readers will understand that the text is what they should type into the program code compiler. The <pre> tag is pretty good for this sort of thing. Text in a <pre> block displays the text as it was typed, with spaces and linefeeds preserved, and, unless you change things, using a mono-spaced font. Note: characters which are special to HTML, in particular the ampersand (&), less-than sign (<) and greater-than sign (>) all have to be done the hard way in the underlying HTML, or the browser will still try to treat them as special, even inside a <pre> block. (Use your browser's "View Page Source" to see what "the hard way" means.)
This is simple text. It appears more or less as I typed it, because I've use the <pre> tags. Note the mono-spaced font, which you may want for some things, e.g. tables of numbers. (There are other ways to get a mono-spaced font, but this is an easy way, and not too kludgy.)
You may get away with just inserting html tags inside a block of <pre> text to change the color of the text. I'm told that the way different browsers display <pre> text is quite variably, though. And your page will also fail the excellent W3 HTML validity checker's tests. (Cut yourself some slack in respects of the results from that tool... but your pages should fail on very few items.) The tag is interpreted, even though the block is supposed to display things "as entered". The tag is NOT rendered literally. (I "did things" to make the earlier "<pre>" (after the "I've used the...") appear that way, instead of being interpreted. Note also the use of the <i> tag in the following, to make "fails" italic, even though it is inside <pre> tags.)
This is more pre-formatted stuff. It is green, even though this part of my page now fails the W3 HTML validity checker, because I put <font color="#009900"> at the start of the block, and </font> at the end of it. There are better, legal ways, as we will see. I also put <font color="#000000"></font> after the above, in case some browsers do not automatically revert to black "ink". (Look at the page source for more details.
That "works", the text shows green, at least in Firefox... but fails the HTML validation tests I give my pages. Sigh.
(By the way, before we continue this discussion, you can, legally, use things like <font color="#009900"> inside <h3> or <p> blocks.
... or this
Anyway! Even with a good text editor, with a powerful search and replace feature, keeping all of the special stuff consistent throughout a single document is a pain, and keeping it consistent across several documents is a real pain. Cascading style sheets (CSS) makes keeping something consistent easy. They make it easy to revise what you have chosen for the style of the relevant parts of your webpages. They open up ways to affect more than simple tags let you play with.
This page, just before the </head> tag near the start, has the following:
<style type="text/css">
pre.DemoStyle {color:#33CC00; font-weight:bold; font-family:"courier new",monospace;}
</style>
This defines a class of "pre", "DemoStyle". Now I can create things like...
This text is enclosed in <pre class=DemoStyle> (before it) and </pre> (after it). With the right stuff in the page's header, I can have multiple blocks of text formatted according to one global rule.
Because of the class definition in the page's header, and because I said <pre class=DemoStyle>, the text appears in green, in Courier. The class inherits the fact that spaces and linefeeds are preserved.
Not only does this "work", but it also passes the W3 HTML validation tests. (^_^). (That's the "new" :-) by the way.)
Now I can get any block to appear in a standard "different" way. It requires less typing for me, and if I want the text to be, say, blue, instead of green, I make one change in the CSS rule... I no longer have to go through the document making changes in front of each block of specially formatted text.
I have put the CSS definition inside the document. If you had a number of pages which you wanted to share a single CSS defined style, there are ways to have the definition in a single separate file on your server, and to tell your documents where to find the definition when it is needed. When you have things set up like that, you can change the style definition for multiple documents just by changing the one file holding the definition.
The example shown is a very, very simple use of cascading style sheets. They allow you to do much more subtle things, relatively simply.
I am grateful for the information published by w3.org which helped me get started with CSS's when I could resist the urge no longer. They also provide a free, online CSS validator for us.
Sidebar begins... no prizes for guessing that the shadow behind the text, and the bigger margins are due to some CSS. See another page about CSS for the details when you are ready for more CSS ideas! (Written I knew more than when I write this page!)
While you don't NEED it right now, it isn't actually very hard to go just one step further, if you wish to.
If you want to put the CSS code into a sheet of its own, it isn't hard.
Using the same CSS code as we used above, just create a little text document like this...
/*My First CSS stylesheet
version: 17 Sep 2011
Anything between the slash-asterisk and the asterisk-slash
is ignored.
*/
pre.DemoStyle {color:#33CC00; font-weight:bold;
font-family:"courier new",monospace;}
(Note that the "<style type="text/css">... </style>" we needed when this was in the page's header is absent.)
Save that on your server (where your .htm file which will use the CSS resides; put it in the same folder) as something ending in .css, e.g. MyDemoStyleDef.css. (Your "server" can be your own PC, for testing purposes.... the page just won't be available to "the world", unless your PC is set up with Apache or similar!)
(One .css file can have multiple definitions in it, when you are ready to fly!)
Remove the....
<style type="text/css">
pre.DemoStyle {color:#33CC00; font-weight:bold;
font-family:"courier new",monospace;}
</style>
... which was in the header of your page. Replace it with
<link rel="stylesheet" href="MyDemoStyleDef.css">
... and all should be well!
End Sidebar
I've also written something about using Google Web Fonts. Why does that remark appear here? Because you need to use some CSS... but it isn't hard.
You run a spellchecker over your masterpieces, don't you? There are free services that will run similar checks on your webpages. One checks that your HTML is "legal", one checks that all of the links on your page are okay, and one checks any CSS on your page, or in it's own page.
A word about "legal" HTML: By "legal", I mean that it follows the rules. Browsers are quite forgiving, and will still display a page even if it is quite badly written. But different browsers cope with your mistakes in different.... not always satisfactory.... ways. Why not follow the rules, and increase the chance that people will see what you want them to?
I'm going to talk a bit about the HTML checker, but the other two work the same way.
You don't have to do anything clever. Just go to the W3C validator, type in the URL of your page, and you will have a report on your screen shortly thereafter. Don't be dismayed! It will probably report scores of "errors", but fixing them may not be the nightmare you at first fear. And along the way, you'll learn to write better HTML!
I've written a separate page about using the W3C HTML validator for you. (Not to mention the information in the DocType section above!! I'll try to give this page a further edit one day!!)
Click here to access HTML validator
Click here to access link checker
Click here to access CSS validator
Even though I've not used these people myself, I'll pass on a recommendation I saw. I have examined the site!
You can have a 'free taste' of the services on offer. You can see a sample of the sort of report they generate, even without accepting the free trial. The services are modestly priced. There's nothing to download... the people at the site go to your site and check it out remotely.
The following will check that your html has no faults, check the links on your page(s).
N.B.: The search engine just looks through the web site for the words you enter. It cannot answer things like "Which program is fastest?"
Click here to go to the site's MAIN index... Helpful Hints is just one corner of the site.
Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.
Email or use contact form to write this page's editor, Tom Boyd
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. Mostly passes!
Why does this page cause a script to run? Because of the Google panels, and the code for the search button. Also, I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Why do I mention the script? Be sure you know all you need to about spyware.
....... P a g e . . . E n d s .....