TUTORIAL 4: CREATING
PAGE LAYOUT WITH CSS
Session 4.2
Objectives





Set display properties
Create a reset style sheet
Explore fixed, fluid, and elastic layouts
Set the width and height
Float elements in a Web page
The display style

Most page elements are displayed in one of two
ways
 Blocks
occupy a defined rectangular area
within a page
 Inline elements flow within a block
The CSS Box Model
Creating a Reset Style Sheet
/* Display HTML5 structural elements as blocks */
article, aside, figure, figcaption, footer,
hgroup, header, section, nav {
display: block;
}
/* Set the default page element styles */
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.2em;
list-style: none;
}
Creating a Reset Style Sheet


Many designers create a reset style sheet to define
their own default styles
Two steps:
 Step
#1: Display HTML5 structural elements as blocks
 Step #2: Set the default page element styles
Practice – Reset Style Sheet
1.
2.
3.
4.
Download cyclepathology.zip from my website.
Open race.css in Notepad++
Add a style rule to display the header, article, aside, figure,
figcaption, hgroup, section, and nav elements as blocks.
Create a style rule to set the default style for every element
so that every element:
1.
2.
Is displayed in Verdana, Geneva, sans-serif
Has a font size of 100%
Fixed and Fluid Layout
Elastic Layouts


Some designers propose the use of elastic layouts,
in which all measurements are expressed relative to
the default font size using the em unit
If a user or the designer increases the font size, the
width, height, and location of all of the other page
elements, including images, change to match
Setting the width and height

Page width and height

For fixed layout:
width: value;
height: value;

For fluid layout:
min-width: value;
min-height: value;
max-width: value;
max-height: value;
Setting width and height
Example:
body {
width: 95%;
min-width: 900px;
max-width: 1400px;
}

Width and height can also be used to define the
width and height of other elements.
Setting width and height
1.
2.
3.
4.
5.
In the style rule for the page body, set the page width to 98% of the
width of the browser window in a range from 1000 pixels up to 1400
pixels.
Create a style rule for the header element that:
1.
Sets the width to 20% of the page body
2.
Changes the background color to black
For inline images within the header element, set the width to 100% of
the width of the header.
For the hgroup within the article element, set the height to 60 pixels
and indent the text 20 pixels.
For the figure box, create a style rule to set the width of the figure
box to 79%.
Floating Elements
Floating an element takes that element out of the
normal flow of the document and positions it along the
left or right edge of its containing element.
 With CSS float, an element can be pushed to the left or
right, allowing other elements to wrap around it.
float: position;
Where position is left, right, none, or inherit.
 Example:
float: right;

Floating Elements – The Rules



You can't float every element on a Web page.
Any element that follows the floated element will
flow around the floated element on the other side.
If the floated element does not have a pre-defined
width, it will take up as much horizontal space as
required and available regardless of the float =>
you should always define a width on floated
elements.
Floating Elements - Images

Example of a floating image:
 Open




float_image_layout folder
Image with no float property
Image with float to the left
Image with float to the right
Example of multi-column layout:
 Open




multicolumn_layout folder
Layout with no float
Layout with section floating to the left
Layout with section and article floating to the left
Layout with section, article, and aside floating to the left
Floating Elements

Turning Off the Float
clear: position;
Where position is left, right, both, none, or inherit.
Floating Elements
1.
For list items within the horizontal navigation list, add styles to:
1.
2.
Add the following styles to the main section of the page:
1.
2.
3.
Float the main section on the left margin once the left margin has
been clear of previously floated objects
Set the width to 49% of the page body
For the article element, create a style rule to:
1.
2.
4.
Display each list item as a block floated on the left
Float the element on the left with a width of 29%
Set background color to the value (215, 181, 151)
For the figure box, float the figure box on the left once the
margin is clear.