Styling HTML Elements:

Styling HTML Elements: CSS is helpful in styling the web documents; it styles a document by creating a specific look for the document. We have below elements styled in the manner as shown in the examples below:  

Adding Style to Paragraph Elements:

P{ colour: blue; background-color:yellow;}

In above case, the alphabet ‘p’ stands for the word paragraph. CSS knows that the alphabet p would stand for all paragraphs unless a specific class is assigned to a certain paragraph. We also need to note that the ‘p’ element is not preceded by any dot or hash (‘.’ Or ‘#’) symbol. It is simply because CSS separates the elements from classes and divs.

What if the above paragraph had a class in HTML document? In that case we would add the name of class in addition to marking it as a paragraph i.e. ‘p’. See the example below:

p.grey{background-color:grey;}

This is the easiest way to mark every paragraph with grey background with the addition of a class to a paragraph element.

Styling The Headings:

Though headings have a built in font size but we may colour and tune them to our liking. For instance the below heading style illustration shows:

h1{colour:orange; }

The result of above code would be something like in the below picture:

You may ask questions and seek clarifications usign comment box.