CIS234A Lecture 6 Instructor Greg D’Andrea

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

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)

Background Images background-image: url(‘the/URL/of/my/image’) background-repeat: {no-repeat | repeat | repeat-x | repeat-y } background-attachment: { scroll | fixed } background-position: horizontal vertical – Horizontal can be: { length | percentage | left | center | right } – Vertical can be: { length | percentage | top | center | bottom }

Border Border properties affect the style, width and color of the element border – Border-style: { solid | double | dashed | dotted | groove | ridge | inset | outset } – Border-width: { px | thin | medium | thick } – Border-color: usual color values Syntax: – …

Float The float property allows elements to be pushed left or right, enabling other elements to wrap around. Syntax: –

Clear The clear property prevents an element following a floated element from wrapping. – Left: prevents floating elements to the left of the element – Right: prevents floating elements to the right of the element – Both: prevents floating elements on both sides – None: allows floating elements on both sides Syntax: – …

Lab Time