Page 197 - Webapplication11_C11_Flipbook
P. 197
Order in Cascading Style Sheets
When an HTML element has multiple styles provided, which one will be used? The following rules will “cascade” all of
the styles on a page into a new “virtual” style sheet, with number one having the highest priority:
1. Inline style (inside an HTML element)
2. Style sheets for external and internal use (in the head section)
3. Your web browser defaults
As a result, an inline style takes precedence over external and internal styles, as well as browser defaults.
2.18 CSS SELECTOR
A selector and a declaration block make up a CSS rule. The selector identifies the HTML element that needs to be
styled. One or more declarations are separated by semicolons in the declaration block. A colon separates the name of
the CSS property and its value in each declaration.
Semicolons are used to separate several CSS declarations, and curly braces are used to surround declaration blocks.
Example:
Declaration
h1 {color: green; font-size: 14px;}
Selector Property Value Property Value
Types of Selectors
CSS selectors are used to “find” (or choose) the HTML elements to style. CSS selectors are divided into various categories
which are as follows:
Element Selector
The element selector uses the element name to identify HTML elements.
Here, all <p> elements on the page will be left-aligned, with blue text colour:
p {
text-align: left;
color: blue;
}
ID Selector
The id selector uses an HTML element’s id attribute to choose a specific element. As each element’s id is unique within
a page, the id selector is used to pick just one! Write a hash (#) character followed by the element’s id to choose an
element with a specified id.
Example: The following rule will be applied to the HTML element with id=para1
#para1 {
text-align: center;
color: green;
}
Website Building Using HTML and CSS 195

