Park Mains High School Coding Club

Lesson 5: 🎨 Layout and selective styling

By the end of this session you will be able to:

Recap from Week 4

Last week you learned how to:

Step 1: HTML classes

When you use the <h3> tag, your browser automatically tags the text as bigger and bolder.

We saw in the last lesson that you can make your headings look different with CSS.

But every <h3> tag looks the same. What if we want some of our <h3> headings to look different to others?

This is where class selectors come in. A class is like a shared label. Lots of elements can use the same class to get the same style.

For example:

h1 {
  color: black;
}

.blue {
  color: blue
}
<h1 class="blue"> The text in this heading is blue </h1>
<p class="blue"> The text in this paragraph is blue </p>
<h1> The text in this heading is black </h1>

In the code above, we defined in the CSS stylesheet that all <h1> tags should have black text. But we also defined that anything with the "blue" class must have blue text.

Any element with the "blue" class, no matter what kind, will have blue text; headings, paragraphs, lists - anything!. But only when you include the class!

Challenge

Create a class in your own CSS stylesheet. Try changing the styling of some of your paragraphs and headings to use the new class.

Now try adding it to something unexpected, like a list. What happens?

đź’ˇ Tip: Use sensible, descriptive class names. Don't call a class which turns text red "blue" or "class1"

Why is this important?

Classes make your code:

For example;

Bad practice:

<p style="color:red;">Hello</p>
<p style="color:red;">Goodbye</p>
<p style="color:red;">Welcome</p>
Good practice:

/* CSS */
.red-text {
  color: red;
}

<!-- HTML -->
<p class="red-text">Hello</p>
<p class="red-text">Goodbye</p>
<p class="red-text">Welcome</p>

Step 2: HTML IDs

A class is like a reusable label - you can apply it to as many elements as you like to group elements together.

An ID should identify a single element on the page. It is not reusable. Just like a passport only applies to one person, a HTML ID only applies to one element.

<p class="warning" id="main-warning">Important information</p>

#main-warning {
  color: red;
}

In the class above, the <p> element has the class "warning" and the ID "main-warning". There may be multiple warnings on the page, but there should only be one main warning.

Challenge

CSS always applies the most specific selector. Class selectors override tag selectors, and ID selectors override class selectors.

In the code below, what colour will the text be? Add it to your webpage to check if you are correct.

p {
  color: blue;
}

#danger {
  color: red;
}

.warning {
  color: orange;
}

<p id="danger" class="warning">Warning text</p>

Step 3: Box model

We talked in an earlier lesson about treating tags like boxes. Every element is a box with space inside and space outside. The CSS Box Model lets you decide how big or small your box is, and what it looks like.

This picture shows the box model for each section of this page. In the middle, in blue, is the content for the lesson. Surrounding this is the padding, in green, which is empty space between the content and the border. Next is the border, one pixel wide. Finally we have a margin, which is more empty space outside of the border.

The box model can be used to manage the layout of your page and make sure there is enough space between the different elements on your page.

Challenge

Add the following code to your stylesheet:

CSS:

.box {
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}

HTML:

<div class="box">Hello!</div>

Refresh your page. You should see a box appear. Try this:

Step 4: Semantic HTML

It helps to break your pages up into sections. HTML offers lots of tags to help with this.

You can split your page into sections using tags like <div>, <span> and <section>. You can apply different box models and classes to these in order to decorate and lay out your page exactly how you want.

But these tags don't tell you anything about what goes in them.

It is better to use semantic elements. A semantic element tells the browser and the developer (the person making the webpage) what should be in it.

Some examples of semantic elements are:

Challenge

Inspect this page to find out how semantic HTML is used to split up the page into different sections.

Find the CSS stylesheet and note how the box model is used to put spaces between the different sections

Can you do something similar on your page?

Step 5: Debugging CSS

Professional developers use browser developer tools constantly for debugging CSS, testing layouts, and inspecting websites.

Modern browsers allow you to edit rules on the page directly, and turn CSS rules on and off to view how they affect your page.

The screenshot below shows what the CSS styles window looks like, with checkboxes you can click to turn off those styles.

a screenshot of the CSS debugging window from Google Chrome

Try it yourself: Right click on this page and select "Inspect element". At the bottom of the window which opens, change some of the settings. How does this affect the page?

Step 6: Responsive design

Have you ever tried to view a website on a smartphone which doesn't scale to fit the screen? It's really annoying because you have to scroll and zoom to find what you want.

Modern websites must work on lots of different devices; laptops, desktop computers with huge monitors, tablets, phones. This is called responsive design. The website changes to fit the width of the device using it.

Try it yourself. Add this to your stylesheet:

img {
  max-width: 100%;
}

Now look at any page with an image in it. How has it affected the image? Try resizing the browser window and observe what happens to the size of the image.

Design Brief Challenge

Create a website (or a section in your neocities site) for one of the following:

Requirements:

  1. Multiple pages
  2. Navigation links
  3. At least 2 CSS classes
  4. A consistent colour scheme
  5. Semantic HTML
  6. Accessible colour choices