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
   192   193   194   195   196   197   198   199   200   201   202