CSS Details Cascading Style Sheets

Lesson Overview  In this lesson, you will learn:  To use CSS properties for fonts  Evaluate whether to use pts, px, or em for font size  To use CSS properties to make text bold, italic, and underlined

Deprecated HTML Tags  Do NOT use the following HTML tags for styling. They are deprecated:   Use CSS to define the font, size, and other styles of text.  Use of deprecated HTML tags will result in deductions in your homework scores.

Font Properties PropertyDescriptionExample Values font-family Which font will be usedArial “Times New Roman” font-size How large are the letters12pt 12px 1.5em font-style Enable / disable italic style normal italic font-weight Enable / disable bold style normal bold bolder lighter

font-family  Specifies the font for an element.  If a font name contains a space, it must be quoted.  Supports multiple font names in the preferred order.  If the first font is not supported by the computer, the next is tried  Specify generic fonts at the end  Generic font names: serif, sans-serif, cursive, fantasy, monospace

font-size  Units:  pt (point): number of points. A point is 1/72 of an inch onscreen.  px (pixels): number of pixels on the screen  em (m-size): number of m-widths. 1em is equal to the font’s current size  Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx- large, smaller, larger  Percentage sizes: e.g.:

font-weight, font-style  font-weight: normal, bold, bolder, lighter  font-style: normal, italic

line-height  Possible values:  normal  number: a number that will be multiplied with the current font size to set the line height.  length: a fixed line height in px, pt, cm, etc.  %: a line height in percent of the current font size

list-style-type  Possible values:  none  disc (default), circle, square  decimal: 1,2,3,…  decimal-leading-zero: 01, 02, 03,…  lower-roman: i, ii, iii, iv,v,…  upper-roman  lower-alpha  others

Text Properties PropertyDescriptionExample Values text-align Horizontal alignment of text in an element left center right justify text-decoration Special decoration on the text none underline overline line-through blink line-height Gap between lines of text 2 12pt 120% text-indent Indents first letter of each paragraph 20px 5%

Grouping Styles  A style can select multiple elements separated by commas  The individual elements can also have their own styles Grouping: 3 elements with same color h2 has additional style

Exercise  In your favorites assignment, apply the same color to the,, tags  In your calendar assignment, apply the following styles:  font-family  font-size  font-style  font-weight  In your calendar assignment, apply the following styles:  text-align  line-height  text-decoration  list-style-type  Use CSS rules to format  a Calendar for the  month of November Criteria Table is used to create calendar with 7 columns, each column represents a day (e.g Monday…). Month is displayed Days are displayed 1 st November 2015 is a Sunday All 30 days are correctly displayed (no dates are missing) A days are underlined and B days are bold Holidays (November 11, 26, and 27) have a background color of grey.

Class Assignment  Use CSS rules to format a Calendar for the month of November Criteria Table is used to create calendar with 7 columns, each column represents a day (e.g Monday…). Month is displayed Days are displayed 1 st November 2015 is a Sunday All 30 days are correctly displayed (no dates are missing) A days are underlined and B days are bold Holidays (November 11, 26, and 27) have a background color of grey.