CIS234A Lecture 5 Instructor Greg D’Andrea

Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style: Italic, normal Font-Weight: bold, normal Word-Spacing: length Letter-Spacing: length Text-Indent: length, % Text-Decoration: underline,overline,blink,line- through Line-Height: length

Measurement Units Absolute Units There are five standard units of measurement: – mm (millimeters) – cm (centimeters) – in (inches) – pt (points): 72 points in an inch – pc (picas): 6 picas in an inch, 12 points in a pica

Measurement Units Relative Units px (pixel) : which represents a single dot on the output device. Depends on the screen resolution. This is the default unit. em : 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Measurement Units ex : one ex is the x-height of a font (x-height is usually about half the font-size) % : a percentage of an element’s default font size.

Measurement Units Descriptive words Seven descriptive words: – xx-small, x-small, small, medium, large, x- large, xx-large

Span and Div The span and div elements are a generic means by which we can add structure to documents. The span element is inline with surrounding text, that is, it does not cause a line-break (similar to a element) Syntax: content The div element is a block-level element and will place its contents on a separate line from surrounding content. (similar to a element) Syntax: content

Span and Div The span and div elements contains no semantic meaning, and should not be overused in the place of other more meaningful elements. Like using: booyaah! Instead of: jolly good yes indeed! This is okay: … … … Div has an added attribute align: – align = { “left” | “right” | “center” | “justify” }

Spacing Elements (Basic) Margin: the space between the edge of the element and the nearest adjacent element – (top, right, bottom, left) – The largest margin of two adjacent elements will be the spacing value Padding: the space between the edge of the content and the edge of the element – (top, right, bottom, left)

Spacing Elements (Basic) Properties: margin: topValue rightValue bottomValue leftValue; – Each value is specified margin: topbottom leftright – Top is mirrored on bottom, right mirrored on left margin: all – All have the same value Explicitly: – margin-top : value – margin-bottom: value – margin-right: value – margin-left: value Example: Padding is the same way: – padding: top right bottom left – padding-left: value – etc…

Background Images Inserting a background image We use the style attribute to set the background image. For example, to set a background image for the whole website: …

Background Images For example, to set a background image for a paragraph: …

Background Image Options The following style: background-repeat :type – is used to control how the browsers tile an image across an element’s background.

Background Image Options type has these four possible values: no-repeat, repeat, repeat-x, repeat-y. no-repeat: the image is not repeated at all repeat: the image is tiled both horizontally and vertically repeat-x: the image is one tiled horizontally across the width of the element repeat-y: the image is one tiled vertically across the height of the element

Background Image Options To control the position of the background image, the following style is used: – background-position: horizontal vertical horizontal’s value can be one of these: a percentage, a length or a keyword (which is one of these three: left, right, center)

Background Image Options vertical’s value can be one of these: a percentage, a length or a keyword (which is one of these three: top, bottom, center) Percentage: – For example, with a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.

Background Image Options Length: A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.

Background Image Options top :Equivalent to '0%' for the vertical position. right: Equivalent to '100%' for the horizontal position. bottom: Equivalent to '100%' for the vertical position. left: Equivalent to '0%' for the horizontal position. center: Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.

Assignment 2 Create a web page that uses the tags that we’ve learned: – Heading tags – Image tag: – Paragraph tag: – Link tag: – Span tag: – Div tag: Then use the style attribute to control the colors, fonts and font styles The assignment is due 11:59pm next Friday