Page Layout using CSS

CIS 195 Web Authoring 1: HTML

Contents

Q and A

• Are there any questions about uploading web sites to citstudent?
• Are there any questions about the term project?
• Review due dates on Moodle.

Introduction

This week we will be talking about using CSS for page layout (design), which is different from formating. The difference is that layout involves controlling the position of things on the page rather than just their appearance.

Backgrounds

Backgrounds are colors or images that are in the background of a particular element of your page. If you use body as the selector, then the background will be for the whole body of your page. Using html as the selector will apply the background to the whole page.

CSS background properties

• background-color—sets the color of the background.
• background-image—sets an image to use as the background.
• background-repeat—controls how an image is or isn't repeated.
• background-attachment—controls whether or not the image scrolls with the page.
• background-position—sets the initial position of background images.

Background Images

Set a background image:

xxxxxxxxxx
body {
  background-image: url("sunset.png");
}

Make an image fill the browser viewport:

• background-repeat: no-repeat will stop the image from being tiled.
• background-position:cover will cause the image to fit the width to the viewport, but the top and bottom might be clipped.
• background-position: contain will make the image height fit the height of the containing element.

xxxxxxxxxx
body {
  background-image: url("sunset.png") 
  background-repeat: no-repeat
  background-position: cover;
}

Make an image stretch to fit the body:

xxxxxxxxxx
body {
  background-image: url("sunset.png");
  background-size: 100% 100%; 
}

Center the background image:
(The height of the containing element can be set to determine vertical centering.)

xxxxxxxxxx
body {
  height: 500px;
  background-image: url("sunset.png") 
  background-repeat: no-repeat
  background-position: center;
}

Background shorthand property:

xxxxxxxxxx
body {
  background: orange url("sunset.png") no-repeat left top;
}

Page Design

Fixed Layout

Uses absolute sizes to keep the page at a fixed size.

xxxxxxxxxx
body {
  width: 1000px;
}

Fluid Layout

Uses percentages to allow the page expand or contract to fit the size of the browser.

xxxxxxxxxx
body {
  width: 80%;
}

Float and Clear

Float

The float property is used with block elements to position them side-by-side (instead of one above another) and to make them move as far as they can to either the left of right.

Example:

xxxxxxxxxx
figure {
  float: right;
}

Clear

The clear property is used to cancel the float property and put the element back into the normal flow of the page.

Example:

xxxxxxxxxx
p {
  clear: right;
}

Example: Float Demo

Exercise: CSS Float and Clear properties

Example

• South India Web Site

• Code for South India Web Site

   

References

• CSS Background—W3Schools

• CSS Background Image Size Tutorial—Free Code Camp

• CSS float—W3Schools

   

Web Authoring Lecture Notes by Brian Bird, 2017, updated 2022, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.