CSS

Write the opening tags

Write the opening tags for:
- A link
- An unordered list
- An image
- A paragraph

Write the opening tags

Write the opening tags for:
- A link
- An unordered list
- An image
- A paragraph

<a href="">
<ul>
<img src="" alt="">
<p>

Learning Intentions

Learn how to write CSS
Learn how to link CSS to a HTML page

Success Criteria

To add CSS to a website or webpage
To be able to explain the purpose of CSS properties

What is CSS?

CSS or 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!

What is CSS?

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

What is CSS?

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

CSS properties and values

A CSS file is made up of rules.

Image copyright jamiebalfour.scot

How CSS works

p {
  color: green;
}

What we want to style

How CSS works

p {
  color: green;
}

How we want to style it

How CSS works

p {
  color: green;
}

Don't forget the semi-colon after each property and value pair

CSS examples

This is an example of a CSS rule

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

CSS examples

This is an example of a CSS rule

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

CSS examples

This is an example of a CSS rule

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

CSS examples

This is an example of a CSS rule

head {
  background: green;
}

Adding CSS to a page (internal CSS)

There are three methods of adding CSS to a webpage:
- Internally
- Externally
- Inline

Adding CSS to a page (internal CSS)

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

Adding CSS to a page (External CSS)

<html>
  <head>
    <title>My website</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="green_class">I’m green!</p>
  </body>
</html>

Adding CSS to a page (Inline CSS)

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

internal CSS

This is used to define the style of a single webpage.
The CSS code is placed directly in the <style> tag in the <head> section of the webpage.

Disadvantages

Can only be used on one page at a time, so editing styles takes a lot longer, especially on large websites with many pages.
Larger individual file size due to the amount of code needed for the CSS

External CSS

Stored as a separate file and loaded into the website by calling it in the <head> section.
<link rel="stylesheet" type="text/css" href="stylesheet.css">

Advantages

Stylesheet can be applied to multiple pages after being loaded once
HTML code is less bloated and can be loaded faster (due to caching)
Higher page ranking in search engines
Changes across the website are easier to implement since only one file is changed

Inline CSS

Inline CSS is applied directly to an element and is written in the style="" attribute on the element.

Disadvantages

More style attributes means it takes longer to process and load the webpage.
Changes need to be made to each element, and if used multiple times, it will require you to change every page that has that element

Internal CSS

In this lesson we will be using internal CSS only as it's easiest, and the browser doesn't cache it!

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

Classes and IDs

We've seen that we can easily style an element by using

p {
  color : green;
}

CSS also allows styling of groups of elements and individual elements using a class and ID.
In CSS, a class begins with a . symbol and an ID with a # symbol.

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      .green_background {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1 class="green_background">I’m green!</h1>
    <p class="green_background">This is green</p>
    <p>But this is not green</p>
  </body>
</html>

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      #big_text {
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    <p id="big_text">This text is bigger</p>
    <p>This is regular text</p>
  </body>
</html>

Classes and IDs

DEMO

National 5 CSS properties

font (family, size)
text color
alignment
background colour

Font

p {
  font-family : Garamond, Georgia, "Times New Roman";
  font-size : 12pt;
}

Text colour

p {
  color : green;
}

Text alignment

p {
  text-align : center;
  text-align : left;
  text-align : right;
  text-align : justify;
}

Background colour

p {
  background-color : green;
}
body {
  background-color : red;
}

Review

Write your name in a paragraph and make it size 40 pixels in red
Write the subject name (Computing Science) in a paragraph in white text with a black background
Using the <body> tag, centre align all text on the page

HTML practice

Create a website about you consisting of:
1. Two or more pages
2. A list of favourite things
3. Three or more images
4. A couple of paragraphs
Add styling to your websites using CSS.
1. Add a background colour
2. Change the colour of some of the text

Task

Review

Presentation Overview

CSS

13:47 | 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