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

