Properties
When using CSS, a developer can alter the values stored for properties of an element. The properties that you need to be able to alter are:
- text
- font-family
- font-size
- color
- alignment
- background color
Text properties
The CSS rules shown below all exemplify use of the following text properties:
- font-family
- font-size
- color
- text-align
The table below shows common values for the above properties.
| font-family | font-size | color | text-align |
| Arial | 10px | red | left |
| Calibri | 12px | green | right |
| Times | 14px | black | center |
| Times New Roman | 16px | blue | justify |
| Serif | 18px | white | inherit |
| font-family | Arial |
|---|---|
| font-size | 10px |
| color | red |
| text-align | left |
| font-family | Calibri |
|---|---|
| font-size | 12px |
| color | green |
| text-align | right |
| font-family | Times |
|---|---|
| font-size | 14px |
| color | black |
| text-align | center |
| font-family | Times New Roman |
|---|---|
| font-size | 16px |
| color | blue |
| text-align | justify |
| font-family | Serif |
|---|---|
| font-size | 18px |
| color | white |
| text-align | inherit |
The property values shown above are not exhaustive. The font-size and color properties can both be implemented in numerous ways. In the table shown above, px is used to define the size of the text and the name of the color is used to identify colors.
Background colors
To apply a background color to a page, the following CSS rule could be used.
body {background-color:ivory;}This CSS rule would apply an ivory colored background to the page or pages in question.
If part of an external CSS file, the background color could be applied to all pages linking to the file. If used as part of an internal style, the background color of that particular webpage would be ivory.
Background colors can be applied to a range of elements, not only the body element. This means that it is possible to change the background of a particular paragraph or section on a page without changing the background of the entire page.
