VirtualMV/CSS/Formatting/Text/Content

Objectives

• To give examples of the style attribute to format text

Text formatting style settings

Reference: (w3c schools, 2009)

• Aligning text {left|right|center|justify}
  • style="text-align: center"
• Background colour
  • style="background-color: #DDFFEE"
• Colour
  • style="color:#0000FF"
• Emphasising text
  • style= "font-weight:bold"
• Fonts/Font family
  • style="font-family: menu,Arial"
• Setting margins
  • style="margin-right:10px"
  • style="margin-left:auto"

Changing the size of text

• Use the relative em setting
  • Example: <p style="font-size:1.5em;">This text is 1.5em</p>
  • 1em keeps the font the same size, 2em doubles, .5 halves. BAER Urban Alternative Music Magazine (2003) describes text size units.
• Avoid setting text sizes to fixed pixel sizes as they will not resize for a user (accessibility issue)

Examples

If we want to change the colour (color?) of text between two tags we can use the color style for example:

<h3 style="color: #FF0000;text-align: center">This heading 3 is in red and centered</h3>
<h4 style="color: #00FF00;font-family: menu,Arial">This heading 4 is in green and in An Arial font</h4>
<p style="color: #0000FF;margin-left:20px">This paragraph is in blue with a 20 pixel left margin</p>

Which would display as

This heading 3 is in red and centered

This heading 4 is in green and in An Arial font

This paragraph is in blue with a 20 pixel left margin