HTML Styles with CSS

The Cascading Style Sheets or CSS in short provide an easy and effective alternatives to specify various attributes for the HTML tags. By using CSS, we can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).

Setting the style of an HTML element, can also be done with the style attribute. The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value. For example :
<!DOCTYPE html>
<html>
    <body style="background-color:lightgreen;">
       <h1>This is CSS TEST</h1>
       <p>This is a paragraph.</p>
    </body>
</html>
The background-color property will change the background of the HTML page to lightgreen. The output of above code will be :

This is CSS TEST

This is a paragraph.

Similarly the color property defines the text color of an HTML element. Some of the CSS Property are as follows :

  • background-color : Used to define the background color for an HTML element.
  • color : used to define the text color of an html element.
  • font-family : Used to define the font to be used for an HTML element.
  • font-size : Used to define the text size of an HTML element.
  • text-align : Used to define the horizontal text alignment of an HTML element.

Example :
<!DOCTYPE html>
<html>
    <body style="font-family:vardana;text-align: center;">
      <h1 style="color: red;">This is CSS TEST</h1>
      <p style="background-color: blue;color: white;">This is a paragraph.</p>
    </body>
</html>
Output :

This is CSS TEST

This is a paragraph.

For more detailed explanation about CSS, please check-out our CSS tutorial.

Next Topic :