A declaration block is where we define the styles that will be applied. The block is contained within braces ({ and }). You must use the braces to surround your rules.
p {
}Rules
Rules in CSS are made up of two parts. The property, which is the attribute which will be changed, and its value.
Depending upon the property, the value could be numeric, numeric with a unit measurement, hexadecimal value, function, or string. The property is always on the left, and separated from the value with a colon (:).
There are lots of properties that can be controlled by CSS. The most common ones are:
- fonts (font-family, font-size, font-weight)
- border
- size (height and width)
- spacing (padding and margins)
- colors (foreground and background)
- justification and positioning (floats and text-alignment)
A numeric measurement almost always needs a unit of measurement with no spaces between the two values.
A hexadecimal value will have a hashmark (#) as a prefix, and be followed by 6 hexadecimal numbers to represent an RGB color. If all three color pairs for the channels are identical, you only have to list three hex values. Eg. #ffffff could be written as #fff, or #aabbcc could be #abc.
.warning {
color: #f00;
}String values are based on a predefined set of values which are defined by the governing board and browsers. Unlike with programming languages, you do not need to add quotes around a string.
After each rule, a semicolon (;) follows. This lets the browser know that it can have a new rule, since we are not required to add whitespace to our CSS. The very last rule doesn’t require a semicolon at the end, however, it’s good practice to add it, to prevent there from being a problem if you add a rule to the declaration block, and forget to go to the previous rule and add the semicolon.
.warning {
color: #f00;
font-size: 1.2rem;
font-weight: bold;
}While CSS doesn’t require any white space between rules, a common methodology is to have each rule on it’s own line. This makes it easier to read, and thus maintain. The braces for the declaration block typically are on their own lines as well, for the same reason.
CSS Declaration Blocks was originally found on Access 2 Learn
