Tutorial 3: Designing a Web Page with CSS

Tutorial 3: Designing a Web Page with CSS Session 3.2.

Objectives • Setting the font family • Setting the font size • Working with Web fonts • Setting font faces and sizes • Setting font and text appearances • Aligning text horizontally • Aligning text vertically

Styling Web Page Text: Font Family • What is a font family? • Default font family on your browser • Syntax: font-family: fonts; Where fonts is a font typeface or a list of font typeface • Example: font-family: Arial Black, Georgia , Tahoma;

Styling Web Page Text: Font Size • Syntax: font-size: size; • Font size unit of measurement: • Absolute units: mm, cm, in, pt, pc, px • font-size: 12 pt; • Relative units: em, % • font-size: 2em; • font-size: 200%;

Practice – Font Family and Size • In hs_styles.css, set the default font typeface to Trebuchet MS, Helvetica, and sans-serif • For the caption within the figure box, set the font size to 14 pixels • For the h1 headings nested within the section element, set the font size to 2.5em • For address elements nested within the footer element, use fonts from the list Palatino Linotype, Book Antiqua, Palatino, and serif

Working with Web Fonts • Each browser supports different fonts. • Solution: • Web safe fonts • Disadvantages

Working with Web fonts • Web fonts • Specifications for downloadable fonts are used in the CSS • http://webfonts.fonts.com/ • Still a challenge?

Working with Web fonts • Installing a cross-browser Web font: @font-face { font-family: ‘name'; src: url('eot'); src: local('☺'), url(‘file.woff’) format (‘woff’), url(‘file.ttf') format('truetype'), url(‘file.svg') format('svg'); }

Practice – Web Fonts • For the h1 headings nested within the section element, use the font list containing the CloisterBlack and fantasy fonts.

Setting Font Faces and Sizes • To set kerning (the space between letters), use the following style property: letter-spacing: size; • To set tracking (the space between words), use the following style property: word-spacing: size; • To set leading (the space between lines of text), use the following style property: line-height: size;

Setting Font Faces and Sizes • To set the indentation of the first line of a block of text, use the following style property: text-indent: size;

Setting Font and Text Appearances • To specify the font style, use font-style: type; where type is normal, italic, or oblique. • To specify the font weight, use font-weight: type; where typeis normal, bold, bolder, light, lighter, or a font weight value.

Setting Fonts and Text Appearances • To specify a text decoration, use text-decoration: type; where typeis none, underline, overline, or line-through. • To transform text, use text-transform: type; where typeis capitalize, uppercase, lowercase, or none. • To display a font variant of text, use font-variant: type; where typeis normal or small-caps

Practice – Font Faces and Sizes • For unordered lists within the nav element, set the the line height to 3.5em and indent the text 5 pixels. • For the caption within the figure box, display the text in italic.

Combining All Text Formatting in a Single Style • You can combine most of the text and font styles into a single property using the shortcut font property • font: font-style font-variant font-weight font-size/line-height font-family; • Example: font: italic small-caps bold 2em/24px Helvetica, sans-serif;

Font Trends: Are You Trendy?

Aligning Text Horizontally • Syntax: text-align: alignment; With alignment being left, center, right, or justify • Example: text-align: center;

Aligning Text Vertically • Syntax: vertical-align: alignment; With alignment being baseline, bottom, middle, sub, super, text-bottom, text-top, top • Example: vertical-align: top;

Practice – Aligning • Center the contents of figure boxes. • Center the caption text within the figure box.

Tutorial 3: Designing a Web Page with CSS