introduction to css: part deux

Cascading Style Sheets

Taking control of you web pagesPart Deux

What we will learn today

Pseudo classes and elementsBlock elements vs. Inline elementsSpecificity, Inheritance and the CascadeWeb Developers Tool BarThe Box ModelPositioning Elements

Pseudo Classes

:link --- Targets a link:visited --- Targets a link that has been visited by the user:hover --- Targets a link that is being pointed at by the user:active --- Targets a link that is currently being clicked

Pseudo Classes

:focus --- Selects an element, such as a text field form, that is the current focus

Pseudo Elements

:first-child --- Selects the first-child element:first-letter --- selects first letter inside the indicated element:first-line --- selects the first line inside the indicated element

Block vs. Inline

Inline elements:Do not create a line-break before or after their position in the document.Block level elements:Create a line-break before and after their position in the document.

Style Precedence

InheritanceCascadeSpecificity

Inheritance

<body font-family: verdana, helvetica, sans-serif; color: blue; font-size 100%;}

The Cascade

The browser must decide which of the many possible sources for a particular property for a particular tag is the one to use.

Sources of styles

Browser style sheetUser style sheetAuthor styles

Simplified Cascade Rules

Rule 1: The more specific a selector is, the more likely that it will take precedence over a less specific selector


Rule 2: Selectors with ID’s win out over selectors with classes, which win out over selectors that are just tags.


Rule 3: If the same property for the same tag is defined in more than one location, inline styles win out over embedded styles, which win over style sheet styles.


Rule 4: Defined styles win over inherited styles regardless of specificity.

Web Developers tool bar

Standards mode vs. quirks modeOutline block level elementsDisplay element informationValidationWindow resize

Box model

Four things make a boxContentPaddingBorderMargin

Box model

Margin and Padding

p {padding-left: 20px;}

p { padding: 20px;}p { padding: 20px 10px;}p { padding: 20px 10px 5px 15px;}p { padding: 20px 10px 5px}

Width of a box

Width of a box is equal to the width of the content +the width of the padding +the width of the border

Vertical Margins Collapse

Two or more adjoining vertical margins of block boxes in the normal flow collapse. Vertical margins between a floated box and any other box do not collapse. Margins of absolutely and relatively positioned boxes do not collapse.

Positioning

Position propertydetermines the reference point for the positioning of each element box

div {position: relative;top: 20px;left: 30px;}

Positioning

Static PositioningEach element is laid out one after another separated only by margins, padding, etc.Default setting for block level elements

Positioning

Relative PositioningElements is positioned relative to where it would be in the static layoutThe space it originally occupied is retained

Positioning

Absolute PositioningElement is taken out of the flow of the documentPosition relative to the first ancestor element that is also absolutely positioned.

Positioning

Fixed PositioningElement is taken out of the flow of the documentPosition relative to the view port of your screen, and stays in place when you scrollIDWIMIE

Floating and Clearing

FloatMoves element out of the normal flow of the documentElements that follow will sit next to the floated element if there is room

Floating and Clearing

Clearstops elements from moving up next to the floated element

introduction to css: part deux

Technology