CHS Web Design Track

Materials

• Student Files
• Proficiency Scale
• Guided Notes

Creating a Reset Style Sheet

Reset style sheet

supersedes a browser's default styles and provides a consistent starting point for page design

• The first style rule in a sheet is the display property used to display HTML5 structural elements

Exploring Page Layout Designs

• Web page layouts fall into three categories:

  Fixed layout–

  Size of the page and page elements are fixed, usually using pixels as the unit of measure

  Fluid layout–

  The width of the page elements are set as a percent of the available screen width

  Elastic layout–

  Images and text are always sized in proportion to each other in em units

  Responsive design–

  The layout and design of a page changes in response to the device that is rendering it

Working with Width and Height

The width and height of an element are set using the following properties:

width: value;
height: value;

Block elements can be centered horizontally within their parent element by setting both the left and right margins to auto

body {
margin-left: auto;
margin-right: auto;
}

Vertical Centering

• Centering an element vertically can be accomplished by displaying the parent element as a table cell and setting the vertical-align property to middle
• For example, to vertically center the following h1 heading within the div element:

  <div>
  <h1>Pandaisia Chocololates</h1>
  </div>

• Apply the style rule

  div {
  height: 40px;
  display: table-cell;
  vertical-align: middle;
  }

• Using this style rule, the h1 heading will be vertically centered

Floating Page Content

• Floating an element takes it out of position and places it along the left or right side of its parent element
• To float an element, apply

  float: position;

  where position is none (the default), left to float the object on the left margin or right to float the object on the right margin
• For elements to be placed within a single row, the combined width of the elements cannot exceed the totalwidth of their parent element

Clearing a Float

To ensure that an element is always displayed below floated elements, use

clear: position;

where position is left, right, both, or none

left –

Displays the element only when the left margin is clear of floating objects

right –

Displays the element only when the right margin is clear of floating objects

both –

Displays the element only when both margins are clear of floats

none –

Displays the element alongside any floated objects

Refining a Floated Layout

Content box model –

The width property refers to the width of an element content only

• Additional space include padding or borders

Border box model –

The width property is based on the sum of the content, padding, and border spaces

• Additional space taken up by the padding and border is subtracted from space given to the content

• The layout model can be chosen using

  box-sizing: type;

  where type is content-box (the default), border-box, or inherit (to inherit the property defined for the element's container)

Working with Container Collapse

Container collapse –

An empty container with no content

• Elements in the container are floated Use the after pseudo-element to add a placeholder element after the footer
• The general style rule is

  container::after {
              clear: both;
              content: “”;
              display: table;
              }

  where container is the selector for the element containing floating objects
• The clear property keeps the placeholder element from being inserted until both margins are clear of floats
• The element itself is a web table and contains an empty text string

Session 3.1 Quick Check

1. Provide the style rule to display all hypertext links within a navigation list as block elements with a gray background.
2. Briefly describe the three types of page layouts.
3. Provide a style rule to set the width of the page body to 90% of the browser window ranging from 320 pixels up to 960 pixels.
4. Provide a style rule to horizontally center the header element within the body element. Assume that the header is a direct child of the page body.
5. Provide a style rule to set the width of the aside element to 240 pixels and to float on the right margin of its container.
6. Provide a style rule to display the footer element only after all floated elements have cleared.
7. Your layout has four floated elements in a row but unfortunately the last element has wrapped to a new line. What is the source of the layout mistake?
8. Provide a style rule to change the width property for the header element so that it measures the total width of the header content, padding, and border spaces. Include web extensions for older browsers.
9. Provide a style rule to prevent the header element from collapsing around its floating content.