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>

styles.css

h1 {
  background : lightgray;
}
p {
  font-family : "Arial", sans-serif
}
  • Styles.css must be created in the same folder path (e.g. if the HTML page is in a folder called task1, put the CSS file in the same folder, or add a folder called css and put it in there and link it by using the path css/styles.css)

Classes and IDs

Selectors

  • In CSS, a selector is what is used to specify what is going to be styled.
  • For example, if we wanted to style all <h1> elements we would use the h1 selector as shown below.
h1 {

}

Selectors

  • Classes and IDs allow us to specify specific elements to style rather than styling all elements of a type. 
  • We append the class or ID attribute to each element.

DEMO

Selectors

  • But we have more than one type of selector, since most of the time we will only need to style one or two elements on a page rather than all of them in one go.
  • Assume we have the following HTML:
<p class="green_bg">
  This paragraph should be green
</p>


<img id="big_image" src="image1.jpg">

Notice the class attribute

Notice the ID attribute

  • Classes and IDs allow us to specify specific elements to style rather than styling all elements of a type. 
  • We append the class or ID attribute to each element.

DEMO

Selectors

  • And we have the following CSS linked to the HTML file
.green_bg{
  background: green;
  color: #fff;
}
#big_image {
  width: 600px;
  height: 500px;
}
  • In CSS, a selector is what is used to specify what is going to be styled.
  • For example, if we wanted to style all <h1> elements we would use the h1 selector as shown below.
h1 {

}

A dot represents a class selector

A hash sign represents an ID selector

Things to remember when using CSS

  • Do not forget the semi-colon ( ; ) at the end of a property and value pair.
  • Use the American spelling of colour, i.e. color
  • Remember that CSS belongs only inside the <style> and </style> tags in the HTML
  • You can overwrite other CSS, i.e. if you specified that all paragraphs have green text but then elements with a class have a different colour, the class will be used instead.
  • You can combine CSS together
.column {
  display: inline-block;
  width: 50%;
  margin: -1px;
  padding: 0;
}

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. Use inline styles to complete this.

Complete the 'Identify the Property and Value' worksheet by finding the property name and an example value for each of the effects stated.

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
11:52 | 11-11-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Fullscreen
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:

      ×
      Loading
      All slideshow files