Anatomy of a CSS Style 101

by kirupa   |   24 May 2011

In HTML, the lingua franca (a new phrase I learned the other day!) 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 { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: xx-large; 
	font-weight: bold; 
	background-color: #CC0000; 
	border-radius: 4px; 
	padding: 10px; 
	text-align: center;
} 
p { 
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; 
	font-size: xx-large; 
	font-weight: bold; 
	color: #FFFF00;
} 
</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 {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-weight: bold;
background-color: #CC0000;
border-radius: 4px;
padding: 10px;
text-align: center;
}
p {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: xx-large;
font-weight: bold;
color: #FFFF00;
}
</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 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: xx-large;
font-weight: bold;
color: #FFFF00;
}

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 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: xx-large;
font-weight: bold;
color: #FFFF00;
}

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 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: xx-large;
font-weight: bold;
color: #FFFF00;
}

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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!