Four Types of Cascading Style Sheets in Web Design - dummies

Four Types of Cascading Style Sheets in Web Design

By Sue Jenkins

Part of Web Design All-in-One For Dummies Cheat Sheet

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 class="highlight">This is really important</p>


ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a <div> tag to hold your sidebar content, you’d give that container a semantic ID such as sidebar:

#sidebar {

Your code might then look something like this:

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


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 <h1> 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 styles are also automatically applied to an element based on its location within the page, such as all <h1> tags inside the <div> 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;