CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font...

CIS234A Lecture 5

Instructor Greg D’Andrea

Font Styles Review

Font-Family: generic family, font familyFont-Size: em, pt, px, %, mm, cm, inFont-Style: Italic, normalFont-Weight: bold, normalWord-Spacing: lengthLetter-Spacing: lengthText-Indent: length, %Text-Decoration: underline,overline,blink,line-

throughLine-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 DivThe 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 <b> element) Syntax:

<span> content </span>• The div element is a block-level element and will place its

contents on a separate line from surrounding content. (similar to a <p> element) Syntax:

<div>content</div>

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:

<span style=“font-weight: bold”>booyaah!</span>Instead of:

<b>jolly good yes indeed!</b>This is okay:

<span id=“date”>06-29-1955</span><p>…<div style=“somestyles”>…</div>…</p>

• 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: <img style=“margin: 10px 15px 20px 25px” src=“blah.jpg” />• 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:<body style=”background-image: url(image.gif”/>…</body>

Background Images • For example, to set a background image for a

paragraph:<p style=”background-image: url(image.gif”/>…</p>

Background Image Options

• The following style:background-repeat :type

– is used to control how the browsers tile an image across an element’s background.


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


• 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)


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.


• 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.


• 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: <img/>– Paragraph tag: <p></p>– Link tag: <a></a>– Span tag: <span> </span>– Div tag: <div> </div>

• Then use the style attribute to control the colors, fonts and font

styles

• The assignment is due 11:59pm next Friday

CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font...

Documents

Transcript of CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font...