Grouping declarations
You can use more than one declaration within a declaration block. Each declaration must be separated with a semicolon ";". For example:
Code:
p { padding: 5px; margin: 1px; }
Or, with whitespace added to aid readability:
Code:
p
{
padding: 5px;
margin: 1px;
}
Shorthand properties
Some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property.
For example, the font-style, font-variant, font-weight, font-size, line-height and font-family properties can be combined into a single font property.
Code:
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}
Code:
h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }
Shorthand properties for margin and padding allow sides to be grouped together. If property values are different for all sides, shorthand can still be used. The order of each value is important. Values are applied in the following order; top, right, bottom and left - clockwise, starting at the top. For example the first rule set below can be shortened:
Code:
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
p { padding: 1em 2em 3em 4em; }
You can use one, two, three and four values within a shorthand declaration. For example, the rule below will apply padding to all sides of a box:
Code:
p { padding: 1em; }
p { padding: 1em 2em; }
p { padding: 1em 2em 3em; }
p { padding: 1em 2em 3em 4em; }
Grouping selectors
Selectors are used to "select" the elements on an HTML page that are affected by rules. When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma. They can also include a wide range of selectors. For example:
Code:
h1, h2, h3, h4 { padding: 1em; }
.highlight p, .highlight ul { margin-left: .5em; }
#main p, #main ul { padding-top: 1em; }
There are two common mistakes that people make when grouping selectors. The first is forgetting to write each selector in full. For example, if you are trying to target two elements within the same containing block, and with the same ID, chances are you will probably want them to be written in the same way. So, this is probably wrong:
Code:
#maincontent p, ul { border-top: 1px solid #ddd; }
The correct group selector would more likely be:
Code:
#maincontent p, #maincontent ul { padding-top: 1em; }
The second common mistake is to end the grouping with a comma. This can cause certain browsers to ignore the rule entirely.
Code:
.highlight p, .highlight ul, { margin-left: .5em; }
CSS Comments
You can insert comments in CSS to explain your code. Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/". Comments can appear before or within rule sets as well as across multiple lines. They can also be used to comment out entire rules or individual declarations. For example:
Code:
/* Comment here */
p
{
margin: 1em; /* Comment here */
padding: 2em;
/* color: white; */
background-color: blue;
}
/*
multi-line
comment here
*/
|
