CSS: The Basics - ID's and Classes  


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 to create a specific page with a specific style. If you want to be able to make global changes to your website using only one style sheet, you have to use....

External Stylesheets - Instead of putting all the style code into your html code, you can create a single document with your css code and link to it within your webpages code. It would look something 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 put your css style wihin the following tags:

<style type="text/css"> </style>

All css or links to the external stylesheets have to go in between the <head> tags

Now about Css Classes vs. ID's

The one major difference between a class and an id is that classes can be used multiple times within the same page while an Id can only be used once per page.

Example:

ID - The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per 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 number sign (#) 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 page unlike Id's.

I also want to tell you something about link attributes. You should 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. This is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and download 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 color codes and organizes your code, but it provides you with tons of attributes that you can add to your class and id elements with just a click. They also provide a screen at the bottom to view your css code as you create it. Very useful for a free edition and I'm looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital elements needed when structuring your css. I have a good feeling that when you download top style lite, you will learn how to use the hundreds of attributes in your classes and id's

Good Luck in Your Web Designing Efforts!


Recent article: CSS Articles
CSS Content? Using tables within the content of your page is a major no-no, the whole intent and purpose of CSS is to control the style of your page elements, this is done using an external stylesheet.

An external Stylesheet? External stylesheets give you the control of your whole website from one single file rather than trying to edit your whole websites CSS using global search and replace or by opening each page individually.

If you are new to this HTML malarkey then welcome, you have just embarked upon a new learning curve that does not take too long to master. Before the invention of CSS everything within a webpage used to be designed using tables.

Indeed there are still a lot of html editors out there that still use tables to format a pages content, one strong word of advice, get rid of that software and start again. Tables are not extinct within webpages but they should only be used for the purpose of presenting data.

Beginning CSS? I am not going to use this article to give you a whole list of tags and how to apply them, that information would be too easily ignored. There are thousands of well rounded websites available on the net today that can walk you through the first stages of CSS, the one I would recommend would be: W3Schools CSS intro this is a perfect place to start learning CSS, in the interests of parity and fairness I will also recommend What can be achieved using CSS .