DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: Snazz-o-Matic


DreamweaverFAQ.com » Tutorials » CSS » A 'short' Lesson On CSS, Page Four


A 'Short' Tutorial on CSS- Take control of your page . . .

Custom Classes

Custom classes, as we used for our first example, are where the true power of CSS lies. This is a snippet from Spider Food's CSS file:

 .links    { FONT-SIZE: 11px; 
COLOR: #003399;
FONT-FAMILY: Arial;
TEXT-DECORATION: none } A:hover { COLOR: #cc3333; TEXT-DECORATION: underline } h1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold} h2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099} p { font-family: Arial; font-size: 12px; color: #333333} pre { font-size: 12px}

On this page, you're seeing the implementation of all five of these custom classes. The title "Take control of your page . . . " is surrounded by the <H1> tag. The "Custom Classes" title is set to <H2>, the body of the page (what you're reading right now) is the <P> tag, the code example is the <PRE> tag, and the menu bar to the left uses the .links and A:hover (which uses a pseudo class, coming up next).

The true power of these classes, is that every <H1> tag on the spider food site is 16 pixels, and the color red, without any additional coding involved. Normally, I would have to code these attributes using the font tag as such:

<h1>
<font face="Verdana"color="#CC0000" size="2">Stuff here </font>
</h1>

Using my CSS, it's just:

<h1>Stuff here</h1>

This reduces the size off my pages, makes it easier to change things around, and generally makes my pages load faster. If I wanted to make all my headings blue instead, I would just change my CSS file, instead of opening every page, and changing my <font> tags.

Remember that any HTML tag can be redefined using CSS. This means you could change the size of all your bold text, increasing the size associated with your <B> tags. You could also make all your lists a different font than your body text by redefining your <LI> tags. The sky's the limit.

And you can also define multiple classes at one time. If you wanted every heading tag to be red, you could code it like this:

h1, h2, h3, h4, h5 {color: #CC0000 }

Have I mentioned that I love CSS?

But next . . . the power of pseudo classes.

::This page last modified 8/13/2013 at 03:37::

Copyright © 2001-2021 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice