VirtualMV/CSS/Formatting/Text

From WikiEducator
Jump to: navigation, search



Objectives

  • 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)

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

VmvIcon References.png References

  1. w3schools (2009) CSS text-align Property Retrieved February 26, 2009 from http://www.w3schools.com/CSS/css_text.asp
  2. BAER Urban Alternative Music Magazine(2003) BIG BAER Explains CSS Font-Size. Retrieved August 30, 2009 from http://www.bigbaer.com/css_tutorials/css_font_size.htm

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/Formatting/Text. (2024). In WikiEducator/VirtualMV wiki. Retrieved March 28, 2024, from http:https://wikieducator.org/VirtualMV/CSS/Formatting/Text    (zotero)