CSS Tutorial Lesson 1: Introduction

What is Cascading Style Sheet (CSS)? HTML was the earliest mark-up language for the world wide web that presents text and multimedia contents to the Internet users, a mark improvement on the earlier text-only navigators or data distribution systems such as Gopher, FTP and WAIS.
HTML has now evolved into more recent and more powerful HTML5 and CSS(Cascading Style Sheet). CSS has made formatting and presenting web documents easier and more systematic. CSS is a W3C technology that allows webmaster to specify the presentation of elements on a webpage separately from the structure of the documents. The separation of structure from presentation makes creation and maintenance of web pages easier. Instead of formatting a website page by page, CSS allows web developers to create a style for all the pages using an external CSS file. Besides, you can create a unique style for an individual page or a section of a page.
CSS works together with HTML elements using a set of rules to control the look of a webpage such as background colour, font typeface, font-size, line spacing and more . The rule of CSS comprises two parts, the selector part and the declaration part. The selector is an HTML element and the declaration  specify rules to be adhered by the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declarations, each separated by semicolons. A declaration consists of two parts, the property and its value.
The structure of a CSS rule is

   selector { declaration1; declaration2, declaration 3;…}

For example

  p{ font-family: verdana; font-size:12px; line-height:10%;}

A declaration consists of:
 property: value 
For example

font-size: 14 px

Table 1.1 shows some examples of CSS.

Table 1.1 List of CSS  examples

Example	Explanation
p { font-size: 14px; color: blue;}	Indicates that all text in the paragraph must have font size 14px and blue in colour
h1{font-family:arial}	Indicates that the text specified by heading 1 shown be displayed as arial typeface
th{background-color:cyan}	Indicates the header row of the table will display a cyan background
em{text-decoration: underline;font-weight:bold}	Indicates that any text defined by em element is bold and underlined
h2,h3{font-family: verdana, font-weight:bold}	Indicates that text defined by h2 and h3 headings are of verdana typeface and is bold