Skip to content

Latest commit

 

History

History
173 lines (118 loc) · 6.12 KB

2.1-page-layout.md

File metadata and controls

173 lines (118 loc) · 6.12 KB

Page layout

Our pages still feel pretty basic– we've changed some of the colours and fonts, but there is a lot more that CSS can do. Let's experiment with the header that appears at the top of your page…

Working on the header

Let's say that you want an image at the top of your site… First you would need to find one. There are a couple of good places to look for images:

Using one of these website search and find an image that matches the theme of your website. Download the image and save it to your website folder with the name banner.jpg.

Head back to your CSS file. We're going to need to add a new selector:

header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Save style.css and refresh the page…

We've already seen background-color… But these new properties also affect the background of an element. They all take in different values too… Experiment with some of these:

background-repeat

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

background-position

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

background-size

  • auto
  • cover
  • contain

This is a good start… but you might have noticed that the image is only as high as the text that is in the box… For some images this might work, for others this is less that ideal. There's a new property we can add to our header called height. Height does what it says it will - it sets the height of an element. Unless you tell it otherwise an element will be as large as the content that is in it, but you can make it larger. Have a look at this example:

header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
}

We've added height: 400px;. When you are measuring something on paper you would use the units of centimeters (cm) or maybe millimeters (mm). With CSS one of the units of measurement we have is pixels (px). Add this in a refresh the page. Try changing this to different values. What works best for your image?

Flexing the boxes…

At the moment you can't see it… but each element is a rectangle. Let's write some CSS to show the boxes on your page. Add to the CSS that controls your header:

  border: 4px solid yellow;

Save and refresh the page. Around your header image you should now have a thick yellow border.

Now, let's add a new selector. What's the first element within our header tag in the HTML?

Write a selector which adds a 4px border in a different colour for that element.

You'll now be able to see a smaller rectangle within your header that wraps tightly around the two headings.

CSS allows us to control where inside the header the hgroup element appears by changing the header display property… Update your header selector to match:

header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Save your CSS and refresh your page; the hgroup should be in the middle of your header.

As with our background styles, justify-content and align-items have different values you can try:

justify-content

  • left
  • right
  • center
  • stretch
  • space-around
  • space-between

align-items

  • start
  • center
  • end
  • stretch

Experiment with the different values for justify-content and align-items. Can you get the hgroup to stick to the bottom left?

What happens when you add those properties to the hgroup selector?

Class in CSS

So far we have been using HTML element names to hook our CSS onto. But that isn't the only way we select something with CSS. We can use a class, a class is an attribute you can add to a tag in HTML… it looks like this:

<section class="container">
  Hello world!
</section>

You can see that we've extended the opening tag with class="container". Go into your index.html file add add class="container" to both the <section> and <footer> tag. Now if you save that not a lot will happen… We need to tell the CSS about it.

If we were to add a selector in CSS like this: container {} it wouldn't work. The CSS would be trying to look for a tag in the HTML called <container> which doesn't exist. Instead we need to prefix the selector with a . to tell the CSS to select the classes:

.container {
  border: 1px solid blue;
  color: orange;
}

Save your html and css and refresh your page. Now both your <section> and <footer> have the blue border and orange text.

Classes are a good way of applying the same style to a lot of different tags.

Our .container class is looking a little bit ugly so lets replace it with some different styles:

.container {
  margin: 0 auto 0 auto;
  max-width: 800px;
}

What these properties do is set the margin of each side of the element to be 0px on the top and bottom, and automatically (auto) work out the left and right margin. Then it sets the maximum width (max-width) of the element to be 800px. This effectively ensures that the element stays in the center of it's containing element.

Save it and see…

Go to the next sheet; adding Pages >

Extra: Editing images…

You may need to edit an image for your site. That might making it smaller, cropping it, etc.

For example in the header example the image works best when it is 400 pixels (or px) high, and as wide as the screen. There are many different tools to crop images, if you have GIMP installed use that or have a look at canva.com/photo-editor/. Open your image, and then in image/image size set the height of your image. Using the crop tool image/crop you can cut your image down to the right size. Finally save you image File/save back to your folder as banner.jpg.