STYLE PROPERTIES FOR TEXT
The most common selectors apply to text and the most useful properties are included in the table below:
| Property | Description |
|---|---|
| background | sets the background colour for the text |
| color | sets the colour for the text |
| font-family | sets the font type for the text |
| font-size | sets the size for the font and can be measured in points or a percentage of another tag, or xx-small to xx-large |
| font-style | normal or italic – normal is the default |
| font-weight | extra-light to extra-bold |
| text-align | left, right, center or justify |
| text-indent | indent from margins and is measured as a fixed size or a percentage |
| text-decoration | none, underline, overline, strikethrough |
Note: It is important to know that once you start using a style sheet then every HTML tag element used within a document should be included in the style sheet. Even experienced Web page authors get caught-out when adding new elements to an existing Web page and the tags are not included in the style sheet and the presentation results are not what was expected.
Examples of Style Properties for Text:
| Rule | Presentation |
|---|---|
| h2 {font-family:Arial; font-style:italic; color:blue} |
Heading 2 in blue Arial italicised text |
| p {font-family:Arial; font-weight:bold; color:red} | A paragraph of bold Red text |
| p {background:yellow; font-family:Arial; color:red} | A paragraph of Red text on a yellow background |
| p {font-family:Arial; font-size:large; color:blue} | Large Blue Text |
| em {background:red; color:white; font-style:italic} | Text with emphasised text |
Note: the value setting for the color property can be specified in hexadecimal form. For example, color:#000000 is equivalent to color:black.
Contextual Selectors:
These are strings of two or more simple selectors that let rules apply in certain circumstances. For example, if text that is to be emphasises within a paragraph wants certain decoration but emphasis text within, say, a heading doesn’t. Consider the following:
| Rule | Presentation |
|---|---|
| p em {background:red; color:white; font-style:italic} | |
| Heading with emphasised text |
Heading with emphasised text |
| Paragraph with emphasised text | Text with emphasised text |
Note: the decoration on the emphasised text only when associated with a paragraph tag and not any other tags.
