Stacked Layouts

Block Elements

Block elements are the “building blocks” of our website.

Block elements are used for layout, and can contain other elements.

Header HTML

Our header block will contain the profile pic,
“Grumpy Cat” heading and the first paragraph of text.

In your HTML, on the line before the profile pic:

<header class="page-header">

In your HTML, after the first paragraph:

</header>

Nothing should happen yet!

Header Styles

In your CSS, on a new line,
design a class rule for the header.

.page-header {
  background-color: darkblue;
  color: white;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

The header should have large, centered, bold text.

Info Section HTML

This content block is a section not a header,
so we use the section tag to create this block.

In your HTML, before the second paragraph:

<section class="info-section">

And after the third paragraph:

</section>

Nothing will happen yet, we need a CSS rule!

Info Section Styles

Now we want a box around the other two paragraphs.

In your CSS, on a new line:

.info-section {
  background-color: yellow;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

There should now be a yellow block around two paragraphs.

Gallery Section HTML

Now create the section block around your gallery images.

In your HTML, before the first gallery image:

<section class="gallery-section">

And after the last gallery image:

</section>

Nothing happens, create a CSS rule!

Gallery Section Styles

We can style our gallery section the same way.

In your CSS:

.gallery-section {
  background-color: darkgreen;
  text-align: center;
}

You should now have a dark green section around your gallery images.

Gallery Image Styles

We can also use a trick to style the images inside the
gallery section, without adding a class to every single one.

In your CSS, on a new line:

.gallery-section img {
  border: 5px solid white;
  height: 150px;
}

Your images should be small with white borders.

Element Selectors

Rather than always using classes, we can also choose
to style all HTML elements of the same type.

At the top of your CSS, on a new line:

header,
section {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 130%;
}

All your block should be centered on the page.

Tidy Up

If you haven’t already done it, remove the
background colours we used for planning our layout.

In your CSS:

• Find .page-header and remove the background
• Find .info-section and change background to white
• Find .gallery-section and remove the background

My page looks awesome now!

Grumpy Cat Output

Your own output window should now look like this:

If it doesn’t, check that all your styles are correct!

Stacked Layouts: Complete!

Woohoo! HTML and CSS masters!

Take me to the next chapter!