CSS Basics

CSS Basics

Basic Terms

rule set: 
p {
	font-size: 10px;
	color: #333;
}

rule: 
p { font-size: 10px }

selector:  
p

declaration:  
{ font-size: 12px }

property:  
font-size

value: 
10px

It's all about the selector

Selector Types

Note on Classes vs. IDs. A document can have MANY tags with the same class value, but an id value can only be placed on ONE html tag.

Selector Weight

There is some fancy math going on in your browser to decide which selector over rides another. For example a rule set with .myClass as a selector is not as strong as div.myClass, so the rules in div.myClass win. The way it's calculated is pretty complex, and a bit beyond the scope of this document. Instead I'll provide a few rules of thumb that will help you design selectors that are easy to over ride or easy to make strong.

Order of importance:

tag < class < id

So if you have the following HTML:

<p class="myClass" id="myID">Hello World</p>

And the following CSS:

	p { color: red }
	.myClass { color: blue }
	#myID { color: green }

The ID would be considered the stronger selector and the font color would be green.

Contextual selectors can increase the weight of a selector. The stronger the match of the contextual selector the stronger it's weight.

	#myID { color: green }
	p#myID { color: red }
	div p#myID { color: blue }
	body div p#myID { color: purple }

In the example above the most specific contextual selector wins, so the color would be purple.

The importance of Order

When all else is equal, the latter selector wins. So in the this example...

.myClass { color: gray }
.myClass { color: blue }

Because blue came after gray, and the selectors are the same, the font color would be blue.

Contextual Selectors

Contextual selectors match based on the relevance of the selector. Take the following examples.

<div class="group">
	<h4>First h4</h4>
</div>
<h4>Second h4</h4>

.group h4 { color: blue }
h4 { color: green }

In this example the first h4 would be blue and the second h4 would be green. Because the contextual selector ".group h4" is more specific it takes precedence over the selector "h4" in the first h4. Because the second selector isn't in the an element with the group class, the rule set with the selector ".group h4" doesn't apply to it and it goes with the next strongest match which is simply "h4" in this case

The Cascade

Multiple rule sets may match an HTML element. The rules cascade down combining and over riding rules on the element. For example... 

<div class="group">
	<h4>First h4</h4>
</div>
<h4>Second h4</h4>

.group h4 { 
	color: blue;
}

h4 { 
	margin: 10px;
	font-size: 16px;
	color: green;
}

On the first h4 both the selector "h4" and the selector ".group h4" match the HTML tag. What happens here is the first h4 tag first gets the rules for "h4" applied to it, and then any changes found in ".group h4" will be applied to it. So the full set of rules for the first h4 would look like... 

{ 
	margin: 10px;
	font-size: 16px;
	color: blue;
}

Notice it gets the margin and font-size from the "h4" rule set and the color blue from the ".group h4" rule set.