First time visitor? The tutorials start here.

CSS Basics

In my previous article, I gave you some CSS to try out without explaining how it works. Now, I’ll explain how it works.

The first thing you saw in each example was the name of an xHTML tag. After that was an opening squiggly bracket ( { ), some defined properties, and a closing squiggly bracket ( } ) after those defined properties.

Where XHTML has attributes with defined values, CSS works in property/value pairs, and the syntax for it is also different than XHTML. Instead of separating the property and value with an equal sign and putting quotes around the value, the property in CSS is always followed by a colon ( : ) and the value in CSS is always followed by a semi-colon ( ; ).

Going back to that first example…

body {
     font-size: 12px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #339933;
     background-color: #fffaf0;
}

<body> is the tag you are defining styles for.

font-size is a property and 12px is that property’s value.

font-family is a property and verdana, arial, helvetica, sans-serif is the value of that property.

Since all the content on the page is contained between <body> and </body> (see the source code for practice1.htm in the practice files and look for the <body> and </body> tags there), anything you define for body will affect the whole page.

Since each paragraph is contained between <p> and </p>, then anything you define for p will affect every paragraph on the page.

Since each level-2 heading is surrounded by <h2> and </h2>, then anything you define for h2 will affect every level-2 heading on the page.

And so on, and so on, and so on.

You can style any xHTML tag by using the same format…

tag_name {
    property: value;
    property: value;
    property: value;
    property: value;
}

The same thing can also be written like this:

tag_name { property: value; property: value;
property: value; property: value; }

You may have noticed that I used both formats in the practice style.css, which is all a matter of preference. When a set of style definitions will easily fit on one line, I like to put it on one line, but if something has a whole list of style definitions, it is easier for human eyes to read and edit the CSS if it is typed out in list form, as you can see from the two examples above.

If you don’t still have them open, go ahead and open practice1.htm of the practice files in your browser and /styles/style.css in Crimson Editor, and see if you can change the color of the words contained within the <em></em> and <strong></strong> tags.

Next, you will learn how to add class names to xHTML tags, which will allow you more flexibility in styling your web pages with CSS.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.