CSS: The Basics - ID's and Classes
Css ... Style Sheets Two types of style sheets: Internal and External Internal - You insert your style code right into your html code. These ... should only be used if you are ...
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
Webpage title< itle> <br><link rel="stylesheet" type="text/css" <br>href="http://www.yourdomain.com/css"> <br></head> <br><br>If you decide to use an internal stylesheet, you have to put your <br>css style wihin the following tags: <br><br><style type="text/css"> <br></style> <br><br>All css or links to the external stylesheets have to go in <br>between the <head> tags <br><br>Now about Css Classes vs. ID's <br><br>The one major difference between a class and an id is that <br>classes can be used multiple times within the same page while an <br>Id can only be used once per page. <br><br>Example: <br><br>ID - The global navigation of your site, or a navigation bar. A <br>footer, header, etc. Only items that appear in only one place <br>per page. <br><br>Class - Anything that you would use multiple times in your page, <br>such as titles, subtitles, headlines, and the like. <br><br>Creating ID 's<br><br>To create an Id in your css, you would start with the number sign <br>(#) and then your label of the id. Here's an example <br><br>#navigation { <br>float:left; <br>} <br><br>To insert the id in your html, you would do something like this <br><br><div id="navigation"> <br></div> <br><br>You can also insert an id within another one like this <br><br><div id="navigation"> <br><div id="left"> <br><br></div> <br></div> <br><br>Remember to close the id's in order. <br><br>Now, onto css classes. <br><br>Creating Classes<br><br>To create a class in your css, use this <br><br>.subtitle { <br>color: #000000; <br>} <br><br>To insert the class into your html, do this <br><br><p class="subtitle" <br></p <br><br>Now, you can use the same class repeatedly in the same page <br>unlike Id's. <br><br>I also want to tell you something about link attributes. You <br>should always keep them in this order: <br><br>a { <br>color: #006699; <br>text-decoration: none; <br>font-size: 100%; <br>} <br><br>a:link { <br>color: #006699; <br>text-decoration: none; <br>} <br><br>a:visited { <br>color: #006699; <br>text-decoration: none; <br>} <br><br>a:hover { <br>color: #0000FF; <br>text-decoration: underline; <br>} <br><br>a:active { <br>color: #FF0000 <br>} <br><br>Of course, you can change the colors and text-decorations. This <br>is just something I cut out of my code! <br><br>Okay, these are the basics. What I highly recommend is to go and <br>download Topstyle Lite by going here: <br><br>http://www.bradsoft.com opstyle slite/index.asp <br><br>It's free and is a very helpful css editor. It not only color <br>codes and organizes your code, but it provides you with tons of <br>attributes that you can add to your class and id elements with <br>just a click. They also provide a screen at the bottom to view your <br>css code as you create it. Very useful for a free edition and <br>I'm looking to buy the pro version soon. <br><br>Now, this was just a very very brief explanation of the vital <br>elements needed when structuring your css. I have a good feeling <br>that when you download top style lite, you will learn how to use <br>the hundreds of attributes in your classes and id's <br><br>Good Luck in Your Web Designing Efforts!
