CSS Primer

What is CSS

CSS stands for Cascading Style Sheets but is essentiallay a clean and consise way to seperate the content of your website from the way it is displayed. By keeping the styling seperate you can minimize your code, make changes to your site rapidly, do more advanced styling and get your site crawled by search engines more cleanly.

In a classic pure html setting, you put in line <font tags everytime you change your text and then put </font tags to go back to “normal” and then again with the font tags to change later. The same can be true about tables and other object with properties like padding, back ground colors, borders, etc. By implementing css you can leave your text or other html object as they are and set your styling else where. This defining of the style for an object is referred to as a rule or css rule.


Say you have a blurb of text on a portion of your website that is white text on a blue back ground. With classic html this might look something like:

<p bgcolor="blue"><font color="white" size="2" face="Verdana, Arial, Helvetica, sans-serif">This is my blurb about something on my website.</font></p>

Imagine you have 50 such blurbs on your website and a month from now you want to make the font bigger, and then a week later change the face. As you can see this would get quite tedious aside from just being ugly to look at.

When you implement your css styling your blurb becomes much simpler.

<p>This is my blurb about something on my website.</p>

And then your css looks clean and is in one place for the entire page.

background-color: blue;
color: white;
font-size:2; font-family: Verdana, Arial, Helvetica, sans-serif;

So when you want to make those color or size updates in a month on all 50 blurbs, you do it once and you’re done.

Note: The styling above is the css rule. The individual lines, such as “color: white;”, is referred to as a declaration. Declarations are made up of properties (color) and values (white).

Creating Your First Style Sheet

Now in the first sample we could have just coded our CSS rule inline with our html document, but its better to store this in a seperate doc for organizational purposes and to use across the many pages to your site. First open up notepad and save the file with a clear name such as MyStyleSheet.css. The name of your CSS file does not matter nor does the .css extension, but we like to keep it clear so we know what we’re looking at later. Simply paste in the css rule from our first sample, or whichever you end up using and upload it to your site.

For your web page to actually use this styling we’ll need to reference it in our html. This is a simple one line entry. For organizational purposes keep this near the top of your html document.

<link href="MyStyleSheet.css" rel="stylesheet" type="text/css">

So What Can I Style?

In CSS you can style anything you have on your page and change near any property it has. If you wish to change the headers of your pages and you’ve used the proper html h1 then syling is as easy as setting a rule h1{ set of declarations }.

If you want your all of your tables to have a certain cell spacing, border width, back ground image, etc; just set the styling rule table{ set of declarations }.

So, what if you want some of your paragraphs<p> to be styled one way and others another? Or, perhaps style just a few words within a paragraph differently? Ahh, this is where CSS becomes even more powerful!

Independent (Named) Styles

Independent styles are a way for you to define your own set of css rules and apply them to whatever object on the site you want, independent of what kind of object it is.

Lets say from our first example with the blue paragraph that we only wanted this particular paragraph<p> to be with a blue background and white text. All the others can stay as they are. Let’s not revert to our old method of going to that particular paragraph and mucking up the html. Lets create a class and apply it to this paragraph. To do this we’ll create a set of rules with a name to your liking(but starting with a .(dot)).


To do this we’ll create a rule with a name to your liking(but starting with a .(dot)).

background-color: blue;
color: white;
font-size:2; font-family: Verdana, Arial, Helvetica, sans-serif;

Then to apply it we just go to our paragraph and set it using the class property.

<p class=”MyWhiteOnBlueP”>This is my blurb about something on my website.</p>

Sample 2

In this sample we’ll take just a few words from our paragraph and make them bold and red without having to create a ton of extra html to seperate these words.

color: red;

Now, just apply the rule. We’ll encapsulate the words in a generic <span> tag so we have a place to assign the independent style.

<p class="MyWhiteOnBlueP">This is my blurb about something on my <span class="HighLightedWords">website</span>.</p>

To do something like this just in old school html you’re talking lines of code just to get the appearance aside from the fact that your styles will eventually have more to them and look A LOT better. :)

Links (Special Case)

By now you get the gist of it. Implementing CSS cleans your site’s code up a lot, makes it load faster (less text for your browser to parse), makes maintenance a breeze, etc. I just wanted to hit on one more thing before letting you go wild on your own with CSS.

You may have noticed while browsing that links on sites look one way when sitting there, another when mouse over them and another when its a link that you’ve already been to. We’ll CSS handles this also, just the default class names are a little different.


A link that you’ve never been to and is just sitting there. Now you could just style with with the class a{} but we’ll be more specific since each browser’s implementation may differ.

a:link {
set of declarations.

A link that you’ve put your mouse over while browsing.

a:hover {
set of declarations.

A link that you are clicking (mouse down).

a:active {
set of declarations.

Finally, a link that you’ve been to.

a:visited {
set of declarations.


That’s really all you need to get started with CSS. As with anything there is always more to learn and techniques to apply but its important to get comfortable with what you’ve learned here first. I strongly urge you to try these things out and send any questions you’ve got to me by leaving a comment below or on Twitter. I’m happy to answer any questions or feedback and if I don’t know I’ll help you research for both of our benefit.


Leave a Reply