1. 6
Layout

2. Learning Outcomes Describe & Apply the CSS Box Model
Configure Float with CSS
Designate Positioning with CSS
Create Column Page Layouts using CSS
Create Navigation Utilizing Lists with CSS
Add Interactivity to Links with CSS Pseudo-classes
Utilize Additional HTML5 Structural Elements

3. Box Model Describes Rectangular Boxes that Contain Content
Each Block-level Element is Displayed as a Box
Each Content Box can have Margins, Borders, & Padding

4. Margin Properties margin: # | %
Shorthand Property Sets All Four Individual Margins

5. Margin Properties
margin-left | margin-right | margin-top | margin-bottom: # | %
Negative margins can be set to achieve special effects

6. Box Sizing box-sizing: content-box | border-box;
Determines How Width and Height of Box Are Calculated
content-box is Default
Does Not Include Width of Padding or Border
border-box Includes Padding and Border Values
* (Universal Selector)
Targets All HTML Elements
* {box-sizing:border-box;}

7. Positioning Properties
position: type position size
type = static | relative | absolute | fixed
position = top | left | bottom | right
size = height | width

8. Positioning Properties
div {position:absolute; left:130px; top:100px;}

9. Positioning Properties
div {position:absolute; left:130px; top:100px; width: 100px;}

10. Positioning Properties
width: # | %
Sets Horizontal Width of a Containing Box
height: # | %
Sets Vertical Height of a Containing Box
float: left | right | none
Sets Position of an Element to Left/Right of Parent Element
clear: none | left | right | both
Controls Flow of Text Around Floated Elements

11. Positioning Properties
float & clear

12. Positioning Properties
overflow: visible | hidden | scroll | auto
Defines Situation Where Content Overflows Allotted Space

13. Positioning Properties
clip: rect(top, right, bottom, left)
Defines Area Through Which Content Can be Viewed

14. Positioning Properties
visibility: visible | hidden
Specifies Whether an Element is Displayed or Hidden
z-index: auto | #
Specifies an Element’s Stacking Level

15. CSS Two-Column Layout

16. Visual Formatting Model
Element Display Type Categories
Inline
Contain Content within Block-level Elements
Do Not Form New Blocks of Content
Block (e.g., Container)
Contain Inline Element Content
Flex (Chapter 7)
Grid
List-item
Creates Surrounding Container and List Item Inline Boxes
Table

17. Visual Formatting Model
display: block | flex | grid | inline | list-item | table | none
Notes
Inline
Height and Width Properties Have No Effect
Block
Starts on a New Line
Takes Up Whole Width
Several Inline and Table Variations
None
Element Is Completely Removed

18. List Navigation Remove List Marker, Underline, Add Padding
Configure List Items for Inline Display
#nav ul { list-style-type: none; }
#nav a { text-decoration: none; padding-right: 10px; }
#nav li { display: inline; } …
<div id="nav"> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>

19. Advanced Selection Attribute Selector Syntax:
Applies to Elements with Specific Attributes
Syntax:
a[href] {color: blue;}
a:hover img[src=“CODLogo.gif"] {visibility:hidden;}

20. Advanced Selection Pseudo-Class Selectors
Select Elements Based on Characteristics Other Than Name
Link Pseudo-Classes
:link
Allow Modification of Style Characteristics for Unvisited Links
:link {color: green;}
:visited
Allow Modification of Style Characteristics for Visited Links
:visited {color: green;}

21. Advanced Selection Pseudo-Class Selectors Dynamic Pseudo-Classes
Apply Styles to an Element Based on User’s Actions
:hover
Applies Style When User Mouses Over Element
:active
Applies Style When User Activates Element
:focus
Applies Style When Element is Accepting User Input

22. Advanced Selection Pseudo-Elements Selectors
Modify Aspects of Document Not Classified by Elements
:first-letter
Apply Style Rules to the First Letter of Any Block-level Element
Initial Capitals
Drop Capitals

23. Advanced Selection
Pseudo-Element Selectors
:first-letter

24. Advanced Selection Pseudo-Element Selectors :first-line
Apply Style Rules to the First Line of Any Block-level Element

25. Advanced Selection Child Selector >
Apply Style Rules to Child Elements of Any Parent
div > blockquote {font-weight: bold;}

26. Advanced Selection First Child :first-child
Apply Style Rules to the First Child Element of a Parent
div > p:first-child {font-weight: bold;}

27. Advanced Selection Adjacent Sibling + Apply Style Rules to
Elements that Share the Same Parent
Are Adjacent in the Code

28. Structural Elements 5 <header>…</header>
Contains Headings of a Page, Section, or Article
<hgroup>…</hgroup>
Contains Two or More Heading Elements
<header>
<hgroup>
<h1>Lighthouse Island Bistro</h1>
<h2>the best coffee on the coast</h2>
</hgroup>
</header>

29. Structural Elements 5 <nav>…</nav>
Contains a Section of Navigation Links
Block Display
<footer>…</footer>
Contains Footer Content
<aside>…</aside>
Contains Sidebar, Note, or Other Tangential Content

30. Structural Elements 5 <section>…</section>
Contains a “Section”, (e.g., a Chapter or Topic)
Block Display
<article>…</article>
Contains an Independent Entry, (e.g., Blog Posting or Comment)
<time>…</time>
Represents Date or Time (e.g., Date Articles or Blogs)
Inline Display

31. Debugging Techniques Use a Validator
Configure Temporary Background Color / Border
Assign to Element to Determine Page Area Issue
Use HTML Comments to Identify Problem Area
Use CSS Comments to Identify Problem Area
Cascade Conflicts