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.
Syntaxproperty-name - property-value;
| property-name | A reserved keyword that defines a property |
| property-value | A 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;
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}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;
}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.
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.
id | to attach unique identifier to the element - unique identifiers for the element (id="id1") |
class | to assign a class to the element - space separated identifiers (eg: class="class1 class2..") |
style | to assign style to an element - sequence of styles (style="font-style:bold") |
title | to assign a tooltip to the element - double quoted string (title="click here") |
lang | to define the language for the content of the element - double quoted language identifier (lang="en") |
dir | to defrine a rendering direction of the content for the element- "ltr" (left to right), "rtl" (for right to left) |
