Page 184 - Web Applications (803) Class 11
P. 184

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.15 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;
              }




                182     Touchpad Web Applications-XI
   179   180   181   182   183   184   185   186   187   188   189