Building a page layout using CSS divs
CSS can be used as a layout tool by controlling the placement and formatting of divisions.
For this exercise, we want to approximate the design of Raymond Resources using CSS divisions.
Here's a basic home page for the Raymond Resources site. Note how several of the limitations of the tabled-based HTML approach have been addressed with the use of CSS.
For our class exercises, the images are available from the course download folder.
Three methods for attaching CSS styles to HTML pages
There are three methods for attaching CSS styles to HTML pages: internal, external, and inline.
CSS-styled hyperlinks
CSS can be used to change the appearance of hyperlinks.
Another introductory exercise for using CSS divisions for page layout
In this exercise, a basic layout is developed using CSS divisions.
- Step one: a starting layout which appears blank in a web browser.
- Step two: adding background color allows the divs to be seen in a web browser.
- Step three: tightening up the layout with pixel precision.
- Here are the key HTML elements involved.
- Here is the basic CSS involved.
- Step four: nested divs are a possibility.
- Step five: centering is a complicated task.
These exercises are based on Geoff Blake's Ten Ton Books tutorials. Start the three-page video tutorial right here.
CSS box model
We'll discuss the CSS box model and how it relates to web design.
