CIS 1310 – HTML & CSS 6 Layout

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Margin Properties  margin: # | % Shorthand Property Sets All Four Individual Margins

CIS 1310 – HTML & CSS Margin Properties  margin-left | margin-right | margin-top | margin- bottom: # | % Negative margins can be set to achieve special effects

CIS 1310 – HTML & CSS Positioning Properties  position: type position size type = static | relative | absolute | fixed position = top | left | bottom | right size = height | width

CIS 1310 – HTML & CSS Positioning Properties  div {position:absolute; left:130px; top:100px;}

CIS 1310 – HTML & CSS Positioning Properties  div {position:absolute; left:130px; top:100px; width: 100px;}

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Positioning Properties  float & clear

CIS 1310 – HTML & CSS Positioning Properties  overflow: visible | hidden | scroll | auto Defines Situation Where Content Overflows Allotted Space

CIS 1310 – HTML & CSS Positioning Properties  clip: rect(top, right, bottom, left) Defines Area Through Which Content Can be Viewed

CIS 1310 – HTML & CSS Positioning Properties  visibility: visible | hidden Specifies Whether an Element is Displayed or Hidden  z-index: auto | # Specifies an Element’s Stacking Level

CIS 1310 – HTML & CSS CSS Two-Column Layout

CIS 1310 – HTML & CSS Visual Formatting Model  Element Display Type Categories Block (e.g., Paragraphs) Contain Inline Boxes that Contain Element Content Flex (Chapter 7) 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 | flex | inline | list-item | none

CIS 1310 – HTML & CSS 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; } … Home Menu Directions Contact

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

CIS 1310 – HTML & CSS 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;}

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Advanced Selection  Pseudo-Element Selectors :first-letter

CIS 1310 – HTML & CSS Advanced Selection  Pseudo-Element Selectors :first-line Apply Style Rules to the First Line of Any Block-level Element

CIS 1310 – HTML & CSS Advanced Selection  Child Selector > Apply Style Rules to Child Elements of Any Parent div > blockquote {font-weight: bold;}

CIS 1310 – HTML & CSS Advanced Selection  First Child :first-child Apply Style Rules to the First Child Element of a Parent div > p:first-child {font-weight: bold;}

CIS 1310 – HTML & CSS Advanced Selection  Adjacent Sibling + Apply Style Rules to Elements that Share the Same Parent Are Adjacent in the Code

CIS 1310 – HTML & CSS Structural Elements 5  … Contains Headings of a Page, Section, or Article  … Contains Two or More Heading Elements Lighthouse Island Bistro the best coffee on the coast

CIS 1310 – HTML & CSS Structural Elements 5  … Contains a Section of Navigation Links Block Display  … Contains Footer Content Block Display  … Contains Sidebar, Note, or Other Tangential Content Block Display

CIS 1310 – HTML & CSS Structural Elements 5  … Contains a “Section”, (e.g., a Chapter or Topic) Block Display  … Contains an Independent Entry, (e.g., Blog Posting or Comment) Block Display  … Represents Date or Time (e.g., Date Articles or Blogs) Inline Display

CIS 1310 – HTML & CSS 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