Exit tutorial
 Cascading Style Sheet Tutorials |
| CSS Introduction: Part 2 |
| As we discussed in Part I, we'll first look at embedded style sheet
tags. Embedded style tags go in the HEAD section of your document and
affect all instances of an HTML element on your page unless you override
it with another tag.
CSS follows a strict order of command, and always gives way to an overriding HTML tag. Here is how that order is followed: An HTML tag in the document has priority over a previously issued inline tag, embedded tag, or linked tag. An inline tag in the document has priority over an embedded tag or a linked tag. An embedded tag in the HEAD section has priority over a linked tag. A linked tag is last in the chain of command. So, the order of page formatting priority is:
An inline tag, just so you know, is when you code a CSS element into an HTML tag. Here is an example: <font style="font-size: 18px;"> It takes a standard HTML tag and uses a CSS element within the tag to cause a desired effect in page layout. The above tag sets the font size to the exact pixel height you want, unlike regular HTML where there are just seven preset sizes. To remind you, embedded style tags are placed in the HEAD section of your HTML document, like this:
<head>
<style type="text/css"> </head>
Now let's start looking at some of the specific things you can do. We'll start with page margins because many of you use left border style backgrounds. With CSS you can set page margins on all sides of the page. There is no need to figure out tables or use the transparent gif trick any more. To set your page margins:
<style type="text/css"> body {margin-top: 20px; --> This calls for some explanation The comment tags are there to prevent older browsers that can't parse CSS from displaying the CSS code on the page. There aren't many left, but it's a good idea to use them. Comment tags are the <!-- and the --> and is an HTML command to insert comments into your code that will not be seen on the page. Any HTML commands or text comments between those tags will not be shown. The 'body' is the selector, and is the HTML equivalent of an HTML command. The 'margin-top' is the equivalent of an HTML attribute (called the 'property' in CSS). The '20px' is the value, and is the equivalent of an HTML attribute value and is called by the same name. The 'px' stands for pixels. In the above style tag, the margin on the top of the page would be 20 pixels. This number can be set to anything you want, even zero to remove the default page margins. Same with the rest of the margins. In this case, no content would come within 20 pixels of the top of the page. You don't have to set all the margins, you can remove the lines you don't want. Be sure each line ends with the semicolon, that separates one property and value from the others. Technically you can leave off the semicolon from the last line, but it's a good idea to make a habit of using it all the time so you don't run into trouble by forgetting one. Notice I set the left margin to 120 pixels. That would be for a left border style background. With this type of coding, you wouldn't be able to add navigation buttons down the side of your border if that's the way you like your site. There are ways around that, which we'll cover in Part III. You should also notice two other important differences between style tags and standard HTML tags. First, the curly brackets surround the property and value elements, and you can put as many properties and values inside one set of curly brackets as are relevant to the tag they are being applied to. Secondly, a colon is used to attach the value to the property rather than the equal sign and quotation marks that are used in standard HTML. Armed with just this much, you could put together an attractive page using a left border background without having the content spill over onto the border and making you look like a beginner.
|