) are tags which should only be used once per web page. Generally, you want to use an ID to denote the page structure, so you might have id’s for a web page of “header”, “content”, “sidebar” and “footer”, because you’re not going to have two headers or two footers for any one webpage. To assign a style to an ID tag in CSS, use:
#idtagname{
/* assign attributes here */
}Class
Unlike ID tags, class tags can be used multiple times. This is great when you want different parts of the design to look the same.
To assign a style to a class tag in CSS use:
.classname{
/* assign attributes here */
}

HTML elements
You can apply a style to a particular HTML tag with CSS without using an id or class. For example, if you wanted to change every list (ul) to change from a dot to a square, you could simply do:
li{
list-style:square;
}

Generally you don’t want to apply a style to an element like this. One exception though would be the body tag because it only appears once. In the next paragraph though, you will see where using the general HTML element is appropriate.

Combining All Three
If you’ve played around with CSS before, you’ve probably created HTML like this:

If you have a lot of li elements, you’ll know it can get very annoying to type out class=”x” every time. But there is a way to simplify this. Instead use the following CSS,

.y li{
/* CSS attributes for class x here */
}

And your HTML can become this:

The CSS applies the attributes for define in “.y li” for the li elements embedded in class “y”. Thus you get a cascading effect where you can affect elements inside certain elements. You can use this cascading affect for any combination of ID’s, class and elements. For example, you might use:

#content .post ul{ /* style attributes here */}

Print vs Screen
Believe it or not, you can create a CSS for when someone prints out a web page which is great for a visitor because usually if you print you just want the primary content. Generally, you want a very different style sheet as compared to the “screen” version. Using the attribute “display: none;” you can and should get ride of ads, a sidebar and any other information someone wouldn’t want to print out. You also want a black text on white background design, otherwise you’ll make people print too much ink.

You link to the print CSS file almost exactly the same except for the ‘ media=”print” ‘ part.

<!– for browser –>
<!– for printer –>

CSS Default
When you load your HTML file in any web browser whether it be Firefox, Internet Explorer or Safari, the browser will render the web page with certain style attributes already assigned. You can of course override these attributes with CSS, but if you don’t specify differently, the browser will render the page with certain attributes already applied. Each web browser has subtle difference in how they render a web page under defaults, but in general a web page will look the same.
For example, the dots for a list item or the font family is a default style of the browser. You have the power to make that dot into a square or that font from Times New Roman to Verdana. But if you don’t specify, the browser will assume it. Another default attribute that always fools a beginner is the body tag which has a margin.

Save lines of code, be efficient
From time to time, you’ll notice your coping and pasting attributes from one id or class to another. If you find yourself applying the same attributes to a few elements, then you can combine attribute assignments so that multiple classes, ids and elements share the attributes. Lets take the attributes for the left and right arrows on the javascript image gallery. I originally had this as the attributes:

#moveleft{
margin:0px;
height:58px;
color: white;
width: 16px;
text-indent: -2000em;
text-decoration: none;
z-index: 1000;
display:block;
cursor: pointer;
float:left;
background: url(’left.gif’);
}

#moveright{
margin:0px;
height:58px;
color: white;
width: 16px;
text-indent: -2000em;
text-decoration: none;
z-index: 1000;
display:block;
cursor: pointer;
float:left;
background: url(’right.gif’);
}
This is silly though because the two are essentially duplicates of each other except for the background image. We can though apply one set of attributes to both ids (using a comma to include more elements) and set the background to their respective urls:

#moveleft, #moveright{

margin:0px;
height:58px;
color: white;
width: 16px;
text-indent: -2000em;
text-decoration: none;
z-index: 1000;
display:block;
cursor: pointer;
float:left;

}

#moveleft{background: url(’left.gif’);}

#moveright{background: url(’right.gif’);}

Conclusion
The mark of a good CSS designer is one that creates the CSS for the HTML. If you start designing your HTML around what you can do with the CSS, you still have more to learn. In the future, I’ll delve into the basics of taking a design in Photoshop into HTML web page. If you have any questions or sub-topics you would like me to discuss, please leave a comment below.
Image