8/4/2014

This presentation covers:

Lesson 3:
Introduction to CSS Layout

Working with a CSS reset file

All HTML elements have default margin and padding space. Web
browsers throughout the years have not always rendered this space
consistently. This can cause problems for layout.
A CSS reset file is simply an external style sheet setting the margins
and padding of all of the major HTML elements to zero. There are
often other global changes as well; such as removing the bullet
points from unordered lists.

The fundamentals of creating a two-column fixed-width layout

The role of a CSS reset file and how to use one
Working with HTML divs and CSS IDs
Working with the CSS float property
Working with the CSS clear property
Working with background images
Working with hyperlinks

A brief history of layout

on the web
In the early days of the web, designers and developers often turned
to the <table> element as the primary means of creating page
layouts.
Tables have rows, columns and cells which are convenient for
designing grid style layouts. However, tables were originally intended
for data and ultimately are the wrong tool for the job.
A typical empty page
template using HTML
table elements.

8/4/2014

CSS layouts are

becoming standard
Although table-based layouts have not disappeared, they are being
phased out by CSS layouts which:
offer superior flexibility
easier to maintain code
have better browser support than ever
All page layouts generally fall into two categories:
1. fixed width layouts
2. liquid or flexible layouts

Flexible or liquid layouts

Flexible (also called liquid) layouts do not use fixed widths, and
therefore, are not as dependent on monitor resolution for
appearance.
The content in a flexible layout will reflow and adapt to the width of
the users browser as needed, whereas fixed-width layouts do not.
Creating flexible layouts in CSS is challenging to do well. Beginners
will often master the techniques of fixed-width layouts first.

Fixed width layouts

Fixed-width layouts have page structure that often uses an explicit width
(usually in pixels) for a main container. There is a relationship between
the users screen resolution and the width of the layout. This layout is
960 pixels wide which would work well on a 1200 pixel wide monitor, but
would be cropped on an 800 pixel monitor.

Working with the

HTML <div> element
The HTML <div> element is the most common way to divide up
sections of your page into logical areas.
However the element by itself does nothing.
<div> This is my header </div>
Unlike most other HTML elements (such as paragraphs, lists, etc), the
div element has no visual effect on the page. Typically, you need to add
either a CSS class or ID and then style the div element.
<div class=header> This is my header </div>

8/4/2014

CSS review
We have covered CSS tag styles and CSS class styles. There is a
third category of styles called ID styles.
An ID style is virtually identical to a CSS class style with one major
exception. Whereas a CSS class can be reused throughout a page, a
CSS ID can only be used once per page.

CSS class and ID syntax

The syntax for CSS classes and IDs are as follows:
#header {
background-color:#FFF;
}
A CSS ID style begins with the # character

<div id=header> This is my header </div>

.header {
background-color:#FFF;
}
A CSS class style begins with the . character

The CSS Box Model

CSS is well suited for page layout partially due to its box model.
Every HTML element on a page has a box surrounding it (usually
invisible by default).
Using a combination of the margin, padding and border properties,
you can change the appearance of the box as well as its effect on
other elements on the page.

CSS Borders
Using the CSS border property you can apply borders of various
colors, styles and widths to any element on the page.
border-color, border-style and border-width are the
relevant properties.
You can also apply borders to any (or all) of the four sides of a box.
For layout purposes this can be useful for visually separating
sections of the page from each other.
The default value for a border is solid, but you also have other
choices including dashed and dotted.

8/4/2014

CSS Margins
Within the box model, the space on the outside of the box is the
margin.
CSS margins are always invisible and the background-color of the
box does not apply to the margins.
Margins are typically used to add space between elements on your
page. Typically, margin values are expressed in CSS shorthand.
margin: 5px 10px 0px 20px;
In CSS shorthand you start with the first value (which is the top
margin) and then move clockwise: so the top margin is 5px, the right
margin is 10px, the bottom margin is 0px and the left margin is 20px.

Using the CSS float property

The CSS float property was originally intended to approximate the
style of text wrap often found in print design.

CSS Padding
Whereas CSS margins apply space around the outside of a box,
CSS padding add space to the inside of a box.
Padding is a simple way to add equal amounts of space inside a box.
However, like margins, you can also specify how much space you
want to add for the top, right, bottom and left.
Typically, padding values are expressed in CSS shorthand.
padding: 5px 10px 0px 20px;
One important consideration for padding is that it increases the
effective width of a box.

Using CSS floats for layout

Although never intended as a tool to create columns, the float
property was adopted by designers as the best way to accomplish
this task.
The float property only has three values: none, left and right. There is
no way to float an object to the center.
Floating multiple objects (such as graphics or list items) is one
technique for creating page features such as photo galleries or
navigation bars.

In this example, the float:right declaration has been applied to

the Worldwide Apparel logo above. This has the effect of removing
the image from the standard flow of the page and the text wraps
around it.

8/4/2014

Common layout problems

when using floats

Use the clear property to

avoid layout problems

Because floated elements are removed from the standard flow of

HTML, this can cause unusual behavior if you are not used to the
rules. For example, a floated column can stick out of its parent
container.
If multiple floated objects are placed inside a container with a fixed
width, and the combined width of the floated objects is larger than the
container, one or more of the objects will break to the next available
space.

Use contextual selectors to

target elements

The CSS clear property becomes a useful tool for creating CSS
layouts. The property has three possible values:
clear: left
clear: right
clear: both
Objects that have the clear property applied to them are not allowed
to have floated objects on the specified side. This can be useful for
page elements, such as footers, which you generally do *not* want to
be positioned next to a column.

CSS background images

A common method for improving the appearance of page elements,
such as columns, is to use CSS background images. Do not confuse
these with HTML inline images. CSS background images should
generally be used for decoration only and not for content.

CSS contextual selectors are a convenient way to target specific

elements on a page.
The problem:
h2 {
margin-left: 20px;
}
This rule applies a left margin to all heading 2 elements in a
document. But what if you want a left margin *only* for heading 2
elements within the sidebar? A contextual selector will do just that.
The solution:
# sidebar h2 {
margin-left: 20px;
}

#footer {
backgroundimage:url(images/footer_background.jpg);
}
The background-image property references an image and places it
within the specified style; in this case an ID for the footer.

8/4/2014

Background image options

The default behavior of a background image is to tile both
horizontally and vertically. Although this is occasionally useful for
creating patterns within a container, most often you will want to
override this behavior.
#footer {
backgroundimage:url(images/footer_background.jpg);
background-repeat:no-repeat;

Styling Hyperlinks
The default appearance of hyperlinks is a blue underline (if the link is
unvisited) or a purple underline (if the user has already visited the
link). Many designers prefer modifying this default style to better fit
the appearance of their page. Hyperlinks fit inside a unique category
called pseudo-classes, and styling them requires an understanding of
their behavior.
a:link

This is the default style of links before they have been clicked by the
user.
a:visited

}
A value of no-repeat only displays the image one time. The other
values are repeat-x which will tile the image horizontally, and
repeat-y which will repeat an image vertically. If you are specifically
creating an image designed to be tiled, you will need to use an image
editor such as Photoshop to create this graphic.

An example of a hyperlink style

Pseudo-class styles have a few special properties. For example,
changing the color and removing the underline of your links would be
accomplished like this:
a:link {
color:green;
text-decoration:none;
}
a:visited {
color:green;
text-decoration:none;
}

This is the style of links after they have been clicked by the user.
a:hover

This is the style of links as the user places their cursor over them.
a:active

This is the style of links as a user is pressing down on the link.

Summary
In this presentation you learned:
The fundamentals of creating a two-column fixed-width layout
The role of a CSS reset file and how to use one
How to work with with HTML divs and CSS IDs
How to work with the CSS float property
How to work with the CSS clear property
How to work with background images
How to work with hyperlinks

(Repeat the above rules for a:hover and a:active but change the color
value)