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!
  • 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.
  • CSS stands forCascading 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!

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

Font 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>
.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

Presentation Overview
Close
JB
CSS
© 2020 - 2024 J Balfour
17:40 | 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