Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

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

tag to hold your sidebar content, you'd give that container a semantic ID such as sidebar: 

#sidebar {
          background-color:#66CCFF;
}

Your code might then look something like this: 

<div <b>id=</b><b>"</b><b>sidebar</b><b>"</b>>
  <h1>Custom Web Design Services</h1>
  <p> … </p>
</div>

Tag

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

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

Compound styles are also automatically applied to an element based on its location within the page, such as all

tags inside the
with the ID of sidebar, which sits inside a parent container with the ID of wrapper: 

#wrapper #sidebar h1 {
           color: # CC3300;
            font-family: "Times New Roman",Georgia,Serif;
}

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: