Understanding CSS

CSS Coding Tutorials | Submited Nov 16, 2007

Written by: John

While CSS classes might not be new to some people, they are to others so I'm hoping with this brief and simple tutorial I'll be able to give some people out there a little more understanding at how CSS is handled. Below is a block of text that I'll be using as a guide.

Here is just some simple Big and Small text
Some folks like green text and blue
How about some bold and green text?
And we can Join as many classes as you'd like.

Source HTML

<div class="underCSS">
Here is just some simple <span class="CSSbig">Big</span> and <span class="CSSsmall">Small</span> text<br />
<span class="CSSgreen">Some folks like green text</span> and <span class="CSSblue">blue</span><br />
How about some <span class="CSSbold CSSgreen">bold and green</span> text?<br />
And we can <span class="CSSbig CSSgreen CSSbold">Join</span>
<span class="CSSsmall CSSblue">as many</span> <span class="CSSbold">classes</span> as you'd like.
</div>

Source CSS

The css below, would be placed between your Style Tags

.underCSS .CSSbig {font-size:20pt;}
.underCSS .CSSsmall {font-size:7pt;}
.underCSS .CSSgreen {color:#00ff00;}
.underCSS .CSSblue {color:#00aaff;}
.underCSS .CSSbold {font-weight:bold;}