Formating Text Using CSS


Published on

This is a presentation used in my website design class to discuss the use of CSS in formatting text.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Formating Text Using CSS

  1. 1. Formatting Text <ul><li>Using CSS </li></ul>
  2. 2. Font Properties <ul><li>font-family </li></ul><ul><li>font-size </li></ul><ul><li>font-weight </li></ul><ul><li>font-style </li></ul><ul><li>font-variant </li></ul><ul><li>font </li></ul>
  3. 3. Font Properties Font-Family <ul><li>font-family </li></ul><ul><li>p { font-family: Arial, sans-serif; } </li></ul><ul><li>generic font families - sans-serif, serif, monospace, cursive, fantasy </li></ul>
  4. 4. Font Properties Core Fonts Sans Serif Arial , Arial Black , Trebuchet , Verdana Serif Georgia , Times New Roman Monospace Courier New , Andale Mono Cursive Apple Chancery , Comic Sans , Snell Fantasy Impact , Stencil
  5. 5. <ul><li>font-size </li></ul><ul><li>h1 { font-size: 1.5em;} </li></ul>Font Properties Font-size
  6. 6. Font Properties Font-size <ul><li>pt - points 1/72 inch </li></ul><ul><li>pc - (1 pica = 12 points) </li></ul><ul><li>mm - millimeters </li></ul><ul><li>cm - centimeters </li></ul><ul><li>in - inches </li></ul><ul><li>em – size of M </li></ul><ul><li>ex - height of lowercase “x” </li></ul><ul><li>px - varies with display resolution </li></ul><ul><li>% percentage values </li></ul>Absolute Units Relative Units
  7. 7. Font Properties Font-size <ul><li>body { font-size: 16pt; } </li></ul><ul><li>h1 {font-size: 200%; } </li></ul><ul><li>The font size of the h1 type would be 32 points </li></ul>
  8. 8. Font Properties Font-size <ul><li>xx-small </li></ul><ul><li>x-small </li></ul><ul><li>small </li></ul><ul><li>medium </li></ul>Keywords <ul><li>Large </li></ul><ul><li>x-Large </li></ul><ul><li>xx-Large </li></ul>
  9. 9. Font Properties Font-size <ul><li>There are two relative keywords: Larger and Smaller </li></ul><ul><li><span style=&quot;font-size: larger &quot;> Larger </span> </li></ul><ul><li><span style=&quot;font-size: smaller &quot;> Smaller </span></p> </li></ul><ul><li>Used to shift the size of text relative to the parent element. </li></ul>
  10. 10. <ul><li>font-weight </li></ul><ul><li>h1 { font-weight: bold;} </li></ul>Font Properties Font-weight
  11. 11. <ul><li>font-weight </li></ul><ul><li>Possible values include: normal, bold, bolder, lighter </li></ul><ul><li>Or (not often used) 100, 200, 300, 400, 500, 600 , 700, 800, 900 </li></ul>Font Properties Font-weight
  12. 12. <ul><li>font-style </li></ul><ul><li>h1 { font-style: italic;} </li></ul><ul><li>Possible values are normal, italic, oblique, inherit </li></ul>Font Properties Font-style
  13. 13. <ul><li>font-variant </li></ul><ul><li>h1 { font-variant: small-caps;} </li></ul><ul><li>Possible values are normal, small-caps, inherit </li></ul>Font Properties Font-variant
  14. 14. Font Properties Single rule <ul><li>font: style weight variant size /line-height font-family </li></ul><ul><li>h1 { font: 1em serif;} </li></ul><ul><li>h1 { font: oblique bold small-caps 1.5em/1.8em Georgia, &quot;Times New Roman&quot;, serif ;} </li></ul>
  15. 15. <ul><li>font-color </li></ul><ul><li>h1 { font-color: gray;} </li></ul><ul><li>h1 { font-color: #666666;} </li></ul><ul><li>h1 { font-color: #666;} </li></ul>Font Properties Font-color
  16. 16. Font Properties Descendant, Child and Sibling Selectors Example What it does li em { color: olive;} Selects only <em> tags when they are included in <li> p > em {color: olive;} Selects only <em> tags when their parent is a <p> called a &quot;child selector&quot; h1 + p Targets only <p> tags when they follow an <h1> tag called a &quot;sibling selector&quot;
  17. 17. Font Properties ID Selectors Example What it does <li id=&quot;salelist&quot;>Tshirt<li> Unique ID selector used in a tag. li#salelist { color: red; } When this is added to the style sheet, the text enclosed in this <li> tag would be red. #salelist { color: red; } The selector can be shorted to just this.
  18. 18. Font Properties ID Selectors Example What it does #sidebar li { color: blue; } Unique ID selector defined in the style sheet. Any line item that appears in the element designated as sidebar would be blue.
  19. 19. Font Properties Class Selectors Example What it does <p class=&quot;special&quot;> Class selectors can be used multiple times in a document. p.special { color: orange; } Using this in the style sheet indicates that all paragraphs with the class special would be orange. .special { color: orange; } All tags with the class=&quot;special&quot; selector would be orange.
  20. 20. Font Properties Text Adjustments - Line Height <ul><li>line-height </li></ul><ul><li>p { line-height: 2em;} </li></ul><ul><li>Possible values are number, percentage, normal, inherit </li></ul>
  21. 21. Font Properties Text Adjustments - Indents <ul><li>text-indent </li></ul><ul><li>p { text-indent: 2em;} </li></ul><ul><li>Possible values are percentage, length measurement, inherit </li></ul>
  22. 22. Font Properties Text Adjustments - alignment <ul><li>text-align </li></ul><ul><li>p { text-align: left;} </li></ul><ul><li>Possible values are left, right, center, justify </li></ul>
  23. 23. Font Properties Text Adjustments - decoration <ul><li>text-decoration </li></ul><ul><li>p { text-decoration: underline;} </li></ul><ul><li>Possible values are none, underline, overline, line-through, blink, inherit </li></ul>
  24. 24. Font Properties Text Adjustments - Capitalization <ul><li>text-transform </li></ul><ul><li>p { text-transform: capitalize;} </li></ul><ul><li>Possible values are none, capitalize, lowercase, uppercase, inherit </li></ul>
  25. 25. Font Properties Text Adjustments - Spacing <ul><li>letter-spacing </li></ul><ul><li>p { letter-spacing: 1.2em;} </li></ul><ul><li>Possible values are length measurement, normal, inherit </li></ul>
  26. 26. Font Properties Text Adjustments - Spacing <ul><li>word-spacing </li></ul><ul><li>p { word-spacing: 1.2em;} </li></ul><ul><li>Possible values are length measurement, normal, inherit </li></ul>