Questions of the Week

Active Discussions

Interesting Title
by author
Interesting Title
by author
Interesting Title
by author
Interesting Title
by author

see all active posts

Anatomy of a CSS Style 101

by kirupa | 24 May 2011

Have questions? Discuss this HTML5 tutorial with others on the forums.

In HTML, the lingua franca for most things related to how things look is CSS. Before diving into CSS and looking at how it can be used, let's start at the very top and simply define the various parts of text and brackets that make up a CSS style.

Getting Started

I find it always helps to start by looking at a full example, so let's take a look at the following HTML document:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Hello...</title>
<style>
#mainContent {
}
p {
}
</style>
</head>

<body>
<div id="mainContent">
<p>What does Marcellus Wallace look like?</p>
</div>

</body>
</html>

If visualizing markup isn't your thing yet, you can see an example of what it looks like in your browser or take a look at the following screenshot:

screenshot of the HTML running in a HTML5-capable browser

The contents that you see are defined in plain HTML. The look of this example (the rounded corners, the colors, the font used, and text size) is entirely defined using CSS syntax.

CSS Styles

Like I mentioned earlier, the look of your HTML document is largely defined by what are known as CSS styles. You can spot them in one of several ways. One common way is within style tags placed as used in our example:

<style>
#mainContent {
}
p {
}
</style>

There are other ways you can find styles in your document, but we won't concern ourselves with them right now. What is important is what is contained inside them - the CSS rules.

Examining a CSS Rule

The main components of a CSS style are the individual rules, and it is these rules that have all the impact on how the contents of your documents look.

The following is an example of a rule that I took from our style:

p {
}

A rule is made up of two components - the selector and the declaration.

Selector

The selector specifies what elements this particular rule will apply to. In the case of this rule, our selector is the p tag:

p {
}

What this means is that this rule will apply to any element whose type is p. Selectors can be quite simple as what you see here, or they can be quite elaborate and involve combinations of HTML elements, class names, and ID values. A separate tutorial will examine the variety of selectors in greater detail.

Declaration

The declaration is everything after the brackets where you describe what actually happens to the selected elements hand-picked by your selector:

p {
}

A declaration can be made up of one or more CSS properties-value pairs. Each property and its associated value is separated by a colon:

css property and value pair

Each property-value pair is terminated by a semi-colon:

you can have multiple properties

If you have multiple property-value pairs, which you will commonly have, you can place them either in separate lines (as I've shown in all of my examples), or you can place them in a single line as well. CSS doesn't care as long as each property-value pair is separated by a semi-colon.

Conclusion

That's all there is to learning more about the anatomy of CSS. At a high level, you start with a CSS style. From there, you go into CSS rules which are, in turn, made up of selectors and declarations. A declaration is made up of one ore more property-value pairs that actually contain the appropriate CSS property and the value it contains.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use