A style sheet is a set of rules. To define a rule you need a selector and a declaration. The selector allows you to choose which elements will use the settings. defined by the declaration.

property-name - property-value;
property-nameA reserved keyword that defines a property
property-valueA valid value for the property

font-size:15px; used to set the size of the text to 15px font-style:italic; used to set the style of the text to italic color:yellow; used to set the color of the text to yellow cursor:move;

Declaration Block

A declaration block is a list of declarations separated by semi-colon(;) and included in a {..}

{font-size:15px; color:red}
{text-decoration:none; cursor: pointer}
";" symbol is optional in a declaration block; Blank spaces can be added before and after of ";" or ":"
Type selectors

To define a rule, use a selector followed by a declaration block. There are different types of css selector which we can apply styles to the html element.

The following example defines a rule for rendering all <h1> element. Here h1 is selector which applies any <h1> in a website.

h1 {
	font-size: 20px;
	font-style: italic;
	color: #000000;
Style Sheets

Many rules can be added to define a style sheet.

h3{ font-style:italic }
div{ color:red; font-size:15pt }
img{ cursor:move }

In this example, the selectors are regular HTML elements.

Universal attributes for HTML elements

HTML elements has several attributes that can be added to almost any HTML elements in included in the <body>..</body> element of a web page.

idto attach unique identifier to the element - unique identifiers for the element (id="id1")
classto assign a class to the element - space separated identifiers (eg: class="class1 class2..")
styleto assign style to an element - sequence of styles (style="font-style:bold")
titleto assign a tooltip to the element - double quoted string (title="click here")
langto define the language for the content of the element - double quoted language identifier (lang="en")
dirto defrine a rendering direction of the content for the element- "ltr" (left to right), "rtl" (for right to left)
Related Tutorial
Follow Us #