Ids and Classes allow you to define multiple style settings to as many elements as you need, Without having to set those settings for every element on the page. For example, Let's say I wanted to make only certain <p> tags have larger font than all of the other <p> tags used in my HTML document.
Classes
This can easily be accomplished with a simple class, like the one below.
<style type="text/css">
|
|
To define a class you simply put the element you want to be able to use that class, followed by a period, followed by the name you want the class to have. It isn't absolutely necessary to define the element you want to be able to use the class. You can leave that part out to allow multiple elements to use the same class.
To apply the above class to your <p> tag(s), all you have to do is add the attribute class to the tag. Example:
<p class="big">This text is bigger</p>
|
|
Pretty easy eh?
Let's look at some more things you can do with this...
For all, or most, of the code that is displayed in tutorials on this website I use <pre> tags. Not just ordinary <pre> tags, though. I give them a class - code. In this class I set the background color, borders and other properties that I want to have to make the code look better and to make it more readable.
Let's look at my code class.
pre.code {
|
|
I start out by setting the background color to a light gray (#E5E5E5). Next, I set all of the borders(top, right, bottom and left) to be 1 pixel width, solid, black. Then I set the width to an absolute 350 pixels. After that, I set the padding to 5 pixels. Padding is the area of space on the inside of the <pre> tag that separates the text from the borders. Next, I use the font-family property and set it to verdana, to match with the rest of this site. I also set two other back-up fonts to use, incase the visitor doesn't have verdana installed on his/her computer. Finally, I set the margins of the <pre> tag to 0(top and bottom) and auto(left and right). This is what centers it in the middle of the page.
Ids
Ids are much like classes, exept to define Ids, you need to use a number sign(#) instead of a period. Example:
<style type="text/css">
|
|
To use the Id above you need the id tag. Example:
<div id="box">Some text</div>
|
|
I hope you got some use out of this tutorial.
| Discuss Tutorial: Ids and Classes | 11 Comments |
Java Script does not suck. IF your using firefox go to tools and turn off your javascript. See how your web browsing is without it.#menu ul { /* CODE HERE */}
Why is the 'ul' after the '#menu'? Does it make any difference?
The tutorial is great. I knew how to write a stylesheet, but now I know how to get all the variables or whatever you wish to call them. Thanks, your site is amazing.
div#navigation a {color: white; }