Post on 21-Jan-2016
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.
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: <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