From the book
From the book
CSS Document Structure
In the most basic form, a CSS style rule or “rule set” has the following syntax:
selector {property: value;}
Doesn’t that look suspiciously like the structure of an HTML tag? Earlier I mentioned that the tag syntax and rule syntax were roughly analogous. The image below (Figure 1.1) illustrates what I mean:
){kind=small}
Figure 1.1 Analogous tag and style-rule structure
The tag name of the HTML tag and the selector of the CSS style rule are similar, and sometimes even the same if you are using the tag name as the selector. The CSS property is similar to the HTML attribute, and like the tag/selector, may share the same name.
In a style rule, the selector targets the HTML element that will be affected by the rule set. The selector is everything that comes before the curly brackets.
The declaration block is everything that is between the two curly braces, and the style declaration itself is the property: value pair. The semicolon at the end is not required for a single declaration, but is used to separate declarations from each other and to end a list of multiple declarations. Therefore, it is a good habit to end all declarations with a semicolon.
Just as HTML tags can have multiple attribute-value pairs in one tag, you can have multiple property-value pairs per style rule:
selector {property: value; property: value; property: value;}
For some properties, you can also have multiple values for one property:
selector {property: value, value, value;}
And you can have multiple selectors for a set of properties and values:
selector1, selector2, selector3 {property: value; property: value;}
In contrast to HTML, the CSS style rule always has a selector, the selector always has a property, and the property always has a value. This is important to keep in mind as it leads to some of the very first clues to hunt for when troubleshooting CSS. Forgot a selector? Then the declaration has nothing to be applied to. Don’t have a property? Then the browser can’t determine where to assign the value. Missing a value? Then the selector and property are all dressed up with nowhere to go and won’t render in the browser. Leave off the opening or closing curly bracket? Then the style won’t render, and the style declarations following it may be affected as well. Remember also that misspellings, use of improper terms, and unaccepted values will all have the same effect: your CSS won’t work as expected. These sorts of errors are among the most common problems when your pages don’t render as expected.
EMPLOYING STYLES IN YOUR DOCUMENTS
Now that you know the syntax, let’s look at where to place the style rules. There are several techniques for getting style rules into your HTML pages.
External styles
External style sheets are the modern-day workhorse of standards-based websites. Most websites have at least one style sheet for rendering the page on various media including standard monitors, cell phones, audio browsers, and printers.
Linking to an external style document with <link>
Connecting your style sheet to your HTML document is as easy as using the <link> tag, which establishes a relationship between documents. Here is the code:
<head> <title>Black and White Page Example</title> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head>
When the browser renders your page, it reaches the link tag, then retrieves the style sheet document and renders the styles. After the style sheet is downloaded, it is cached and reused without a new call to the server.
The external CSS document should not contain any HTML markup in it at all. The only content it has is style rules and comments. So if you got all riled up and put some <style></style> tags in the .css file, remove them! With HTML markup in the style sheet, the browser cannot properly render the page styles.
Obviously, using external style sheets is the best method for a website of any number of pages greater than one. Every page will call the style sheet and apply the styles, making the styles consistent throughout the website. If you ever want to change any piece of presentation, you just change the style sheet and the whole site changes. How in the world did we ever survive without this? Those were dark days pre-CSS!
Linking to an external style document with @import
Like using the <link> tag to link to an external CSS document, you can use the @import directive through the <style> tag to link to external CSS documents.
<head> <title>Black and White Page Example</title> <style type="text/css"> @import url(“stylesheet.css"); </style> </head>
The @import directive can also be used in an external style sheet. In this case, again, no HTML tags are needed. Simply use the directive as the first declaration in the document:
@import url("stylesheet.css");
If you use the @import directive in any of your style sheets, it needs to be the first declaration. If it is after any other style rules, the browser will ignore it. A useful advanced technique is to import multiple style sheets from one CSS document using the @import rule in that style sheet.
DOCUMENT-LEVEL OR EMBEDDED STYLES
Document-level styles are a great way to create and test all the styles you create for your pages before you export them to an external style sheet.
You place document-level styles in the head of the HTML document using the <style> tag.
<head>
<title>Black and White Page Example</title>
<style type="text/css">
body {background-color: #000000; color: #ffffff;}
</style>
</head>
The <style> tag always needs the type="text/css" attribute and value, and always needs to be closed.
As mentioned above, document-level styles are great for when you create your initial page or template document, and you want to work in one place to access both your styles and your markup. All of the styles can be reused within the document (as opposed to inline styles, which are only applied to the tag it is in). However, document-level styles add to the size of the page, and the styles are not applicable to any other pages in the website.
Inline styles
Inline styles are valid in HTML 4.01, but are so strongly recommended against that they are practically verboten, while in early proposed drafts of XHTML 2.0 the style attribute is fully deprecated and dropped from the specification altogether. In HTML 4.01 and XHTML 1.0, with the style attribute, you can insert style declarations directly into any HTML tag.
Before you use an inline style, however, think about it: what is the difference between that and, say, using the deprecated <font> tag? The answer is, not a whole lot. Don’t use inline styles: the styles themselves are not reusable by other elements on the page, they can’t be overwritten by embedded or external styles without the use of !important, they increase page-rendering time, and they quickly become a maintenance nightmare. Implementing your styles in other places will be a lot more powerful and portable for you in the long run.