Lecture 12: Anatomy of a CSS Rule

Here is an example CSS rule. (Click on the CSS button to see the CSS code.)



CSS associates rules to HTML elements. What above CSS rule does is it changes the font color of the HTML paragraph to blue. 

Here is the CSS code again:

p {
   color: blue;
}

The p is called the selector. When we apply the above CSS to an HTML, it will be applied to all HTML p elements.

color: blue; is called the CSS declaration. A CSS deceleration has a property (here color) and a value (here blue). There are predefined properties and values that can be applied to an element. 

In our next example there are three HTML paragraphs and one CSS rule that turns all the paragraphs to green.



By the way, a CSS rule can have several declarations, as shown below:  



A collection of CSS rules is called a style sheet. Here is an example:



By the way, the width deceleration specifies the width of the element (here paragraph). So you can see the paragraphs' width is restricted to 100px. 

Note that though the h1 has no font-size deceleration, it is still shown in a larger font. This is because for h1 to h6 tags, the browser itself adds some style by default.