Cascading Style Sheet Basics

Xah Lee, 2009-01-16

Cascading Style Sheet (CSS), is a markup language that allows you to specify appearances of HTML. This page shows you the practical basics. For a full introduction, see CSS.

Specifying CSS in HTML

To specify CSS in your HTML file, do like this:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>My Title</title>
</head>

In the above example, whenever the html file is loaded, it will load the file “mystyle.css”. The “link” line must be inside the “head” tag.

If you use the above for all your files, then you can control your whole site's appearance by modifying the single css file.

If you want to use CSS only for a single file, you can embed it in html file's header like this:

<head>
<title>My Title</title>
<style type="text/css">
p {color:red}
/* more css code here */
</style>
</head>

If you want to specify a style only for one particular html tag in a html file, you can embed a attribute “style=...” inside the tag, like this:

<p>Once upon a time ...</p>
<p style="color:red">... they lived happily ever after</p>

CSS Syntax

A CSS source code looks like this:

p {line-height:125%; width:60ex; font-family:sans-serif}
li {margin-top:0.8ex; color:gray}
blockquote {color:blue}
img {border:solid thin black}

/* basic table with border */
table.normal {border:1px solid black;border-collapse:collapse;}
table.normal th, table.normal td {border:1px solid gray;padding:.5ex}

/* code */
span.code {font-family:monospace;color:#00008d}

/* more code here */

In the above example, any “p” tag's content (a paragraph) will have a line height that's 125% of default, and has a width of 60 “ex”, and the font used will be sans-serif such as Arial. Similiarly, other tags's appearance are also specified. (the “ex” is the font's x-height. A width of 60ex will render each line's width at about 65 to 70 chars.)

In general, css code has lines like this “‹tag matcher› {‹appearance spec›}”.

Basics of Tag Matching Syntax

The tag matcher is often just the tag's name, but it can also be specified for tags that has a particular “class” attribute, or tags with a particular “id” attribute, or tags that are child of another tag, and others. For example, if you have “<p class="warning">...</p>” for any important paragraph, you can make all such paragraph red by “p.warning {color:red}”.

/* basic examples of tag matching */
p {color:red}     /* match any “p” tag */
p.xyz {color:red} /* match p tags that have “class="xyz"”. */
p#xyz {color:red} /* match the “p” tag that has “id="xyz"”. */
div > p {color:red} /* match “p” that's immediate child of “div”. */
div p {color:red} /* match “p” that's nested in “div” however deep. */

span.booktitle {color:red}  /* match “span” tags with “class="booktitle"”. */
.bold {font-weight:bold}    /* match any tag with “class="bold"”. */
a.offsite {font-size:small} /* match any link tag “a” with “class="offsite"”. */

If you want a more step by step tutorial, see: http://www.zvon.org/xxl/CSSTutorial/Output/contents.html

Here's some CSS reference:

As of 2009, major browsers all support almost all of CSS2.

Some 80% of CSS can be mastered in few days. Complete mastery of what CSS can and cannot do, and how to use it properly for web design, details of CSS2 and CSS3, browser quirks, will takes some months or years of experience.

Firefox has a Web Developer add-on that has CSS validation at: https://addons.mozilla.org/en-US/firefox/addon/60. Make sure the css you create is valid.

∑ Back to DHTML Tutorial.

2009-01