DF2254 Fundamentals of Web Design :: Art Institute

Week 8: CSS

Design Principles

Design principles in depth.

Alignment

  • Everything should align with something else along at least one edge
  • Avoid center alignment
  • Don't mix alignments (use a grid)
  • Margins and padding add white space
  • White space is your friend

GOOD example: http://www.100candles.com/
POOR example: http://www.maximumscented.com

Proximity

  • Things that go with each other should be closer to each other than things that don't go together
  • Spacing has meaning; it implies relationships
  • Reinforce those connections with ALIGNMENT for a double-whammy
  • Provide WHITE SPACE to give the eye some rest

GOOD example: http://www.zappos.com/
POOR example: http://www.eviltattoo.com/

Repetition

  • Repeat some aspect(s) of the design
  • Creates UNITY (the sense that all the parts create a unified whole)
  • Helps identify navigation, heading levels, and overall organization
  • Aids usability (visitors don't need to learn new structure from page to page)
  • Requires design guidelines and discipline

GOOD example: http://werkpress.com/
POOR example: http://www.cars-on-line.com/

Contrast

  • If two things are different, make them VERY different
  • Contrast can be created with color, size, scale, texture, value, motion, dimension
  • Creates a focal point – helps define what is most important
  • If you emphasize everything, you emphasize nothing

GOOD example: http://www.nurun.com/
POOR example: http://www.carolhouse.com/

Spelling and Grammar

Bad spelling and grammar can destroy all you've achieved with good design.

Using CSS for Layout

If we use <div>s in our HTML to identify page content areas (such as header, nav, main, and footer,) and don't adjust their positions in the CSS, they will go straight down the page in the order in which they appear in the code. Today, we will look at how to use CSS to reposition the <div>s exactly where we want them—and they can even overlap each other.

The Box Model

  • All elements on a page, from a div to a paragraph to a list item, is considered by the browser to be a box.
  • This concept is known as the box model.
  • Even inline elements such as anchors and images are seen as boxes.
  • Each box can have certain attributes:
    • a position
    • width
    • height
    • a border
    • padding
    • margins
    • z-index (the position along the z axis--more on this later)
  • Between the box and the border is the padding.
  • Between the border and the next element on the page is the margin.

the box model

The CSS width assigned to the box is added to the border thickness (times 2), the padding (times 2), and the margin (times 2) when calculating the total width of the element.

For example, the following CSS makes a box 332px wide. It has a 1px border (2px total), 20px of padding (40px total), and 20px of margin (40px total). Add that 82 pixels to the box's width of 250px, and you get 332 pixels.

#panel {
width: 250px;
border: solid 1px;
margin: 20px;
padding: 20px;
}

Site Setup

  1. Create a site folder on your desktop or flash drive and name it css-layout.
  2. Create two new plain text documents in TextEdit or Notepad, and name them basic.html and styles.css. Save them in your site folder.
  3. Type in the HTML5 skeleton (reference) into your basic.html file. Put <!DOCTYPE HTML> at the very top, and put <meta charset="utf-8"> inside the element.
  4. Attach the stylesheet to the HTML file by putting <link type="text/css" rel="stylesheet" href="styles.css" /> inside the element of basic.html.

Build Your Boxes

  1. Within the element of your basic.html page, create two div elements:

<body>
<div id="">
</div>
<div id="">
</div>
</body>

  1. Give the first div an ID of box1 and the second div an ID of box2.

<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>

  1. Write something inside of each div.

<body>
<div id="box1">I am a beautiful box. Just look at this color.
</div>
<div id="box2">I am a sturdy box with nice straight sides.
</div>
</body>

  1. Change the page <title> to Basic Boxes and save the file.
  2. Test the page in a browser. This is what the boxes look like without any styling.

Style Your Boxes

  1. Type the following rules into your styles.css file and save it:

#box1 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
}
#box2 {
background-color: #F66; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
}

  1. Test the HTML page in the browser again. Study how each line of CSS affects the presentation of the boxes on the page.

z-index

The z-index CSS property identifies how "close" or "far away" a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful to create divs which overlap. The lower the z-index (e.g. z-index: 1;), the "further back" a div is. The higher it is (e.g. z-index: 99;), the more "forward" it is. This technique requires that you set the position to relative (we'll look at position in greater detail later.)

  1. Save basic.html as z-index.html in your site folder, and give the new page a <title> of Z-Index.
  2. Change the box IDs to numbers 3 and 4 and save the file:

<body>
<div id="box3">I am a beautiful box. Just look at this color.
</div>
<div id="box4">I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box3 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
z-index: 1;
position: relative;
}
#box4 {
background-color: #F66; /* you may change this color */
padding: 10px;
height: 200px;
width: 200px;
position: relative;
z-index: 2;
margin-top: -175px;
margin-left: 180px;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Now try switching the z-index value of the two boxes. Save the file and test the HTML page again.

#box3 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
z-index: 2;
position: relative;
}
#box4 {
background-color: #F66; /* you may change this color */
padding: 10px;
height: 200px;
width: 200px;
position: relative;
z-index: 1;

margin-top: -175px;
margin-left: 180px;
}

position

The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.

  • Static divs get plunked down right where they are in the flow of the HTML.
  • Relative divs are like static divs but can be moved relative to the previous content.
  • Absolute divs get pulled out of the HTML flow and act independently of all other divs.
  • Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.

We've looked at an application of the relative position above. Let's go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.

  1. Save z-index.html as absolute.html in your site folder, and give the new page a <title> of Absolute Position.
  2. Change the box IDs to numbers 5 and 6 and save the file:

<body>
<div id="box5">I am a beautiful box. Just look at this color.
</div>
<div id="box6">I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box5 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
position: absolute;
}
#box6 {
background-color: #F66;
margin-top: -25px;
margin-left: 180px;
padding: 10px;
height: 200px;
width: 200px;
position: absolute;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Try changing the margins for #box6 again, save styles.css and test the HTML page again.

float

The float CSS property defines where a div will be positioned within or next to other elements. We have looked at this once or twice before. "Float: left" can be very useful to align divs horizontally rather than vertically. The default value for float is none.

Going back to our simple divs, let's add a float of left to both. It aligns them horizontally if there's room in the browser window:

  1. Save absolute.html as float.html in your site folder, and give the new page a <title> of Float.
  2. Change the box IDs to numbers 7 and 8 and save the file:

<body>
<div id="box7">I am a beautiful box. Just look at this color.
</div>
<div id="box8">I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box7 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box8 {
background-color: #F66;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Try floating both boxes right instead, save styles.css and test the HTML page again.

clear

The clear CSS property prevents floating elements from hanging around to the left or right (or both) of a div. We can do some pretty cool things with clear. The default value is none.

Let's go back to our left-floated divs above in number 3. If we add a green div below it, we can pop it below the first two div using the clear property set to left. Without this clear property, the green div does a really funky overlap with the other two divs.

  1. Save float.html as clear.html in your site folder, and give the new page a <title> of Clear.
  2. Change the box IDs to numbers 9 and 10.
  3. Add a new div below these and give it an ID of 11. Save the file:

<body>
<div id="box9">I am a beautiful box. Just look at this color.
</div>
<div id="box10">I am a sturdy box with nice straight sides.
</div>
<div id="box11">I am a box big enough for two.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box9 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box10 {
background-color: #F66;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box11 {
background-color: #6C6;
margin: 10px;
padding: 10px;
height: 200px;
width: 440px;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Now add the clear property to box11, save the file and test the HTML page again:

#box11 {
background-color: #6C6;
margin: 10px;
padding: 10px;
height: 200px;
width: 440px;
clear: left;
}

  1. Zip up your site folder (css-layout.zip) and turn it in.

This lesson is based on my earlier, more complete tutorial: "Master Your Website Layout with these 6 CSS Properties".

Elements That Are New in HTML5

HTML5 allows us to skip using a bunch of divs with IDs to define the page content areas in our web pages. Instead, we have a host of new tag names to use.

Element Function
<article> Defines an article. There can be multiple articles on the page.
<aside> Defines content aside from the page content, such as a sidebar. There can be multiple asides on the page.
<footer> Defines a footer for a document or section. There can be multiple footers; for example, one for the page, one for the article, and one for the sidebar.
<header> Specifies an introduction, or a group of navigation elements, for a document. There can be multiple headers; for example, one for the page, one for the article, and one for the sidebar.
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels.
<nav> Defines navigation links. There can be multiple navs on the page.
<section> Defines a section in a document which is not a header, footer, article, or aside. There can be multiple sections on the page.

Do we still use <div>? Sure, use it for bits of content you want to style but which aren't really page content blocks, per se.

Example CSS Layout

Using the final layout you did above for the clear property, it's not a big jump to get to a 2-column site layout with a header and footer.

  • Put a <header> above your boxes.
  • Wrap everything inside a wrapper <section>.
  • Swap the three <div>s for <aside>, <article> and <footer>.
  • Create appropriate styles.

Take a look at the code examples below.

Note the use of a "universal selector" (*) to remove the browser defaults for padding and margins around elements. This give us greater spacing control over our page.

The HTML

CSS layout - the HTML

The CSS

CSS layout - the CSS styles

The Result in a Browser

CSS layout - the result in a browser

Lab: CSS Layout

This week in lab, use CSS positioning to arrange the layout of your Final Project home page to match your original wireframe plan. Remember to use an external CSS sheet.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
8 Design Principles Critique Design Principles Critique.doc
CSS Layout css-layout.zip

Assignment Details

Design Principles Critique

Below are listed the four design principles we discussed in class. Create a document in MS Word. For each design principle, give two web addresses: one is a good example of the principle and the other is a poor or non-example of the principle. Describe how the website meets or fails the design principle (be specific!)

Proximity
  • Good example and why
  • Poor example and why
Alignment
  • Good example and why
  • Poor example and why
Repetition
  • Good example and why
  • Poor example and why
Contrast
  • Good example and why
  • Poor example and why

Using CSS for Layout

Complete the CSS Layout tutorial as demonstrated in class and shown to the left.