The structure of a CSS document is actually very simple. There are only two sections in a proper CSS document, the media type and the list of style rules. I have added a simple CSS document below as an example, it uses the same example rule as the CSS syntax article.
@import url("./globalstyles.css");
@media screen {
a {
color: green;
}
}
So we know where the rule is, and all that leaves is the media type and the line that says import. Well the media type is really simple as well, this style document defines styles that are rendered to the screen. There are 10 media types defined and recognized by the W3C. They are braille, aural, embossed, handheld, print, projection, screen, tty, tv and all. For explanations of each type you can go to the media types page of the W3C.
The last thing to discuss is the import statement. This statement simply takes another css file and places it into the current file. This is useful for when you have a general look and feel for a website lined up but need to make changes for a specific page. The import statement lets you have all of your most common styles in a global css document and have page specific styles in another, this helps reduce duplicate code to a great extent. It is important to note that the "url" portion of the import statement should be used with parenthesis and the quotes, some browsers support the url statement without parenthesis and quote but not all. It is safer to use them because we can rely on all recent browsers being able to interpret it correctly.
The last thing to discuss is how to add your style sheet to the web page, so that it can be used. This is done by using a link tag in the head section of an HTML document. the following is an example of an HTML document that links to the css file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Page title goes here</title>
<link rel="stylesheet" href="http://www.howtoprogram.info/styles/screen.css" type="text/css">
</head>
<body>
<p>Page content goes here.</p>
</body>
</html>
So the sample above adds a new tag called "link" to the normal HTML boilerplate code. The link tag is very versatile and has many uses but we are going to focus on linking to CSS documents. The link tag in this example has three attributes rel, href and type. The ref attribute is short for relationship, so this example says that the linked file is related to this file because it is the style sheet for this file. href in the link tag has the exact same meaning as href in the anchor tag. It is simply the URI of the resource, in this case the style sheet. The type attribute is a little bit wierd, in this case it is talking about the linked to files MIME type. A MIME type is a set of types that help a web browser and other internet enabled software understand and process the content properly. Wikipedia has a very good entry on MIME types and how they are used.
This work is licensed under a Creative Commons License.
Privacy Policy