Instructables

Step 22: CSS ID and CLASS rules

Lets say you want to make a box on the right of your page where you can insert text...then you would need to make your own tag and define it via CSS in order for it to do so....

We use ID and CLASS selectors to get the job done for us...

We use them like this :

HTML file

<div id="MYFIRSTDIVID">
<p>
This content goes into the box on the right hand side of the page </p>
</div>


CSS file

#MYFIRSTDIVID
{
float:right;
height:100px;
width:100px;
border: 2px solid black;
}


To style div id's that you make, you <span style= “background-color: #FFFF00″>use the "#" sign</span> in the CSS file...
To style div classes that you make, you <span style= “background-color: #FFFF00″>use a "." (period)</span> in the CSS file

IDs are used when you are making it like a whole different tag like in the example above, but CLASSES are used when you want to style things inside another tag, like

HTML File

<p> This <div class="MYFIRSTDIVCLASS"> text </div> is styled by div class...</p>

CSS file

.MYFIRSTDIVCLASS
{
font-style:italic;
font-weight:bold;
font-color:yellow;
}


So classes are used when you have the specific div class inside another HTML tag (Excluding HTML, Body and Head tags)
Pre-defined elements like (h2, p, h1, br, em, i, b etc...) are edited using the div class function because they are repeated a lot of times in the document, and therefore it has to be a class div...
Div IDs are used when you are going to use the styles element only once in the HTML document...

 
Remove these adsRemove these ads by Signing Up