CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables. -Replace bullets on a list. -Control indentation of lists.

Review Definition Block element: –Has a space above and below it on the page

Add Margins to Elements on a Page margin

What the Margin Does Defines area outside the box Separates elements from one another on the page

Here’s Someone Who is Annoyed About a Margin

How to Set Margins Margin-top, margin-bottom, Margin-left, and margin right Set margins the same as padding. Use any unit, but px most common Always provide unit of measurement except when setting for “0”

Margins and Paragraphs With vertical margins, they will collapse into each other (see p. 305) With horizontal, the distance between two paragraphs is: –Top margin of lower paragraph –Bottom margin of upper paragraph If you are trying to eliminate space, you must work with both. Solution is to set to 0

Set Width & Height of Elements

By default, most block elements are set to a width of 100% of their parent element –An element that is the direct child of the body will have a width of 100% of the body –It will stretch across the browser window Table cells are set to a width that is a calculation of the minimum width needed to display cell content and the width needed to make up its part of the width of the table’s row

CSS to the Rescue Width property allows designers to override the default setting and specify a width to be used by the element All valid units of measurement allowed Most often: –Px used to set exact widths –Percentages to allow the element flexibility to expand or collapse based on the width of browser window

Caution on Setting Height Element heights are usually as big as needed to fit contents CSS has height property to offer more control Why: –If you use percentage for the width, the height of text will vary depending on browser’s width –Setting height in this case can result in a large empty space at bottom of element’s block (on some browsers) –Designers often avoid setting height

Style Links Concept of pseudo-, as in pseudo-class and pseudo-elements What is pseudo-class? –A CSS special selector that exists for styling links in a certain order of state –That states are: –link, visited, hover, active

States Defined Link when first visited Visited when link has already been clicked Hover when mouse is over it Active when it is being clicked

Syntax for Using Pseudo-elements a:link { font-weight: bold; color: #5e7630; text-decoration: none; padding-left: 3px; padding-right: 3px; }

Syntax for Visited a:visited { font-weight: bold; color: #5e7630; text-decoration: none; padding-left: 3px; padding-right: 3px;

Syntax for Hover a:hover { color: #000; background-color: #5e7630; text-decoration: underline ; }

Syntax for Active a:active { background-color: #fff; }

Text Decoration none underline overline line-through

Text Decoration, cont. None hides the underline Underline brings it back

Style Tables

Inheritance Every table is made up of: –table –tr –td

Nesting & Inheritance Tr has to be nested within table: –Therefore all properties that apply to former apply to latter Same applies to td but it inherits from table and tr Add in thead, tfoot, tbody Region Number of Parks States/Territories in Region Total Regions: 7; Total Parks: 482

Setting Borders Special effect with border –Set to 50 px –Set color to blue for top and bottom –Set color to red for left and right

Replace Bullets on List

CSS List Styling Properties List-style-type allows change to default appearance of bullet Examples: –None –Disc –Circle –Square –Decimal List-style-image allows for replacement of bullet with image Image must be small or line height will increase Overcome inheritance with list-style- image changed to none

Why Use Ugly Bullets?Bullets

Control Indentation of Lists By default, unordered and ordered lists indent the individual items li is a block element, so indentation can be controlled by setting the padding or margin To achieve consistency across browsers, you must set margin-left and padding-left to the same value (set at ul or ol level, not ea. Ind’l item)

Long List Items & Hanging Indents When the list item is long, to where does it wrap? Annoying if it wraps to the margin Good news: it doesn’t. By default, it wraps to align with the top item, not the bullet or number

Change by… Using list-style-position property Sets to inside Makes the bullet or number an inline element within the list item Since property is inherited from nested list, override it later by setting list-style- position to outside