Mastering CSS

Dissecting a rule set

Let's jump into a CSS file and look at one of the rule sets in the following code block. It's targeting an h2-a level two headline. It's setting a font-size of 26px, a font-style of italic, a color to a shade of red, and a margin-bottom of 10px:

h2 { 
  font-size: 26px; 
  font-style: italic; 
  color: #eb2428; 
  margin-bottom: 10px; 
} 

So nothing too scary here! Let's dissect this a little bit though:

selector { 
  property: value;   property: value;  property: value;
} 

In the preceding code, h2 is the selector. We are selecting an element on the page to target our style rules. The h2 selector could be a p, an li, a div, an a, or any HTML element we want to target. It can also be a class, an ID, or an element attribute, which I'll ...