CSS

Spot the mistakes

Spot the mistakes in the HTML

<!doctype html>
<hmtl>
  <head>
    <h1>Sample webpage</h1>
  </head>
  <body style="colour:green;">
    <title>My website</title>
    <para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
  </body>
</hmtl>

Spot the mistakes

<!doctype html>
<hmtl>
  <head>
    <h1>Sample webpage</h1>
  </head>
  <body style="colour:green;">
    <title>My website</title>
    <para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
  </body>
</hmtl>

Spot the mistakes in the HTML

Learning Intentions

Know how to add basic styles to make webpages more interesting by making use of stylesheets
Be able to test a webpage to see that the CSS applied to a webpage works

Success Criteria

I can use CSS to style a webpage
I am able to test my webpage to ensure that styles have been applied using CSS

What is CSS?

Cascading Style Sheets add style to a webpage
Without CSS we just have HTML on our webpage – so no colour, no borders and just no fancy stuff
HTML on it’s own is just boring text on a white background!

Toggle CSS

Let's add some CSS

<html>
  <head>
    <title>My webpage</title>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

Let's add some CSS

<html>
  <head>
    <title>My webpage</title>
    <style>
      p { color : green; }
    </style>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

How CSS works

The selector

The properties and property values

Describes what we want to style

Describes how we want to style it

p {

color : green ;

}

How CSS works

p {

color : green ;

}

Describes what we want to style

Describes how we want to style it

The selector

The properties and property values

Example 1

p {
  color: green;
  font-size: 20pt;
}

Example 2

p {
  color: lightblue;
  font-size: 20pt;
}
body {
  background-color: gray
}

Example 3

h1 {
  background-color: red;
  color: white;
  border: 2px green solid;
  font-size: 14pt;
}

Example 4

head {
  background: green;
}

Putting CSS on your webpage (internal stylesheet)

<html>
  <head>
    <title>My website</title>
    <style>
      h1 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>I'm green!</h1>
  </body>
</html>

Putting CSS on your webpage (Inline styles)

<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <p style="color:green">I'm green!</p>
  </body>
</html>

Putting CSS on your webpage (external stylesheet)

<html>
  <head>
    <title>My website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>I'm green!</p>
  </body>
</html>

Open the sample webpage. Your task is to make it look more like the second webpage. You will need to modify the CSS of the webpage to achieve this.

Task

Write down five things you’d like to see on your webpage using CSS. For example:

You want all text to be bold
You want some text to be italic (inline styles and classes)

Now add these five things to your webpage

Remember to keep testing your webpage in Google Chrome

If you finish, try adding an external stylesheet to each page of your website – making your website similar across every page.

Task

Plenary

Answer the following questions:

Why is CSS used?
What ways can CSS be added to a website?
Write down the CSS property that would change the following:
1. Font
2. Font size
3. Background image

Presentation Overview

CSS

17:37 | 29-04-2024

Join Live Session

Start Remote

Save Progress

Slideshow Outline

Presenter Mode

Widget Screen

Canvas Controls

Random Selector

Timer

Volume Meter

Binary Converter

Python Editor

Show Knox 90

Provide Feedback

Help

Keywords

DragonDocs Management

Random selector

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files