Styling Web Pages with CSS

What is CSS?

CSS stands for cascading style sheets. In a nutshell, CSS presents your content, while HTML defines it. Your browser presents your content according to the definitions and formatting rules in your style sheets.

You put your content in HTML and define headers, paragraphs, links, images, etc. and then use selectors and properties in your style sheets to tell the browser how to present those elements graphically.

Benefits of CSS

The benefits of using style sheets are incredible. You can completely change the look of your entire site in a matter of minutes instead of hours. You drastically increase page load times and at the same time make your information more accessible.

I am not going to go into the how-to of CSS since so many people have built entire sites around the issue and I have given you some good links in the additional resources to some of those sites.

ID and Class Selectors

Almost every element in html can have an ID attribute, a class attribute, or both. If you are at all familiar with databases, knowing when to use a class or ID will come quite natural to you. If you aren't familiar with databases, I will try to explain in plain terms what to use when.

An ID is a unique identifier to a particular element. If you give a <p> tag an ID of "firstPara" for example, you can not use an ID of "firstPara" on any other element. This includes any other <p> tag as well as any other tag whether it be a <h1> tag or an <a> tag or any other. An ID value is unique to the element it is assigned to and cannot be reused. There is one caveat to this though. An ID's value is only unique to that element on that page. For example, you could have a division(DIV) with an ID of "header" on every page since it is unique to the page and not the site as a whole.

If you view the source on any page on this web site, you will find a division with an ID of "header". You will not however, find a tag anywhere else on the page with an ID of header.

Now a class is a little bit different. A class value can be reused over and over again on a page. you could have every <p> tag on a page have a class attribute with a value of "pageParagraph" and this is perfectly legal. Why you wouldn't want to implement that particular example will become obvious as you start to learn CSS.

Using IDs and classes are virtually the same as you implement properties for the elements. One thing you will always want to remember though is that ID properties take precedence over class properties. Browsers in "quirks" mode will render IDs and classes without precedence, but get in the habit of doing it right the first time and you won't have to redo it later.

What I mean when I say precedence is that if you have a parent element like a division with an ID of "parentElement", you would use the ID selector and give that element and it's children(all elements within the opening and closing <div> tags) properties through the ID selector. Let's say you give all <p> elements inside the before mentioned division a font color of black. Suddenly, you find that you want many of the paragraphs to have a font color of blue. Now you create a class called "blueText" and assign that class to each <p> element you want blue. When you go to view the page, the paragraphs with the "blueText" class are still black! This happens because the division has been assigned an ID and you have assigned a black font color to all <p> elements. Even though you assigned a class to certain <p> elements, the declaration of all <p>s under ID "parentElement" to have a font color of black has taken precedence.

How do you fix this? Easy. Just assign properties to the class through the ID selector. It is a bit advanced from basic CSS, but you will thank me for many saved headaches when you start to do things properly in CSS. Here is an example of how this works.

Here is the HTML code along with the styles defined in the example that didn't work.

All that is needed to fix the problem is to assign properties to the class through the "parentElement" ID:

If this seems all too foreign for you, read assigning CSS properties. If your head is still spinning, bookmark this page and come back when when you are having problems with IDs and classes working together. Then just give this section another read and it should make sense.

Using the DIV and SPAN tags

These will be your new best friends. The DIV and SPAN tags work in much the same way when manipulating text, but react totally different when you try using the two with other properties. Using a span tag is like saying, "I want this element to act like it normally would, but add these features to it." Using a div tag is like saying, "OK, listen up browser, these elements are separate from everything presented thus far. Render these elements according to these rules I have set forth."

Here is an example paragraph with a span tag wrapping the text "example paragraph". I have created a class called cssExamp and assigned that class to the span tag.

Here is an

with a div tag wrapping the text "example paragraph". I have assigned the same cssExamp class to the div tag.

Wow, what a freakin mess that made in the second paragraph. Why? It's just plain wrong, that's why. DIV elements are for presenting blocks of information, whereas the SPAN element are for presenting information inline. To further illustrate the point, I'll assign a 1 pixel black border to the properties of the class and add a gray background. For readability, I'll put 4 pixels of padding in there too. Here are the exact same two paragraphs.

Here is an example paragraph with a span tag wrapping the text "example paragraph". I have created a class called cssExamp and assigned that class to the span tag.

Here is an

with a div tag wrapping the text "example paragraph". I have assigned the same cssExamp class to the div tag.

When you use a div tag, you are creating a division in your content. You are basically telling the browser that everything within the div is separate from the rest of the content before and after it. In reality, you may have three div tags in a row representing three blocks of flowing information, but the browser treats those three blocks as three divisions in your content. For this reason, a div cannot be contained in a nonstructural tag. A structural tag would be any tag that gives a definite structure to the page such as a <td> tag, another <div> tag, a <body> tag, etc.

It is true that I could make the div in the second paragraph behave like the span in the first, but there is no reason I should do that. It would just create more work, more bandwidth, and would have shaky results across different user agents(ie. web browser).

Going through a tutorial like the one I have put in the additional resources below will give you a better handle on how these tags work.

I use both tags quite regularly since span is an excellent way to add or change something to an element inline and not have to worry about the page falling apart. The div tag gives me almost complete control over the structure of the document and helps me lay everything out and keep elements separate.

Assigning CSS Properties

Once you have read up on some basic CSS, you will be comfortable with these rules. First off, you need to select the element you want to assign properties to or you need to create a class you want to assign properties to.

Creating a class is probably the easiest to learn. You just put a period in front of a name and you're done:

.newClass{}

Now, you probably want to assign properties. Just add them in the brackets with the property name followed by a colon, followed by the value you want to assign that property, followed by a semicolon. You can set a value to many different properties by just duplicating your efforts. Here is the same class with two properties and values added to it.

.newClass{color:#000;text-decoration:none;}

So now you have this class assigned to a div and want all <a> tags within said div to be underlined. Just add a new line in your style sheet with the class name again, followed by a space, followed by the letter a and add your property:

.newClass a{text-decoration:underline;}

How about giving a font size of 80% to all <h2> and <h3> tags in your div. Use the same method as described earlier, but put a comma between the h2 and h3 like so:

.newClass h1,h2{font-size:80%;}

This is called grouping. You can group as many elements as you want together to give them the same property value. You just need to separate each element with a comma.

Now you just want the h2 tag to have a normal font weight, so use the same method as the <a> tag.

.newClass h2{font-weight:normal;}

The h2 still has a font size of 80%. The value has been declared and will cascade through other declarations of h2 until the font-size of the <h2> tag is changed.

But what if you have assigned some IDs and want to assign properties? You do all of the exact same things except you access an ID with a # symbol. Assume you have a div with an ID of "main". This is how you would access it.

#main{}

Want to have all <a> tagged text underlined?

#main a{text-decoration:underline}

OK, let's get tricky for a minute. You created a div inside this last "main" div and assigned the first class "newClass" to it. Thing is, you want the inside div to have all the properties of your newClass class, but want any <a> tags to show up red if they are within the newClass div. Any <a> tag appearing in the "main" div can remain the way it is. Still with me? Here would be an excerpt from some code to help you see it:

Here is how you would achieve that small feat.

#main .newClass a{color:red;}

Here is how I keep all this straight:

. = element with a class of

# = element with an ID of

 = of any/an

, = and

I use this and read backwards from the first curly bracket({). So #main .newClass a{color:red;} would read like this to me:

I want the properties in the curly brackets to apply to any <a> element of any element with a class of "newClass" of an element with an ID of "main".

If that didn't make sense, I'll try to put it another way. Find the element you want to assign properties to. Jot down a { and go from right to left. Write down that element. Is that element enclosed in another element with an ID or a class? If so, skip a space and write the ID or class value down with it's relevant precursor(# or .). Now, is that element enclosed in an element with an ID or a class? If so, same thing. Keep going until you get to the body tag.

Still don't get it? Practice and experimentation make perfect.

I saved the easiest till last in case your brain was beginning to melt. If you want to redefine an HTML tag, just put the tag name down and give a property a value.

p{font-family:Arial, Helvetica, sans-serif;}

Now every time you write a <p> tag in your code, The font used to display that paragraph will be Arial. The rest of the fonts listed are backup fonts if the browser can't render Arial. If you put that <p> in an element with a class where you have given a different font to the p tag within the class, the different font will be used.

Embedding and Linking Style Sheets

There are two different ways to add styles to your pages. The first is embedding. To embed a style, just simply put this block of code in the <head> tag.

Define any page specific styles within the style tag. Only put styles your never going to use again in here since they will not be accessible across different pages.

The second method is linking. You create a separate page in notepad or a similar ASCII text editor and save it as whateverYouWant.css and save it in a directory called "stylesheets" or whatever you feel like naming it. Put all the styles that you will be reusing across different pages in this file and save it. Now all you need to do to access these styles from any of your pages is to put one simple line of code in the head tag:

That's it, all your styles defined in your style sheet are available in any page you put this link in.