This lesson covers some ways of using shorthand in our stylesheets. This will be an easy lesson and is mostly for reference for now, but you can start using it right away.
We already know that we can use more than one style statement in a tag and more than one style declaration for an element.
We already know that we can have more than one declaration for the same element, so we can use:
body { background-color: #000000 }
body { color: #ffffff; }
We have also learned how to combine 2 declarations for one element by separating them with a semi-colon:
body { background-color: #000000; color: #ffffff; }
But what if we have a whole bunch of properties for one element? If we keep adding properties to one element, the code gets hard to read and more importantly, it becomes hard to edit. So standard code practice is to place each property for the same element on a separate line.
The standard form is:
selector {
property: value;
property: value;
property: value;
property: value;
}
So our CSS body element so far would look like:
body {
background-color: #000000;
color: #ffffff;
}
This is the standard format for all scripting languages. Again, the advantages of putting each declaration on a separate line is that it is easy to read and it is easy to edit.
Notice that there is a colon at the end of the last declaration. It is optional, but it's a good idea for two reasons:Now let's say that we have a stylesheet that uses the same style statement for more than one element (tag):
element1 { propertyA: valueA; }
element2 { propertyA: valueA; }
The style statement is exactly the same for both elements. We can apply this statement to multiple elements in a single declaration by separating the elements with a comma:
element1, element2 { propertyA: valueA; }
Here's an example that assigns the same color to some headers.
h1 { color: #ffffcc; }
h2 { color: #ffffcc; }
h3 { color: #ffffcc; }
Since they all have the same style, the headers can be combined in one declaration:
h1, h2, h3 { color: #ffffcc; }
Finally, you can apply more than one style to more than element in one declaration. This example from my own stylesheet applys 2 styles, color and font-weight, to all of my headers at once:
h1, h2, h3, h4, h5, h6 {
color: #ffffcc;
font-weight: normal;
}
So we see that CSS stylesheets allow a lot of flexibility.
Our next lesson will be on CSS links.
Happy coding!
Gnubee
