Page 199 - Webapplication11_C11_Flipbook
P. 199

[attr=value]
                 Denotes  elements  with  an attribute  name of attr whose  value  is represented
                 exactly as value.
                 [attr^=value]
                 Denotes elements with an attribute name of attr whose value is preceded by value.

                 [attr*=value]
                 Denotes elements with an attribute name of attr whose value contains at least one
                 occurrence of value in the string.
                 Examples: Links with "abc" anywhere in the URL will have teal background colour.

                 a[href*="abc"] {
                                      background-color: teal;
                                      }
                 All <a> elements with href attribute matching https://unesco.org will be displayed in italics
                 a[href="https://unesco.org"]

                 {
                        font-style: italic;
                 }
                 Multiple Style Rules
                 For a single element, you may need to set many style rules. As seen in the following example, you can use these rules
                 to combine many properties and their respective values into a single block:

                 p {
                   color: grey;

                   font-size: 14px;
                   font-family: Consolas;
                   text-align: center;
                 }
                 A semicolon separates all of the property and value pairs here (;). You can use a single line or many lines to keep them.
                 We keep them on different lines for easier reading.

                 Grouping Selectors

                 All HTML elements with the same style definitions are gathered by the grouping selector. It is preferable to aggregate
                 the selectors in order to reduce the amount of code. To group selectors, use a comma to separate them.

                 Example:
                 h1, h2, p {

                                             text-align: center;
                 font-style: italic;
                        color: red;
                 }
                 All the elements in the selector will have the corresponding rules applied to them.






                                                                                Website Building Using HTML and CSS  197
   194   195   196   197   198   199   200   201   202   203   204