Slides badge

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

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:

  1. Why is CSS used?

  2. What ways can CSS be added to a website?

  3. Write down the CSS property that would change the following:

    1. Font

    2. Font size

    3. Background image

Presentation Overview
Close
JB
CSS
© 2020 - 2024 J Balfour
22:32 | 14-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
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files