Web topic 17 font family in css


Published on

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

Web topic 17 font family in css

  1. 1. Web Authoring Topic 17 –Font Family in CSS
  2. 2. ObjectivesStudents should able to:1 Explain the font families in CSS.2 Explain the CSS Box Model3 Explain the properties that make up the box: padding, border, margin, background colour4 Perform CSS positioning and alignment5 Format a table in CSS.
  3. 3. Font Family in CSSThe most common way that Cascading StyleSheets are used is to change the font of aWeb page or site.CSS recognizes five font families: - Serif - Sans-serif - Script - Monospace - Fantasy
  4. 4. Font Family in CSSEach category has many different typefacesthat are a part of the family.
  5. 5. Types of FontSans-serif fonts should be the basis of yourWeb content. They are easy to read onlineand there are many that are common tomost computer operating systems.Serif fonts are best used in print stylesheets because they make printouts mucheasier to read.
  6. 6. Types of FontMonospace fonts should be used whenthe spacing of the content is important -such as with pre-formatted text.Another common use of monospace fontsis to display code or other technicaldetails.
  7. 7. Types of FontScript fonts are best used as signatures orother locations where the look of cursivehandwriting is desired.Fantasy fonts are best used for headingsand artistic text. However, they are theleast common of all the categories.
  8. 8. Font Style PropertyDefine the typeface using the font-familystyle property.Some possible style listings:- sans-serif body copy body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; }- serif body copy for print body { font-family : "Times New Roman”, Times, serif; }
  9. 9. Box ModelMargins, padding and borders (see nextpage) are all part of whats known as theBox Model.The Box Model works like this: in themiddle you have the content area (lets sayan image), surrounding that you have thepadding, surrounding that you have theborder and surrounding that you have themargin.
  10. 10. Box ModelIt can be visually represented like this:You do not have to use all of these, but itcan be helpful to remember that the boxmodel can be applied to every element onthe page.
  11. 11. Text AlignThe CSS text-align property is used foraligning elements left, right, center etc.Syntax : text-align: <value>Example: td { text-align: right }
  12. 12. Text Align<style type="text/css">div { text-align: right;}</style><div>This div has been aligned using thecss text-align property. Try changing thevalues to see the effect.</div>
  13. 13. Text PositionThe CSS positioning properties allow you toposition an element.Elements can be positioned using the top,bottom, left, and right properties.
  14. 14. Static PositionStatic PositioningHTML elements are positioned static bydefault. A static positioned element is alwayspositioned according to the normal flow ofthe page.Static positioned elements are not affectedby the top, bottom, left, and right properties.
  15. 15. Fixed PositionFixed PositioningAn element with fixed position is positionedrelative to the browser window.It will not move even if the window isscrolled.
  16. 16. Relative PositionRelative PositioningA relative positioned element is positionedrelative to its normal position.
  17. 17. Absolute PositionAbsolute PositioningAn absolute position element is positionedrelative to the first parent element that has aposition other than static. If no such elementis found, the containing block is <html>.
  18. 18. Format TableIn the example below, the table is named astable1..table1 {width:200px; margin:auto; font-size:12px; border:1px solid #000000; }
  19. 19. Format TableFormatting each TD cell in the table using abold blue colored font and applied a borderto each cell and text centered vertically andleft aligned horizontally..table1 td {font-weight:bold; color:#000099; vertical-align:middle; text-align:left; border:1px solid #000000; }
  20. 20. Add Background to TableAdd the following to the appropriate class:background:#ccccff;.table1 td { background:#ccccff; font-weight:bold; color:#000099; vertical-align:middle; text-align:left; border:1px solid #000000; }