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

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>

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!

Remove CSS

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

p {

  color : green ;

}

The selector

The properties and property values

Example 1

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

Example 2

p {
  color: green;
  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

JB
7 Web Development : 4.1 CSS
© J Balfour
Tools