CSS: Style Properties for Text,Examples of Style Properties for Text,Contextual Selectors,


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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Join Tizen Group