Professor Lizmi

CSS: Text Formatting and Selectors

Font Properties

Font-family
- body { font-family: Verdana, "Trebuchet MS", sans-serif; }
- Exercise 1: Font-family
  - Open this document and save it to your desktop as menu_summer.html.
  - Add the code to include an embedded style sheet.
  - Make the font-family for the whole document Verdana, sans-serif
Font-size
- body { font-size: 1.5em; }
- other options: stick with relative measures!
  - em
  - px
  - %
  - or keywords; xx-small, x-small, small, medium, large, x-large, xx-large
- Exercise 2: Font-size
  - Change the font size of the document to small.
  - And the h1 to 1.5ems.
Font-weight

body { font-weight: bold; }
other options:
- normal
- bold
- bolder
- lighter
- inherit
Exercise 3: Font-weight
- Make each food item on the menu bold. What selector do we need to use?

Font-style
- body { font-style: italic; }
- other options
  - normal
  - italic
  - oblique
  - inherit
- Exercise 4: Font-style
  - Make each strong element italic.
Font-variant
- body { font-variant: small-caps; }
- other options
  - normal
  - small-caps
  - inherit
- Exercise 5: Font-variant
  - Make the h1 all small caps.
Font shorthand
- format: { font: style weight variant size/line-height font-family; }
- the order of the last two are important!
- font size and family must be defined at a minimum
- example:
  - body { font: bold 1.75em/2 sans-serif; }
- Exercise 6: Font
Font color
- h1 { color: red; }

More Selectors

We already know about
- single elements like p {color: navy; }
- grouped elements like p, h1, ul {color: navy; }
There's more!
- Contextual/Descendant - parent/child
- ID - unique identifier, best for single instance
- Class - for selecting groups of elements
Descendant
- a space delimited list of parent/child selectors
- examples
  - li em { color: navy; }
  - h1 em, h2 em, h3 em { color: navy; }
  - ol a em { color: navy; }
Class - for grouping elements
- uses the class property of elements, like this <p class="intro"> </p>
- multiple elements can share a class name and an element can belong to multiple classes.
- class names have a period in the selector
- for example
  - p.intro { color: navy; } selects all paragraph elements marked with the intro class
  - .intro { color: navy; } selects everything marked with the intro class
Id - for uniquely identfying an element
- uses the id property of elements, like this <div id="special"></div>
- id names use the # sign in the selector
- for example

Selector Importance

General rule: The more specific the selector, the more importance/weight it has.

Selector Summary
Selector Type	Example	Importance	Selects
Individual	p, h1 { color: gray; }	least	all instances of an element
Contextual/Descendant	h1 em, h2 em {color: navy; }		sub-populations of elements based on a child selector
Class	<p class="intro"></p> p.intro{ color: gray; }		groups of unrelated and/or specific elements base on class value
Id	<p id="intro"></p> #intro {font-style: italic; }	most	specific element base on a unique id value

Exercise 7: Using Specific Selectors

Make all new menu items (marked up as strong) maroon. Just the menu item names should be maroon.
Notice that the document is divided into serveral div tags;
- header
- appetizers
- entrees
Make the header area text teal.
Even tricker! Make the paragraph inside the header section italic.
Make all prices on the menu italic and Georgia
Each label should be bold and small-caps (and a normal style)
Make the warning at the botttom of the page
- text color: red
- font-size: small

More Text Related Properties

line-height
- p {line-height: 2; }
- p {line-height: 2em; }
- p {line-height: 200%; }
indents
- affects only first line of paragraph
- p#1 {text-indent: 2em; }
horizontal alignment
- p.intro {text-align: center; }
- other values
  - left
  - right
  - center
  - justify
underlines and decorations
- #markdown {text-decoration: line-through; }
- other values
  - underline
  - overline
  - line-through
  - blink
capitalization
- #title {text-transform: uppercase; }
- other values
  - none
  - capitalize
  - lowercase
  - uppercase
letter/word spacing
- p.intro {letter-spacing: 1.5em; }
- p.intro {word-spacing: 8px; }

Exercise 8: Text Properties

Change the font for the entire document to Georgia
Increase line height for document to 175%
Delete # header {color: teal;} and h1 {font-variant: small-caps;}
Make h1 text purple and #header p font gray.
Center the header section and all h2 elements plus all paragraphs in the appetizers and entrees section. Like this #header, h2, #appetizers p, #entrees p {text-align: center; }
Make h2 { font: bold 1em Georgia, serif; text-transform: uppercase; letter-spacing: 8px; color: purple; }
Make paragraphs in appetizer and entree sections italic.
Add dt {color: olive;}

Here's what the final formatted menu should look like.

Homework 6: Resume Redo

Create a copy of your resume from homework 2 (hw2.html) and name it hw6.html. Using your newly acquired style sheet skills, style your resume using an external style sheet. Name your style sheet resume.css. Use resume.css to control the look your resume, then add some embedded and inline styling too.

Include each of the following selectors: single, group, and descendant.
Include each of the following generic containers and identifiers: div, span, id, class
Include at least 5 of the following properties:
- letter spacing
- background color
- font color
- font variant
- font size
- centering text
- text transform
Link hw6.html to your homepage using the Homework list on your homepage. Have the clickable text read HW6: CSS Basics - Resume Redo