From WikiEducator
< VirtualMV‎ | CSS‎ | Formatting‎ | Text
Jump to: navigation, search


  • To give examples of the style attribute to format text

Text formatting style settings

Reference: (w3c schools, 2009)[1]

  • 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)[2] describes text size units.
  • Avoid setting text sizes to fixed pixel sizes as they will not resize for a user (accessibility issue)


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

Cite error: <ref> tags exist, but no <references/> tag was found