CSS

Write the code

Write the code to make all paragraph elements font size 20 pixels.
Write the code to make all div elements have a grey background
Write the code to make the footer element have white text and a black background
Write the code to style the header use the 'Quicksand' font

Write the code

p { font-size:20px; }
div { background-color: grey; }
footer { background-color: black; color: white; }
header { font-family: "Quicksand"; }

Write the code to make all paragraph elements font size 20 pixels.
Write the code to make all div elements have a grey background
Write the code to make the footer element have white text and a black background
Write the code to style the header use the 'Quicksand' font

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;
}

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

Higher CSS

Higher CSS properties

display
float
clear
margins
padding
height
width

tHE diSPLAY PROPERTY

At Higher, the display property has three values, block, inline and none.
An element that is positioned using display:block will prevent any other elements from appearing next to it. Examples of block elements include <div>, <h1>, <p>, <form>, <header>, <main>, <footer> and <section>
Inline content is within the standard flow of the content. Examples of inline elements include <a> and <img>

Margins and padding

The margin sets the space outside of an element and other elements
Padding sets the internal space between the edges and its content within an element

Margins and padding

The margin sets the space outside of an element and other elements
Padding sets the internal space between the edges and its content within an element

Margins and padding

/*15px all round*/
margin : 15px;
/*15px to the top and bottom, 5px to left and right*/
margin : 15px 5px;
margin-left : 5px;
margin-right : 5px;
margin-top : 15px;
margin-bottom : 15px;

/*15px all round*/
padding : 15px;
/*15px to the top and bottom, 5px to left and right*/
padding : 15px 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 15px;
padding-bottom : 15px;

Height and width

p {
  width : 100px;
  height : 100px;
}

Height and width of elements can be set using:

Floating elements

img {
  float : right;
}

Before any styling is applied, a browser will display all elements vertically down a page.
Much like text-wrapping in Microsoft Word, text be positioning next to other elements (such as images) when the float property is specified.
When the float property is specified, other elements wrap around the element.

Floating elements

The clear property

footer {
  clear : both;
}

The clear property and value pair can be used to stop floating elements from stacking on top of the element
In general, it means no element can be at the side of the element with the clear property.
There are four values for the clear property; left, right, both, none.

The Clear property

Past Paper Questions

A browser displays the header element of the home page as shown below.

Complete the CSS below to style the header.

3 marks

2019 Q16 b)

background-color

margin

float : right

Review

Experiment with the CSS properties you have seen in this lesson.

Create the following webpage. Use semantic elements to build the page.

Activity

Answer each of the following questions:

Two elements need 10 pixels of spacing between them, how can this be achieved with CSS?
An element stretches from the very left to the very right, is this inline or a block element?
Write the code so that a text wraps around an image element on the left hand-side of the page.

Review questions

Grouping selectors

Sometimes we want to apply the same styles to multiple elements.
With CSS we normally create a separate rule for each element we want to style:

h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}

Grouping selectors

But this is inefficient!
Imagine having to download this CSS file - just look at the repetition!

h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}
.bad{
  color:#f00;
  font-weight:bold;
}

Grouping selectors

So we can write it more efficiently using a CSS grouping selector.
In the example below, using a comma, we are specifying that we want to style both the <h1> and any elements with the warning class:

h1, .warning, .bad {
  color: #f00;
  font-weight: bold;
}
.warning{
  font-size:14px;
}

Descendant selector

#main_content p{
  color:#222;
}

We also need to know about descendant selectors.
A descendant selector is simply a selector that tells the browser to style elements within another element.

This is simply styling all paragraphs within the element with the ID #main_content.

:hover

a:hover{
  color: #0f0;
}
div:hover{
  background-color: #ddd;
}

CSS also includes several pseudoselectors, a term which basically refers to selectors that are applied to another selector
In Higher, you only need to know about the :hover pseudoselector:

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>

For Higher you are expected to build a horizontal navigation bar:

nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>

For Higher you are expected to build a horizontal navigation bar:

nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Past Paper question

The styles will only apply to children of each element. E.g. nav ul will only affect <ul> elements which are inside the <nav> element. You only want to style the <li> and <a> elements within the <nav> element to avoid styling every <li> or <a> element across the page.

The navigational bar shown below makes use of the following CSS.

Explain why descendant selectors are used here.

2 marks

Explain and exemplify a grouping selector
Write the CSS to make the colour of a link change when it is hovered
Explain and exemplify a descendant selector

On your computer, create a navigation bar on your website.

Review Questions

Presentation Overview

CSS

12:54 | 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