Introduction to CSS: Part Deux
-
Upload
larry-king -
Category
Technology
-
view
840 -
download
1
description
Transcript of Introduction to CSS: Part Deux
![Page 1: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/1.jpg)
Cascading Style Sheets
Taking control of you web pagesPart Deux
![Page 2: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/2.jpg)
What we will learn today
Pseudo classes and elementsBlock elements vs. Inline elementsSpecificity, Inheritance and the CascadeWeb Developers Tool BarThe Box ModelPositioning Elements
![Page 3: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/4.jpg)
Pseudo Classes
:focus --- Selects an element, such as a text field form, that is the current focus
![Page 5: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/6.jpg)
![Page 7: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/8.jpg)
Style Precedence
InheritanceCascadeSpecificity
![Page 9: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/9.jpg)
Inheritance
<body font-family: verdana, helvetica, sans-serif; color: blue; font-size 100%;}
![Page 10: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/10.jpg)
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.
![Page 11: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/11.jpg)
Sources of styles
Browser style sheetUser style sheetAuthor styles
![Page 12: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/12.jpg)
Simplified Cascade Rules
Rule 1: The more specific a selector is, the more likely that it will take precedence over a less specific selector
![Page 13: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/13.jpg)
Simplified Cascade Rules
Rule 2: Selectors with ID’s win out over selectors with classes, which win out over selectors that are just tags.
![Page 14: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/14.jpg)
Simplified Cascade Rules
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.
![Page 15: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/15.jpg)
Simplified Cascade Rules
Rule 4: Defined styles win over inherited styles regardless of specificity.
![Page 16: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/16.jpg)
Web Developers tool bar
Standards mode vs. quirks modeOutline block level elementsDisplay element informationValidationWindow resize
![Page 17: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/17.jpg)
Box model
Four things make a boxContentPaddingBorderMargin
![Page 18: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/18.jpg)
Box model
![Page 19: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/19.jpg)
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}
![Page 20: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/21.jpg)
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.
![Page 22: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/22.jpg)
Positioning
Position propertydetermines the reference point for the positioning of each element box
div {position: relative;top: 20px;left: 30px;}
![Page 23: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/23.jpg)
Positioning
Static PositioningEach element is laid out one after another separated only by margins, padding, etc.Default setting for block level elements
![Page 24: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/24.jpg)
Positioning
Relative PositioningElements is positioned relative to where it would be in the static layoutThe space it originally occupied is retained
![Page 25: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/25.jpg)
Positioning
Absolute PositioningElement is taken out of the flow of the documentPosition relative to the first ancestor element that is also absolutely positioned.
![Page 26: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to CSS: Part Deux](https://reader033.fdocuments.us/reader033/viewer/2022051209/548d3bafb4795927058b47aa/html5/thumbnails/28.jpg)
Floating and Clearing
Clearstops elements from moving up next to the floated element