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!

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>

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.

CSS

Spot the mistakes

Spot the mistakes

Learning Intentions

Success Criteria

What is CSS?

What is CSS?

What is CSS?

How CSS works

How CSS works

How CSS works

What does CSS look like?

CSS styled webpage

Using CSS

Some CSS properties and values

Some CSS properties and values

Some CSS properties and values

Selectors

Selectors

Selectors

Selectors

Making two blocks sit next to each other

Making two blocks sit next to each other

Two columns using CSS

Things to remember when using CSS

Task