CSS Layout

Compulsory Reading

The reading for this topic will begin to show you how to combine the structure of HTML with the presentation rules provided by CSS to style and layout your webpages.

• Learn to Code HTML + CSS - this is a great introduction to combining HTML and CSS to create styled web pages. It is fairly in depth, and some of it will not be needed at this point, but you should be comfortable with all of this within the first few weeks of the course.
• Learn CSS layout - this is a solid introduction to some basic CSS layout techniques. Later on we’ll look at more advanced techniques, but the basic techniques covered in this tutorial will be fine for now.

If the embed above does not work here is a link to the full version of the video

If the embed above does not work here is a link to the full version of the video

Optional Further Reading

• All about Grid systems - don’t confuse this with CSS-Grid, which is a new CSS technology that makes implementing Grids easier. This is about the general design concept of using a Grid to layout content.

Code Examples

There are a set of code examples that accompany this course showing the use of the fundamental HTML tags and CSS styles/rules that we look at. (Right click and open in a new window/tab) if you’re viewing this on Learning Central.

• Positioning
  • 1 [Code: HTML] [Code: CSS] [Demo]
  • 2 [Code: HTML] [Code: CSS] [Demo]
  • 3 [Code: HTML] [Code: CSS] [Demo]
  • 4 [Code: HTML] [Code: CSS] [Demo]
  • 5 [Code: HTML] [Code: CSS] [Demo]
  • 6 [Code: HTML] [Code: CSS] [Demo]
  • 7 [Code: HTML] [Code: CSS] [Demo]
  • 8 [Code: HTML] [Code: CSS] [Demo]
  • 9 [Code: HTML] [Code: CSS] [Demo]
  • 10 [Code: HTML] [Code: CSS] [Demo]
  • 11 [Code: HTML] [Code: CSS] [Demo]
• CSS Sizing - Percents
  • Part 1 [Code: HTML] [Code: CSS] [Demo]
  • Part 2 [Code: HTML] [Code: CSS] [Demo]
• CSS Sizing - VHVW [Code: HTML] [Code: CSS] [Demo]