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

Class Selector
                 The class selector is used to select HTML items that have a specified class property. Write a dot (.) character followed
                 by the class name to select components with a certain class. The defined rule will apply to all components with that
                 class.
                 Example:

                 .center {

                   text-align: center;
                   color: blue;
                 }
                 Universal Selector

                 The asterisk ‘*’ represents the universal selector. All elements are selected when the * selector is used. The * selector
                 can also be used to select all elements that are contained within another element.
                 Example: Selects all elements, and sets their background colour to maroon:

                 * {
                     background-color: maroon;
                 }
                 Descendant Selectors

                 The descendant selector identifies all items that are descendants of a given element. Assume you want to apply a style
                 rule to a specific element only when it is included within another element. The style rule will only apply to the <b>
                 element when it is inside the <ul> tag, as seen in the following example:

                 ul b {
                 color: blue;
                 }
                 Child Selectors

                 CSS child selectors are used to select elements that are children of another element. If a and b are two HTML elements,
                 and b is within a’s starting and ending tags, then b is a child of a. Selectors must be separated using the “>” combinaton
                 when composing child selectors.
                 Example: This rule will render all paragraphs with colour blue and background white if the paragraph is directly defined
                 under the div tag:

                 div > p {
                                 color:blue;
                                 background: white;

                          }
                 Attribute Selector
                 HTML elements that contain specified properties or attribute values can be styled. To select elements with a specific
                 attribute, use the [attribute] selector.

                 Syntax:
                 [attr]
                 Denotes elements with an attribute name of attr.

                                                                            Website Development using HTML and CSS   183
   180   181   182   183   184   185   186   187   188   189   190