Cascading Style Sheets (CSS) fall into four different types (or styles). When you understand how these four different types work, you'll be styling your web pages more efficiently.
To keep your CSS organized, use CSS comment tags to identify the different sections of CSS within your style sheet. For instance, you may have a section for the header styles, for the sidebar styles, for the navigation styles and for the footer styles. CSS comments use the /* … */ syntax:
/* This is a comment */
Class style (aka custom style)
Class styles can be selectively applied to any HTML element using the class="customname" syntax. For example, you could create a class style called highlight that has a bright yellow background color:
.highlight {
background-color: #FFFF33;
}
To apply this style to any content, you'd simply use the class attribute:
<p <b>class=</b><b>"</b><b>highlight</b><b>"</b><b>></b>This is really important</p>
ID
ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a Your code might then look something like this: Tag styles let you automatically redefine the style and positioning of any existing HTML tag, such as body, p, h1, or li. For instance, you could set the font styles for all your Compound styles are also automatically applied to an element based on its location within the page, such as all tags inside the #sidebar {
background-color:#66CCFF;
}
<div <b>id=</b><b>"</b><b>sidebar</b><b>"</b>>
<h1>Custom Web Design Services</h1>
<p> … </p>
</div>
Tag
tags throughout your entire site or within a particular section:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #8c9292;
text-transform: uppercase;
}
Compound
#wrapper #sidebar h1 {
color: # CC3300;
font-family: "Times New Roman",Georgia,Serif;
}
