CSS

How to Speak CSS (The Syntax)

Sunday, 18 September 2005

All the browsers render CSS differently. CSS was born I think around 1999 and by 2001 IE for Mac support 99% of CSS1 specs (W3C, . You won't know every quirk along the way but some how all the quirks seem to find you wether you like it or not. It's annoying when this happens but when it does happen your forced to look the answer up on a website or pick up a book. That then puts more in your CSS arsenal and builds CSS confidence to jump to the next level. In CSS you have ID's, Classes, Pseudo Classes and Selectors for the most part. Here's the basic rundown in a nutshell: ID's = To be used by one and only one element on the page. example:

<div id="navBar">
<ul> 
<li>Home</li>
<li>About Us</li> 
<li>Contact</li>
<li>Careers</li> 
<li>Portfolio</li> 
</ul>
</div> 

You would only have one navigation bar hopefully! But navBar should not be used for any other element on the page. ID's are declared in CSS like this:

#navBar{ CSS goes here }

{tab=Classes}

Classes are different in that you can use a class as many times as you like! Classes are probably the most popular thing to use because of the power of changing every single item that uses the class by just changing the rules in the class CSS.

<p class="location">This is the information for location 1
</p> 

<p class="location">This is the information for location 2
</p> 

We declare a class using the '.' to tell CSS it's a class like so:

.location { 
width:300px; 
border: 1px solid #333; 
padding:15px; 
} 

This will make anything that uses a class with a 300px box with a border and padding. Pretty generic but you get the idea!

{tab=Pseudo Classes}

Mostly these are used in links: a:hover, a:visited, a:active, a:link are all pseudo classes to the <a> tag which is a link. So...moving on we have child selectors. Let's say we have this:

<div id="mainContent"> 
<div id="leftContent">
<p class="location">This is inside the leftContent ID.</p>
</div>
<p class="location">This is outside of left content area.</p>
</div> 

Using the code above for .location, the two tags in above code will look the same. With this new bit of code, we can change the way they look even though they have the same class name by being more specific in your css.

#leftContent .location {
width: 500px;
color: #ff22ee; 
border: 2px dotted #f00; 
} 

So with the new CSS code we just made we would have two different looking location boxes. The first one since it is inside the DIV tags for #leftContent will have a width of 500px with a font color of something and a 2px dotted red border around it. Since the next .location box is outside of the #leftContent box the CSS does not apply to it because it exclusively says those properties are for any .location class inside the #leftContent div tags. Stay tuned and if you have any questions please leave a comment. I will make new tutorials for questions I get! Enjoy!{/tabs}