|
CSS: The Basics - ID's and Classes ... Correct
|
By Eric McArdle
[Hits: 29350]
|
|
Css
Cascading Style Sheets
Two types of style sheets: Internal and External
Internal - You insert your style code right into your html code.These stylesheets should only be used if you are intending tocreate a specific page with a specific style. If you want to beable to make global changes to your website using only one stylesheet, you have to use....
External Stylesheets - Instead of putting all the style codeinto your html code, you can create a single document with yourcss code and link to it within your webpages code. It would looksomething like this
{head} {title}Webpage title{ itle} {link rel="stylesheet"type="text/css" href="http://www.yourdomain.com/css"} {/head}
If you decide to use an internal stylesheet, you have to putyour css style wihin the following tags:
{style type="text/css"} {/style}
All css or links to the external stylesheets have to go inbetween the {head} tags
Now about Css Classes vs. ID's
The one major difference between a class and an id is thatclasses can be used multiple times within the same page while anId can only be used once per page.
Example:
ID - The global navigation of your site, or a navigation bar. Afooter, header, etc. Only items that appear in only one placeper page.
Class - Anything that you would use multiple times in your page,such as titles, subtitles, headlines, and the like.
Creating ID 's
To create an Id in your css, you would start with the numbersign (#) and then your label of the id. Here's an example
#navigation { float:left; }
To insert the id in your html, you would do something like this
{div id="navigation"} {/div}
You can also insert an id within another one like this
{div id="navigation"} {div id="left}
{/div} {/div}
Remember to close the id's in order.
Now, onto css classes.
Creating Classes
To create a class in your css, use this
.subtitle { color: #000000; }
To insert the class into your html, do this
{p class="subtitle"} {/p}
Now, you can use the same class repeatedly in the same pageunlike Id's.
I also want to tell you something about link attributes. Youshould always keep them in this order:
a { color: #006699; text-decoration: none; font-size: 100%; }
a:link { color: #006699; text-decoration: none; }
a:visited { color: #006699; text-decoration: none; }
a:hover { color: #0000FF; text-decoration: underline; }
a:active { color: #FF0000 }
Of course, you can change the colors and text-decorations. Thisis just something I cut out of my code!
Okay, these are the basics. What I highly recommend is to go anddownload Topstyle Lite by going here:
http://www.bradsoft.com opstyle slite/index.asp
It's free and is a very helpful css editor. It not only colorcodes and organizes your code, but it provides you with tons ofattributes that you can add to your class and id elements withjust a click. They also provide a screen at the bottom to viewyour css code as you create it. Very useful for a free editionand I'm looking to buy the pro version soon.
Now, this was just a very very brief explanation of the vitalelements needed when structuring your css. I have a good feelingthat when you download top style lite, you will learn how to usethe hundreds of attributes in your classes and id's
Good Luck in Your Web Designing Efforts!
P.S Change { and } to < and >
|
|
|
|
|
|
