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

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 flexibilityto expand or collapse based on the width ofbrowser 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

• <table>

• <thead>

• <tr>

• <th>Region</th>

• <th>Number of Parks</th>

• <th>States/Territories in Region</th>

• </tr>

• </thead>

• <tfoot>

• <tr>

• <td colspan="3">Total Regions: 7; Total Parks: 482</td>

• </tr>

• </tfoot>

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?

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