Neal Stublen

Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using CSS  Incorporate meta content and multimedia

Course Road Map  Create forms  Create advanced styles and page layouts  Optimize for accessibility  Optimize for search engine indexing  Publish a website

Course Prerequisites  Familiarity with basic HTML  Assumption that you have only worked with basic HTML, not a lot of CSS experience (maybe none)

Applying Styles  Styles can be applied to any HTML element Using an attribute on the tag Using the section of a page Using a CSS file (more on this later)

Style Attribute This is red text.

Style Section.important { color: #ff0000 } This is red text.

 What's a box layout?  How do we organize sections of a box layout? position float clear What’s Ahead?

Examine a Web Page  Web pages are typically divided into distinct sections or areas. What are some of these common areas? Header Navigation menus Content Sidebar Footer

ide and Conquer  Content sections are broken down using... tags  Formatting applied to a tag is applied to all elements within the tag  A line break appears at both the start and end of the tag  Styling can be applied to control size and position

Overflow Property  How does the browser display content that extends beyond boundaries? scroll hidden visible auto inherit

What about ? ... tags also group content, but they remain inline (no line breaks)

Practice Activity  Creating Layouts, Activity 1 Use a tag to highlight a date (p.7) Create scrollable div (p.10)

What's a box layout?  A web page built with elements to control size and position  Alternatives: Fluid layouts Table layouts Frames

Box Properties  border  margin spacing between element border and another element  padding spacing between element border and element content  background-color

Different Box Models  Traditional (Netscape 4, IE4/5) padding and border are included in the element width  W3C padding and border are outside the element width  Browser mode can determine model

Position Property  static (default) use position specified by web page  absolute specified coordinates relative to container element  fixed specified coordinates relative to browser window  relative relative to the element’s default position

Z-index Property  Determines overlap order of elements  Only for elements with absolute position

Float Property  Floating an element moves it as far as possible to the right or left  Other elements will wrap around a floated element  left element floats to left  right element floats to right  none (default) element does not float

Clear Property  Prevents an element from floating because an adjacent element was floated  left no floating elements to the left  right no floating elements to the right  both no floating elements to either side  none (default) floating elements anywhere

Float and Clear Interaction  Floating one element implies floating another  Clearing one element does not imply clearing another  Clear takes priority over float

Practice Activity  Creating Layouts, Activity 2 Create header, footer, and container divs (p.17) Apply styles for position and appearance (p.20)

Practice Activity  Creating Layouts, Activity 3 Create two content columns (p.23) Apply styles for column position and appearance (p.26)

Practice Activity  Creating Layouts, Activity 4 Create a footer layer (p.29) Apply styles to the footer layer (p.30)

Which style attribute controls the spacing between two elements? A. border B. margin C. padding D. spacing Review

Which style attribute controls the spacing between two elements? A. border B. margin C. padding D. spacing Review

Which style(s) ensure(s) an element is positioned flush against the left margin? A. float: left B. clear: left C. float: none D. clear: both

Review Which style(s) ensure(s) an element is positioned flush against the left margin? A. float: left B. clear: left C. float: none D. clear: both

Review Which style(s) ensure(s) an element is positioned flush against the left margin? A. float: left B. clear: left C. float: none D. clear: both

Review Which selector modifies the style of an element with class="header"? A. header {... } B..header {... } C. #header {... } D. class.header { … }

Review Which selector modifies the style of an element with class="header"? A. header {... } B..header {... } C. #header {... } D. class.header { … }