CSS Tutorial
As stated in the standard, CSS is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies web authoring and site maintenance. Now that you know the basics of XHTML, learning CSS will allow you to full control over the appearance of your XHTML document, without any modifications to your original code at all!
Why Use CSS?
CSS is recommended because it is much neater and pleasing to the eye, besides being easier to edit and make changes. Attributes such as text properties (e.g., boldness and colour) can now be specified in a distinct section of the HTML code or even in a separate file, making across-the-board changes much easier to implement. The following example demonstrates this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Eisen's Webpage</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p><font color="#0000FF" size="6"><b>Eisen is here.</b></font></p>
<p><font color="#FF0000" size="6">No, he is not dead.</font></p>
<p>In fact, he is <a href="http://www.yahoo.com/">alive</a>.</p>
</body>
</html>The above code has text properties and text all mixed up. When you want the same properties for more than one line of code, you will have to type the same font tag over and over again. And what if you want to change a certain property for the entire document? The only way is to do a repetitive search and edit. Not only is the code messy, but maintaining such a document can quickly become a tedious job.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Eisen's Webpage with CSS</title>
<style type="text/css">
body { color: black; background: white }
h1 { font-size: 200%; color: blue }
p.special { font-size: 200%; color: red }
</style>
</head>
<body>
<h1>Eisen is here.</h1>
<p class="special">No, he is not dead.</p>
<p>In fact, he is <a href="http://www.yahoo.com/">alive</a>.</p>
</body>
</html>But with CSS, the code above is much easier to understand. The properties are all defined in one block at the top of the code, and each segment can be easily invoked from the body text. Editing is simpler too: Just change the CSS code and the effect is seen for all tags which are attached to that property.
CSS Syntax
There are two ways to attach CSS code to a XHTML document. The first is through the style tag, whose type attribute should be set to "text/css". As demonstrated by the example above, the CSS code is just placed inside the style tag, which must be located in the head tag of the document. The second method, which is generally more preferable, is through a separate CSS file attached to the XHTML document by the following code in the head tag, replacing "style.css" with the path to your file:
<link rel="stylesheet" href="style.css" />Whichever way you attach your code, the syntax for CSS is still the same. Generally speaking, CSS code consists of series of rules, all of which follow a remarkably simple syntax: First, there is a selector which defines which XHTML elements you wish to work with. Then, there is a semicolon-delimited list of attributes you wish to change, all enclosed within a set of curly brackets. For instance:
a { color: white; background: black } /* all a tags */
a.red { color: red; background: black } /* only those of class red */
a#blue { color: blue; background: black } /* only that of id blue */
a, b { font-size: 2em } /* all a and b tags */
a b { font-size: 3em } /* b tags placed under a tags */As you can see, comments in CSS code begin with the characters "/*" and end with the characters "*/". Also, selectors have their own special syntax to help you specify which tags are affected by the rules you are about to set. A tag name all by itself represents all instances of that particular tag in the document, while a dot operator helps to limit your selection to only those instances with a particular class attribute. The hash character makes your rule extremely specific: That particular rule will only apply to the particular tag with the specified id attribute.
To specify rules for more than one tag at a time, you can list out selectors by delimiting them with commas as demonstrated in the example above. You can even select tags only if they are placed under another tag by separating them with a space in the selector. A demonstration of this is provided in the example below:
<p>This is a normal <a href="#">a tag</a>.</p>
<p>This is an <a href="#" class="red">a tag</a> of class red.</p>
<p>This is an <a href="#" id="blue">a tag</a> of id blue.</p>
<p>This is a <b>b tag</b>.</p>
<p>This is an <a href="#">a tag with an embedded <b>b tag</b></a>.</p>Each line of code in the HTML snippet above corresponds to the CSS selectors in the example preceding it. Note that the rules you specify cascade downwards in terms of specificity: In other words, if a certain instance of a tag matches more than one selector, then the rules for all the selectors are combined, with those of higher specificity getting higher precedence. For example, the a tag of class red in the example above is coloured red, but is also increased in size.
Text and Background Colour
You can change the text and background colour of almost any XHTML element by specifying new values for color and background-color in your CSS code. Alternatively, you can change the background colour by setting the background attribute, which is a shorthand identifier for all background related CSS attributes, instead. If you want to change colours for the entire document, just set the color and background attributes for the body tag. Colours can be specified in hexadecimal, in words, or in the new CSS-only numerical form, all of which are demonstrated below:
body { color: #FF0000; background: green }
a { color: rgb(0, 0, 255) }With this, you can start designing your page's colour scheme with assurance that any changes you'll need later can be made by simply changing your style sheet. If multiple pages are going to use the same style sheet, you can even place it into a separate file, allowing you to change the look of an entire website at one go!
Margins and Indents
For setting margins all around an element, you can use the margin-top, margin-right, margin-bottom, and margin-left properties. Alternatively, you can set all four margins at one go with the margin attribute. Your margin values can be expressed in a number of ways, but you will most likely be using pixels (px), relative font size (em), or percentages. For instance, the example below sets all margins to 10% of the window's dimensions, and the margins will scale when you resize the browser window.
body.one { margin-top: 10%; margin-right: 10%;
margin-bottom: 10%; margin-left: 10% }
body.two { margin: 10% }
body.three { margin: 10% 10% 10% 10% }Note that both body.one and body.two in the example above are equivalent. From body.three, we can see that margin values clockwise from the top can also be set through the margin attribute by separating the values with a space. CSS properties like margin are known as shorthand properties.
Sometimes you may want to indent the first line of each paragraph. The text-indent property emulates the traditional way paragraphs are rendered in novels. For instance, the example below indents the first line of each paragraph by 2em, where 1em equivalent to the height of the current font.
p { text-indent: 2em }Generally speaking, using relative font sizes is recommended over specifying pixels. By using em to measure distances, you can preserve the general look of the Web page independently of the font size. This is much safer than pixels, which can cause problems for users who need large fonts to read the text. Sticking with em as your unit for size avoids any possible problems.
Font Properties
Using keywords, you can set the styles for the font you are using. The text-transform attribute supports the keywords capitalize, uppercase, and lowercase, while the font-style attribute allows you to set the font to either italic or oblique. For example, if you want em to appear in bold italic and strong in bold uppercase:
em { font-style: italic; font-weight: bold }
strong { text-transform: uppercase; font-weight: bold }Most browsers use a larger font size for more important headings. If you override the default size, you run the risk of making the text too small to be legible, particularly if you use points. You are therefore recommended to specify font sizes in relative terms, such as in the example below:
h1 { font-size: 200% }
h2 { font-size: 150% }
h3 { font-size: 100% }It is likely that your favorite font won't be available on all browsers. To get around this, you are allowed to list several fonts in preference order under the font-family property. To use the generic fonts installed on the user's system, just use the keywords serif, sans-serif, cursive, fantasy, and monospace.
body { font-family: Verdana, sans-serif }
h1, h2 { font-family: Garamond, "Times New Roman", serif }In the example above, important headings would preferably be shown in Garamond, failing that in Times New Roman, and if that is unavailable in the browsers default serif font. Paragraph text would appear in Verdana or if that is unavailable in the browser's default sans-serif font.
Borders and Backgrounds
You can easily add a border around a heading, list, paragraph or a group of these enclosed within a generic div element. You can use any of these keywords for the border-style property: dotted, dashed, solid, double, groove, ridge, inset and outset. The border-width property sets the width. Its values include thin, medium and thick as well as specified widths such as 0.1em. The border-color property allows you to set the color.
div.one { border-width: thin; border-style: solid; border-color: red }
div.two { border: thin solid red }Just like margin, border is a shorthand attribute that allows you to set border-width, border-style, and border-color all at one go. You can leave out any of these attributes if you want the style to keep its default value for that property. Sometimes you may wish to paint the background of the box with a solid colour or with a tiled image. You already know how to fill backgrounds with solid colours, so the example below will demonstrate how to use the background-image property to fill a background with an image.
div.image { background-image: url("background.gif") }Note that your path to the background image must be enclosed within brackets preceded by the string url. This is to denote that what you are passing to the CSS parser is actually the URL of another file and not just any string.
Link Colours
You can use CSS to set the colour for hypertext links, with a different colour for links that you have yet to follow, ones you have followed, and the active colour for when the link is being clicked. You can even set the colour for when the mouse pointer is hovering over the link. You do this by setting pseudo-classes, which are denoted by the use of a colon in the selector. You attributes thus only only apply to a particular state of the tag.
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:active { color: rgb(255, 0, 102) }
a:hover { color: rgb(0, 96, 255) }
a.plain { text-decoration: none }The code above also demonstrates how to show hypertext links without them being underlined. You can do this by setting the text-decoration property for a tags to none, which would suppress underlining for a link. However, when most people see underlined text on a Web page, will expect it to be part of a hypertext link. As a result, you are advised to leave underlining on for hypertext links. A similar argument applies to the link colors, most people will interpret underlined blue text as hypertext links. You are advised to leave link colors alone, except when the color of the background would otherwise make the text hard to read.
Conclusion
You have come to the end of our CSS tutorial. With CSS, it is now possible for us to completely separate structure from style, resulting in neater and more systematic XHTML documents with a more consistent visual appearance. After some time from working with CSS, you will come to discover that changing the look of your website has become as incredibly simple task. In fact, with the DOM, it is now even possible for the user to determine the look of your site through a web script! CSS also has many rules for controlling screen readers and printed documents, so if you're interested to learn more, resources are available on the web on the specifications.
