11: Cascading Style Sheets
Most formatting should be done with style sheets, and in fact the formatting elements of nearly all tags have been deprecated (that is, they work because the browsers still support them, but they are not part of the specification anymore and new browsers don't have to support them to be considered w3c compliant). Style sheets have several advantages over formatting markup, as older HTML specifications used. For one, if you want to change the look of a whole slew of pages, you only have to change information in one place instead of in every page, at every spot in which that formatting appeared.
There are several stylesheet languages, and the language you use should be specified where you provide a link to the stylesheet for your browser. For this tutorial, I put a LINK tag at the top of every page that says: <LINK rel="stylesheet" type="text/css" href="int-style.css">.
This loads up the named stylesheet and displays the page as the stylesheet demands (if your browser supports stylesheets, that is). The stylesheet used for all of the intermediate tutorial pages is this one, a fairly simple stylesheet whose most important feature is defining the code to be green and the tags to be red.
On to the actual style-sheet language. First I'm going to run through what I did in the stylesheet for this tutorial, then I'll give some general rules for the language. It may help you to keep the stylesheet open in a separate window for reference.
The very first thing you see is a comment, describing what the file is. Comments are delimited by /* ... */, and the browser ignores everything between them.
Ok, first up is a style definition for all P elements.
Between curly brackets, we have three property/value pairs. The first one is text-indent: 2em. This indents the first line of the paragraph by 2 'em' spaces. The second one is margin-left: 2em. This sets the left margin of the entire paragraph 2 'em' spaces in. Note that this doesn't affect the previous property - text-indent indents based on where the margin is set, not based on the edge of the screen. The third is margin-right: 2em and this moves the right margin 2 'em' spaces in. I mainly did this because I don't like having the text go right to the edge of the screen.
Notice that the first two properties are terminated by semicolons, while the last one isn't. If there is only one property, no semicolon is needed, but if there are several, there must be a semicolon between each one. Notice also, that I indented the properties so that they are all lined up. This is purely for ease of maintenance - the browser ignores all white space. It is perfectly acceptable to put all of your property/value pairs on one line - it's just easier to read when they each get their own line.
The next one is for P elements that have a class="navbar" attribute inside the tag (ie, the navigation bar at the bottom of every screen). This one should be pretty obvious - it centers the paragraph. The class= attribute comes in very useful - I also used it, as you can see, for defining tagnames to be red.
Then, the H1 elements are all centered.
Then I define DL to have the same margins as the paragraphs, just so it doesn't look funny.
Now, two element names that are not separated by a comma like DL P are nested elements (in this case, a P that is contained within a DL). So those particular types of paragraphs are given no margins or indents.
Then on to the code-specific formatting:
The next one is for DIV elements that have a class="code" attribute inside the tag. This sets the margins to match with those of P. Now, I couldn't have done this where I defined the CODE properties, because that would have done funny things to code contained within paragraphs.
Now, all code contained within CODE tags is green. Simple enough. The CODE tag by default defines the text to be monopsaced, so I didn't need to define that there.
And finally, SPAN elements with a class="tag" attribute are monospaced and turned red. Now, the font-family: property here has two options, separated by a comma: Courier, monospace. What this means, is that your computer should display it in Courier font, but if it doesn't have that font, it should display it in any monospaced font that it does have. This is also why it's easier to read when each property/value pair gets its own line: when you have several values for one property it's easier to tell.
That's it for the specifics: now some general notes on style-sheet language.
The order of the commands is important: the last one has precedence if there's a conflict, so put your general things first and your specific stuff last. Why does the last one 'win' in case of a conflict? Well, let me put it this way: computers aren't smart. If, for example, you have instructions to color the text of all paragraphs blue, and then later on you have instructions to color the text of all paragraphs red, the computer is going to read down the sheet and think 'Ok, turn all paragraph text blue... done.' Then later on, it'll think 'turn all paragraph text red... done.' It doesn't check for what it was before, it just changes it - so the last one, red, is what gets displayed.
So, now you know enough to be dangerous. Have fun, practice, practice some more, and come back for my advanced tutorial. Once I get it posted, that is.
