Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Authoring    Topic 17 –Font Family in CSS
ObjectivesStudents should able to:1   Explain the font families in CSS.2   Explain the CSS Box Model3   Explain the proper...
Font Family in CSSThe most common way that Cascading StyleSheets are used is to change the font of aWeb page or site.CSS r...
Font Family in CSSEach category has many different typefacesthat are a part of the family.
Types of FontSans-serif fonts should be the basis of yourWeb content. They are easy to read onlineand there are many that ...
Types of FontMonospace fonts should be used whenthe spacing of the content is important -such as with pre-formatted text.A...
Types of FontScript fonts are best used as signatures orother locations where the look of cursivehandwriting is desired.Fa...
Font Style PropertyDefine the typeface using the font-familystyle property.Some possible style listings:- sans-serif body ...
Box ModelMargins, padding and borders (see nextpage) are all part of whats known as theBox Model.The Box Model works like ...
Box ModelIt can be visually represented like this:You do not have to use all of these, but itcan be helpful to remember th...
Text AlignThe CSS text-align property is used foraligning elements left, right, center etc.Syntax : text-align: <value>Exa...
Text Align<style type="text/css">div { text-align: right;}</style><div>This div has been aligned using thecss text-align p...
Text PositionThe CSS positioning properties allow you toposition an element.Elements can be positioned using the top,botto...
Static PositionStatic PositioningHTML elements are positioned static bydefault. A static positioned element is alwaysposit...
Fixed PositionFixed PositioningAn element with fixed position is positionedrelative to the browser window.It will not move...
Relative PositionRelative PositioningA relative positioned element is positionedrelative to its normal position.
Absolute PositionAbsolute PositioningAn absolute position element is positionedrelative to the first parent element that h...
Format TableIn the example below, the table is named astable1..table1 {width:200px;        margin:auto;        font-size:1...
Format TableFormatting each TD cell in the table using abold blue colored font and applied a borderto each cell and text c...
Add Background to TableAdd the following to the appropriate class:background:#ccccff;.table1 td { background:#ccccff;     ...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Web topic 15 2 basic css layout
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Web topic 17 font family in css

Download to read offline

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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; }

Views

Total views

1,030

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×