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>

styles.css

h1 {
  background : lightgray;
}
p {
  font-family : "Arial", sans-serif
}

Styles.css must be created in the same folder path (e.g. if the HTML page is in a folder called task1, put the CSS file in the same folder, or add a folder called css and put it in there and link it by using the path css/styles.css)

Classes and IDs

Selectors

In CSS, a selector is what is used to specify what is going to be styled.
For example, if we wanted to style all <h1> elements we would use the h1 selector as shown below.

h1 {

}

Selectors

Classes and IDs allow us to specify specific elements to style rather than styling all elements of a type.
We append the class or ID attribute to each element.

DEMO

Selectors

But we have more than one type of selector, since most of the time we will only need to style one or two elements on a page rather than all of them in one go.
Assume we have the following HTML:

<p class="green_bg">
  This paragraph should be green
</p>


<img id="big_image" src="image1.jpg">

Notice the class attribute

Notice the ID attribute

Classes and IDs allow us to specify specific elements to style rather than styling all elements of a type.
We append the class or ID attribute to each element.

DEMO

Selectors

And we have the following CSS linked to the HTML file

.green_bg{
  background: green;
  color: #fff;
}
#big_image {
  width: 600px;
  height: 500px;
}

In CSS, a selector is what is used to specify what is going to be styled.
For example, if we wanted to style all <h1> elements we would use the h1 selector as shown below.

h1 {

}

A dot represents a class selector

A hash sign represents an ID selector

Things to remember when using CSS

Do not forget the semi-colon ( ; ) at the end of a property and value pair.
Use the American spelling of colour, i.e. color
Remember that CSS belongs only inside the <style> and </style> tags in the HTML
You can overwrite other CSS, i.e. if you specified that all paragraphs have green text but then elements with a class have a different colour, the class will be used instead.
You can combine CSS together

.column {
  display: inline-block;
  width: 50%;
  margin: -1px;
  padding: 0;
}

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. Use inline styles to complete this.

Complete the 'Identify the Property and Value' worksheet by finding the property name and an example value for each of the effects stated.

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

22:18 | 22-10-2024

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