• Like
  • Save
Styling Text With CSS
Upcoming SlideShare
Loading in...5

Styling Text With CSS

Uploaded on

A quick overview of typographical control using CSS.

A quick overview of typographical control using CSS.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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;}