Your SlideShare is downloading. ×
Styling Text With CSS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Styling Text With CSS


Published on

A quick overview of typographical control using CSS.

A quick overview of typographical control using CSS.

Published in: Technology, Art & Photos

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Styling Text With CSS Font & Text Properties
  • 2. Applying Fonts • Single Font Names: body {font-family: Verdana;} • Font Family Keywords: body {font-family: serif;} • Multiple Font Names: body {font-family: Arial, Helvetica,Verdana, san-serif; }
  • 3. Sizing Fonts - Keywords Uses font-size property. Absolute Keywords • Browser computes the font size. • Available keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Ex. body {font-size: small;}
  • 4. Sizing Fonts - Keywords Absolute Keywords • Medium is browser default for font size. • Medium is equivalent to about 16 points. • Scaling factor of 1.5 between each keyword. • Scale remains constant irrespective of the physical size the text is rendered in.
  • 5. Sizing Fonts - Keywords Relative Keywords • Only two possible values: larger and smaller. • Values are relative to the size of parent element. body {font-size: medium;} h1 {font-size: larger;} In the above example, h1's size will increase to the keyword large.
  • 6. Sizing Fonts - Lengths Length Values • Can be either relative or absolute values. • Relative length values are: • em: relative to the font-size of parent element. • ex: relative to height of letter x in specified font. • px: relative to the resolution of the device.
  • 7. Sizing Fonts - Lengths Absolute Length Values • Useful primarily when creating print-version of web document. • Absolute length values are: • inches (in) • centimeters (cm) • millimeters (mm)
  • 8. Sizing Fonts - Percentages • Always used relative to keyword or length value. Ex: body {font-size: small;} h1 {font-size: 150%;}
  • 9. Sizing Fonts - Techniques • Most common method is to combine percentages with either keywords or ems. • Set a base font size with the body tag, then increase/decrease text size as desired using percentages. (Recommended method). • Base font size of small is recommended (corresponds to about 12 px). • Avoid setting font size in pixels as IE does not scale pixels; users will not be able to increase or decrease font size.
  • 10. Font Weight & Style Font Weight • How bold a font is (or not). • Uses font-weight property. • Can be set in numeric values from 100-900. • 100 - very light • 900 - darkest • 400 - normal • Can be set in keywords: • normal (corresponds to 400) • bold (equivalent to 700) • bolder and lighter
  • 11. Font Weight & Style Font Weight Only use number values that correspond directly to known weights: 400 for normal 700 for bold Ex: h1 { font-size: 150%; font-weight: bold; }
  • 12. Font Weight & Style Font Styles • Uses font-style property; alters font face. • Values are: • normal - default and typically does not need to be set. • oblique - only applied when available on user computers. • italic: most commonly used. Ex h2 {font-size: 130%; font-style: italic;}
  • 13. Aligning Text • Uses text-align property. • Values are: • left - browser default. • center - Useful for header, captions, etc. Not recommended for body text. • right: most commonly used. • justify: equal space on left and right sides, but spacing can be awkward. Ex h1 {text-align: center;}
  • 14. Text Decoration • Uses text-decoration property. • Values are: • none - primarily used to remove underlines from links in navigation. • underline: underlines selected text. • overline: places line above selected text. • line-through: Strikethrough. a {text-decoration: none;}
  • 15. Line Height • Uses line-height property. • Sets spacing between lines in a section of text. • Can be set using length, percentage, number, or em. • Default line height for web pages is around 1.2 em. body {line-height: 1.5;}