A 'Short' Tutorial on CSS- Defining those CSS styles

Start out simple with CSS

To start, we'll go over the basic rules of CSS, and then we'll redefine the formatting for HTML tags, and talk about <span> tags. We'll then move into custom classes and pseudo-classes.

Designing simple style sheets is easy. You just need to know how to type, and how to follow some basic rules. For example, to set the text color of 'H1' elements to green, you would use:

H1 { color: green }

Now for the application. I used the named color in this example for simplicities sake. I always recommend defining your colors using the actual hex values (#FFFFFF for instance).

Back to Basic (I'm having flashbacks to the Army)

GET THOSE DECLARATIONS RIGHT PRIVATE!!! Every style definition has two parts, a selector, and a declaration. The selector tells the browser what to format, and the declaration tells it how to format.

The example above is a simple CSS rule. Each CSS rule consists of two parts: selector ('H3'), or what you want to format, and declaration ('color: green'), or how to format it. The declaration has two parts: property ('color') and value ('blue'). Believe it or not, that one little rule counts as a style sheet all on its own. When you add declarations and selectors for the rest of the elements on your page, you'll have a beautifully rendered and easily managed page.

The selector is what determines what you're formatting, and every HTML tag can be a selector. You can apply declarations on everything from <A> to <P>

There are roughly 50 properties in CSS1 that can determine how your HTML document is rendered. For a full list of all the possible declaration and properties, you'll have to visit the W3C style sheet spec.

Learning to use classes

Another way to define CSS is to use classes. A class rule looks like this:

.redtext { FONT-SIZE: 12px; COLOR: red }

To apply this style to a tag, you would use the class attribute inside your tag. You can apply classes to ANY HTML tag. For instance, if I wanted to make a heading, and the following paragraph use the same style, I would do this:

<h1 class="redtext">This text is 12 pixels tall, and red.</h1>
<p class="redtext">What do you know....so is this</p> 
			

Your custom styles will override the standard browser rendering, so that the heading and paragraph above look exactly the same. These classes can also be applied using the <span> tag. I could apply the same style like this:

<span class="redtext">
 <h1>This text is 12 pixels 
			tall, and red.<H1>
 <p>What do you know....so is this</p>
</span>

But even more powerful that classes, is the ability to redefine the way a specific tag is rendered.

Check it out next . . .