Learn CSS in Just 5 Minutes

Having been a previous CSS (Cascading Sytle Sheets) Idiot I am going to try to pass
my knowledge on to other people who just don’t get CSS or think it’s too hard or
not worth it. 10 minutes ago I was just like those people and after finally understanding
it, it is extremely simple.

Style settings can be put in following places.
1. An HTML page in <style> tags.
2. An HTML page in the <head> tag.
3. An external .css file.

Putting stuff in (1) will override stuff in (2) and (3).  Putting stuff in (2) will
override stuff in (3). See how it cascades? That is all that CASCADING is.

#1 example This will show the phrase “Some words in 8pt font.” in your current font
but in font size 8!
<span style=”font-size:8pt”>Some words in 8pt font.</span>

#2 example This will do the same exact thing but for all span tags.
<head>
<style type=”text/css”>
span
{
font-size: 8pt;
}
</style>
</head>

#3 example This will do the same thing as 2 except for all span tags that point
to the css file containing the code.

(PUT THIS IN A FILE CALLED style.css)
span
{
font-size: 8pt;
}

(PUT THIS IN YOUR HTML FILE)
<span>Some words in 8pt font.</span>

In the above examples we can use A, TD, TABLE or any other HTML tag we choose and
set their styles (or think of them as properties).
If you don’t want to affect all the tags you can use a what is called a “class”
which is still very easy.

(THE CSS FILE)
.AnyNameYouCanThinkOf
{
font-size: 8pt;
}

(THE HTML)
<span class=”AnyNameYouCanThinkOf”>BLAH BLAH BLAH</span>

The above would also work if you had a different tag and it will work on…
<div class=”AnyNameYouCanThinkOf”>BLAH BLAH BLAH</div>
…and also on…
<table><tr><td class=”AnyNameYouCanThinkOf”>BLAH BLAH BLAH</td></tr></table>

If you want it to only work on <span>s that have the class “AnyNameYouCanThinkOf”
then you would change your CSS File to…
span.AnyNameYouCanThinkOf
{
font-size: 8pt;
}

Also, if you only wanted spans that where inside of a div you would use
div span
{
font-size: 8pt;
}

If you only wanted it inside of <div>s that are inside <td>s where the
<td> is of class “TDClass” you would use this…
td.TDClass div
{
font-size: 8pt;
}

In the last example the style would be picked up by…
<table><tr><td class=”TDClass><div>THIS WORKS</div></td></tr></table>
…but it wouldn’t work for this…
<table><tr><td class=”TDClass>THIS DOES NOT WORK</td></tr></table>
…or for this…
<span class=”TDClass><div>THIS DOES NOT WORK</div></span>

Simple huh?

Leave a Reply

Your email address will not be published. Required fields are marked *


one × = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>