Slides badge

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

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

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

Review

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

HTML practice

  1. 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
  2. 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
Close
JB
CSS
© 2020 - 2024 J Balfour
15:27 | 23-05-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
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files