Syntax and Selectors - CSS3 #1.2

A typical CSS code consists of a series of "rule-sets" for the different elements on your webpage. If you want to select a particular element on your webpage to style, how would you tell the browser? You will use some sort of name to specify them. The name you use to specify or select the element(s) you want to style is called a selector.

The syntax of a rule-set:

p{ 
background: green;
color: black;
}
  • p is the selector. 
  • background and color are the properties that have been changed. Their respective value is specified in the following way: property-name: value; The colon and semicolon are essential.
  • The rules for the selector need to be enclosed within curly braces.

Some essential CSS selectors are:

  1. Element selector
  2. id selector 
  3. class selector

1. Element Selector

This selector is used to select and style all occurrences of a particular element. For eg. if you want to style all three paragraphs in your webpage, you can use p selector to select all the p elements and then define the properties to be changed in the body of the rule-set.

<p></p>
<p id="secondP">
</p>
<p></p>

#secondP{
color: green;
background: red;
}

2. id Selector

If you want to style only one particular paragraph out of the three paragraphs then you would specify the id attribute on the paragraph and use that attribute's value to select and style that particular paragraph.

<p></p>
<p id="secondP">
</p>
<p></p>

#secondP{
color: green;
background: red;
}

3. class Selector

If you want to give a particular style to a group of elements then on each of the elements. you need to specify the class attribute with the same value for every one of them. The value of the class attribute preceded by a dot will be used to select the element.


<p></p>

<p class="redW">

</p>

<p class="redW">

</p>

<p></p>



.redW{

background:red;

color:white;

}