Basics of Cascading Style Sheets

on Sat Jul 05 08:39:22 GMT 2008 in XHTML and CSS and viewed 2496 times

• 
• 

This article discusses the very basics of Cascading Style Sheets, or CSS, which are used to style your webpages.

CSS is great, there’s no doubt about it. Everyone’s heard me talking about it, and I’m sure everyone’s asking me “Ben! How do I do it! Teach me! I’m so feeble!” Well, that’s what I’m here to do.

CSS uses all of the same tags as HTML. You can almost say it extends them. It’s kinda sorta a distant relative of OOP. But not really. Like I can have the <hr> elements and give it some different properties, like I’ll say maybe I want all <hr> elements to have a background color of black, I’d say:

hr { background-color:#000000; }

Easy. But let’s say I don’t want one of my <hr>s to be black. I want it to be blue. So I’d make a class, like this:

.newhr { background-color:blue; }

I don’t know the proper HEX code for blue, so I used the short english version. Now the . part is the most important part. This makes a new class to use. Now you can say:

  <hr> <!-- Makes a black horizontal rule -->
  <hr class="newhr"> <!-- Makes a blue horizontal rule -->

See? That’s pretty much the basics. There’s also some more stuff. Like classes that only affect a certain tag.

hr .only { background-color:#000000; }

Will only be a class for a horizontal rule, not for something like a <div> tag.

Now there’s also different things, called IDs. These can only be used once a document. These are declared like this:

#id { <!--Stuff in here--> }

And are used like this:

<div id="id">Content</div>