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

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

  • Understand how websites are built with HTML, CSS and JavaScript

  • Be able to write use CSS to style a webpage

Success Criteria

  • I can explain how HTML, CSS and JavaScript are needed to build a webpage
  • I can write CSS to change font colour, font styles, backgrounds
  • I can write HTML and CSS to make two columns
You will not learn to code from simply being told how to do it, learning to code becomes more natural the more you do by learning it yourself.

What is CSS?

  • CSS is another one of the three components for front-end web development, with the others being HTML and JavaScript.
  • CSS is composed of properties and values.
  • Most websites (like 99% of them) use CSS to perform styling. Although there are alternatives to CSS like XSLT which are more powerful, the simplicity and the support for CSS is what has made it more commonly available. 
  • Like HTML, CSS is a living standard (meaning it continues to get updated) that is maintained by the W3 Consortium. 

What is CSS?

  • CSS stands for Cascading Style Sheets.
  • 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

  • As HTML focuses only on the content of a webpage, CSS focuses in on the layout and style of a webpage with JavaScript focusing on interaction.
  • CSS is very powerful, in fact, each of these slides are made with HTML, CSS and JavaScript, with all of the styling carried out by CSS!
  • CSS is another one of the three components for front-end web development, with the others being HTML and JavaScript.
  • CSS is composed of properties and values.
  • Most websites (like 99% of them) use CSS to perform styling. Although there are alternatives to CSS like XSLT which are more powerful, the simplicity and the support for CSS is what has made it more commonly available. 
  • Like HTML, CSS is a living standard (meaning it continues to get updated) that is maintained by the W3 Consortium. 

What is CSS?

  • As HTML focuses only on the content of a webpage, CSS focuses in on the layout and style of a webpage with JavaScript focusing on interaction.
  • CSS is very powerful, in fact, each of these slides are made with HTML, CSS and JavaScript, with all of the styling carried out by CSS!
  • HTCSS is another one of the three components for front-end web development, with the others being HTML and JavaScript.
  • CSS is composed of properties and values.
  • Most websites (like 99% of them) use CSS to perform styling. Although there are alternatives to CSS like XSLT which are more powerful, the simplicity and the support for CSS is what has made it more commonly available. 
  • Like HTML, CSS is a living standard (meaning it continues to get updated) that is maintained by the W3 Consortium. 
  • CSS stands for Cascading Style Sheets.
  • 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!

How CSS works

  • As HTML focuses only on the content of a webpage, CSS focuses in on the layout and style of a webpage with JavaScript focusing on interaction.
  • CSS is very powerful, in fact, each of these slides are made with HTML, CSS and JavaScript, with all of the styling carried out by CSS!

Image copyright jamiebalfour.scot

How CSS works

p {

  color : green ;

}

The selector

The properties and property values

How CSS works

p {

  color : green ;

}

Describes what we want to style

Describes how we want to style it

What does CSS look like?

<!doctype html>
<html>
  <head>
    <title>A sample webpage</title>
    <style>
      h1 {
        background : green;
      }
      p {
          font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Welcome to my website!</p>
  </body>
</html>

CSS styled webpage

Using CSS

  • CSS is composed of a selector (e.g. h1) and property and value pairs.
h1 {
  background: green;
}

.green_text {
  color: green;
}

#main_content {
  width: 600px;
}

Some CSS properties and values

(Text) colour

font-color: green;
font-color: #0a0;

Background colour

background-color: red;
background-color: #a00;

Font size

font-size: 14px;
font-size: 12pt;

Some CSS properties and values

Font family

font-family: "Times New Roman", serif;
font-family: "Helvetica", "Calibri", sans-serif;

Width

width: 500px;
width: 50%;

Height

height: 300px;
height: 50%;

Some CSS properties and values

Padding

padding: 5px;

Margin

margin: 5px;

Border

border: 1px gray solid;

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

  • 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

  • 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">
  • 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 {

}

Notice the class attribute

Notice the ID attribute

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

Making two blocks sit next to each other

  • It is common for websites to have two sections sitting right next to each other and it's actually a lot more difficult than it should be to do. The following is HTML needed to do this:
<div>
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
</div>

Making two blocks sit next to each other

  • And the CSS required is as follows:
.column {
  display: inline-block;
  width: 50%;
  margin: -1px;
  padding: 0;
}

Two columns using CSS

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

Now that you have a bit of CSS knowledge, you can now add some CSS to your own websites! 

 

Use the CSS booklet to help you to add CSS to your websites.

Task

From the last time...

  • In the last lesson on CSS we saw that a CSS selector matches up with an HTML element:
<head>
  <style>
    #main_content{
      padding:10px;
    }
    .clear_image{
      background: #eee;
      border: 2px #000 solid;
      border-radius:7px;
    }
  </style>
</head>
<body>
  <div id="main_content">
    <img class="clear_image" src="" alt="Me" />
  </div>
</body>

From the last time...

  • We have also looked at using internal stylesheets:
<head>
  <style>
    #main_content{
      padding:10px;
    }
    .clear_image{
      background: #eee;
      border: 2px #000 solid;
      border-radius:7px;
    }
  </style>
</head>
<body>
  <div id="main_content">
    <img class="clear_image" src="" alt="Me" />
  </div>
</body>

Internal stylesheets are placed within a <style> tag in the head of the HTML page

From the last time...

  • We have also looked at using internal stylesheets:
<head>
  <style>
    #main_content{
      padding:10px;
    }
    .clear_image{
      background: #eee;
      border: 2px #000 solid;
      border-radius:7px;
    }
  </style>
</head>
<body>
  <div id="main_content">
    <img class="clear_image" src="" alt="Me" />
  </div>
</body>

Internal stylesheets are placed within a <style> tag in the head of the HTML page

Connecting CSS to HTML

  • There are two other methods of using CSS with HTML:
    • Externally
    • Inline
  • External stylesheets provide numerous benefits such as:
    • browsers being able to cache them (which means they load faster!)
    • one change made will affect many pages (think about consistency)
    • it keeps the design and content separate
  • Inline styling offers the benefit of individual customisation

External stylesheets

  • Assume we have the following CSS file, called style.css
<head>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div id="main_content">
    <img class="clear_image" src="" alt="Me" />
  </div>
</body>
#main_content{
  padding:10px;
}
.clear_image{
  background: #eee;
  border: 2px #000 solid;
  border-radius:7px;
}

External stylesheets

  • The following demonstrates how to connect the stylesheet (style.css) to our webpage
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main_content">
    <img class="clear_image" src="" alt="Me" />
  </div>
</body>
#main_content{
  padding:10px;
}
.clear_image{
  background: #eee;
  border: 2px #000 solid;
  border-radius:7px;
}

style.css

home.html

Inline styles

  • Inline styles are used to apply to one element and one element alone.
  • They are called inline because they are written in the line of the HTML code where they exist
  • The styles are written within the style attribute of the element:
<body>
  <div id="main_content">
    <img style="background:green; border: 2px #000 solid;" src="" alt="Me" />
  </div>
</body>

Answer the following questions:

  1. Why might you want to use an external stylesheet instead of an internal one?
  2. Why might inline styles be better suited than using an ID selector?
  3. Why might you want to use an internal stylesheet instead of an external?
  4. Write the code to connect an external stylesheet to a HTML page

Review questions

Presentation Overview
Close
JB
CSS
© 2020 - 2024 J Balfour
21:13 | 03-12-2024
Join Live Session
Go Live
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