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

Styling Text With CSS

on

  • 4,799 views

A quick overview of typographical control using CSS.

A quick overview of typographical control using CSS.

Statistics

Views

Total Views
4,799
Views on SlideShare
4,789
Embed Views
10

Actions

Likes
10
Downloads
0
Comments
1

2 Embeds 10

http://www.slideshare.net 9
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Styling Text With CSS Styling Text With CSS Presentation Transcript

  • Styling Text With CSS Font & Text Properties
  • 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; }
  • 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;} View slide
  • 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. View slide
  • 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.
  • 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.
  • 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)
  • Sizing Fonts - Percentages • Always used relative to keyword or length value. Ex: body {font-size: small;} h1 {font-size: 150%;}
  • 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.
  • 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
  • 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; }
  • 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;}
  • 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;}
  • 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;}
  • 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;}