Mastering CSS Layouts and Positioning Techniques

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. Positioning Properties • position: type position size • type = static | relative | absolute | fixed • position = top | left | bottom | right • size = height | width

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

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

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

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

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

12. Special Box 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

13. Special Box Properties • float & clear

14. Visual Formatting Model • Three Element Display Type Categories • Block (e.g., Paragraphs) • Contain Inline Boxes that Contain Element Content • Inline • Contain Content within the Block-level Elements • Do not Form New Blocks of Content • List-item • Creates Surrounding Container and List-item Inline Boxes • display: block | inline | list-item | none

15. CSS Two-Column Layout

16. 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>

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

18. 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;}

19. 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

20. 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

21. Advanced Selection • Pseudo-Element Selectors • :first-letter

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

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

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

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

26. 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&nbsp;Island&nbsp;Bistro</h1> <h2>the best coffee on the coast</h2> </hgroup> </header>

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

28. 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) • Block Display • <time>…</time> • Represents Date or Time (e.g., Date Articles or Blogs) • Inline Display