Slides badge

CSS

Write the code

  • Write the code to make all paragraph elements font size 20 pixels.

  • Write the code to make all div elements have a grey background

  • Write the code to make the footer element have white text and a black background

  • Write the code to style the header use the 'Quicksand' font

Write the code

p { font-size:20px; }
div { background-color: grey; }
footer { background-color: black; color: white; }
header { font-family: "Quicksand"; }
  • Write the code to make all paragraph elements font size 20 pixels.

  • Write the code to make all div elements have a grey background

  • Write the code to make the footer element have white text and a black background

  • Write the code to style the header use the 'Quicksand' font

Learning Intentions

  • Learn how to write CSS

  • Learn how to link CSS to a HTML page

Success Criteria

  • To add CSS to a website or webpage
  • To be able to explain the purpose of CSS properties

What is CSS?

  • CSS or 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!

     

What is CSS?

<html>
  <head>
    <title>My webpage</title>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

What is CSS?

<html>
  <head>
    <title>My webpage</title>
    <style>
      p {
        color : green;
      }
    </style>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

CSS properties and values

  • A CSS file is made up of rules.

Image copyright jamiebalfour.scot

How CSS works

p {
  color: green;
}

What we want to style

How CSS works

p {
  color: green;
}

How we want to style it

How CSS works

p {
  color: green;
}

Don't forget the semi-colon after each property and value pair

CSS examples

  • This is an example of a CSS rule

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

CSS examples

  • This is an example of a CSS rule

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

CSS examples

  • This is an example of a CSS rule

h1 {
  background-color: red;
  color: blue;
  border: 2px green solid;
  font-size: 14pt;
}

CSS examples

  • This is an example of a CSS rule

head {
  background: green;
}

Adding CSS to a page (internal CSS)

  • There are three methods of adding CSS to a webpage:
    • Internally
    • Externally
    • Inline

Adding CSS to a page (internal CSS)

<html>
  <head>
    <title>My website</title>
    <style>
      h1 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>I’m green!</h1>
  </body>
</html>

Adding CSS to a page (External CSS)

<html>
  <head>
    <title>My website</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="green_class">I’m green!</p>
  </body>
</html>

Adding CSS to a page (Inline CSS)

<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <p style="color:green">I’m green!</p>
  </body>
</html>

internal CSS

  • This is used to define the style of a single webpage.
  • The CSS code is placed directly in the <style> tag in the <head> section of the webpage.

Disadvantages

  • Can only be used on one page at a time, so editing styles takes a lot longer, especially on large websites with many pages.
  • Larger individual file size due to the amount of code needed for the CSS

External CSS

  • Stored as a separate file and loaded into the website by calling it in the <head> section.
  • <link rel="stylesheet" type="text/css" href="stylesheet.css">

Advantages

  • Stylesheet can be applied to multiple pages after being loaded once
  • HTML code is less bloated and can be loaded faster (due to caching)
  • Higher page ranking in search engines
  • Changes across the website are easier to implement since only one file is changed

Inline CSS

  • Inline CSS is applied directly to an element and is written in the style="" attribute on the element.

Disadvantages

  • More style attributes means it takes longer to process and load the webpage.
  • Changes need to be made to each element, and if used multiple times, it will require you to change every page that has that element

Internal CSS

  • In this lesson we will be using internal CSS only as it's easiest, and the browser doesn't cache it!
<html>
  <head>
    <title>My website</title>
    <style>
      h1 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>I’m green!</h1>
  </body>
</html>

Classes and IDs

  • We've seen that we can easily style an element by using
p {
  color : green;
}
  • CSS also allows styling of groups of elements and individual elements using a class and ID.
  • In CSS, a class begins with a . symbol and an ID with a # symbol.

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      .green_background {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1 class="green_background">I’m green!</h1>
    <p class="green_background">This is green</p>
    <p>But this is not green</p>
  </body>
</html>

Classes and IDs

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      #big_text {
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    <p id="big_text">This text is bigger</p>
    <p>This is regular text</p>
  </body>
</html>

Classes and IDs

Classes and IDs

DEMO

National 5 CSS properties

  • font (family, size)
  • text color
  • alignment
  • background colour

Font

p {
  font-family : Garamond, Georgia, "Times New Roman";
  font-size : 12pt;
}

Text colour

p {
  color : green;
}

Text alignment

p {
  text-align : center;
  text-align : left;
  text-align : right;
  text-align : justify;
}

Background colour

p {
  background-color : green;
}
body {
  background-color : red;
}
  1. Write your name in a paragraph and make it size 40 pixels in red
  2. Write the subject name (Computing Science) in a paragraph in white text with a black background
  3. Using the <body> tag, centre align all text on the page

HTML practice

Higher CSS

Higher CSS properties

  • display
  • float
  • clear
  • margins
  • padding
  • height
  • width

tHE diSPLAY PROPERTY

  • At Higher, the display property has three values, block, inline and none.
  • An element that is positioned using display:block will prevent any other elements from appearing next to it. Examples of block elements include <div>, <h1>, <p>, <form>, <header>, <main>, <footer> and <section>
  • Inline content is within the standard flow of the content. Examples of inline elements include <a> and <img>

Margins and padding

  • The margin sets the space outside of an element and other elements
  • Padding sets the internal space between the edges and its content within an element

Margins and padding

  • The margin sets the space outside of an element and other elements
  • Padding sets the internal space between the edges and its content within an element

Margins and padding

/*15px all round*/
margin : 15px;
/*15px to the top and bottom, 5px to left and right*/
margin : 15px 5px;
margin-left : 5px;
margin-right : 5px;
margin-top : 15px;
margin-bottom : 15px;

/*15px all round*/
padding : 15px;
/*15px to the top and bottom, 5px to left and right*/
padding : 15px 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 15px;
padding-bottom : 15px;

Height and width

p {
  width : 100px;
  height : 100px;
}
  • Height and width of elements can be set using:

Floating elements

img {
  float : right;
}
  • Before any styling is applied, a browser will display all elements vertically down a page.
  • Much like text-wrapping in Microsoft Word, text be positioning next to other elements (such as images) when the float property is specified.
  • When the float property is specified, other elements wrap around the element.

Floating elements

The clear property

footer {
  clear : both;
}
  • The clear property and value pair can be used to stop floating elements from stacking on top of the element
  • In general, it means no element can be at the side of the element with the clear property. 
  • There are four values for the clear property; left, right, both, none.

The Clear property

Past Paper Questions

A browser displays the header element of the home page as shown below.

 

 

 

Complete the CSS below to style the header.

3 marks

2019 Q16 b)

background-color

margin

float : right

Review

Experiment with the CSS properties you have seen in this lesson. 

Create the following webpage. Use semantic elements to build the page.

Activity

Answer each of the following questions:

 

  1. Two elements need 10 pixels of spacing between them, how can this be achieved with CSS?
  2. An element stretches from the very left to the very right, is this inline or a block element?
  3. Write the code so that a text wraps around an image element on the left hand-side of the page.

Review questions

Grouping selectors

  • Sometimes we want to apply the same styles to multiple elements.
  • With CSS we normally create a separate rule for each element we want to style:
h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}

Grouping selectors

  • But this is inefficient!
  • Imagine having to download this CSS file - just look at the repetition!
h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}
.bad{
  color:#f00;
  font-weight:bold;
}

Grouping selectors

  • So we can write it more efficiently using a CSS grouping selector.
  • In the example below, using a comma, we are specifying that we want to style both the <h1> and any elements with the warning class:
h1, .warning, .bad {
  color: #f00;
  font-weight: bold;
}
.warning{
  font-size:14px;
}

Descendant selector

#main_content p{
  color:#222;
}
  • We also need to know about descendant selectors.
  • A descendant selector is simply a selector that tells the browser to style elements within another element.

 

 

 

 

 

  • This is simply styling all paragraphs within the element with the ID #main_content.

:hover

a:hover{
  color: #0f0;
}
div:hover{
  background-color: #ddd;
}
  • CSS also includes several pseudoselectors, a term which basically refers to selectors that are applied to another selector
  • In Higher, you only need to know about the :hover pseudoselector:

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>
  • For Higher you are expected to build a horizontal navigation bar:
nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>
  • For Higher you are expected to build a horizontal navigation bar:
nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Past Paper question

The styles will only apply to children of each element. E.g. nav ul will only affect <ul> elements which are inside the <nav> element. You only want to style the <li> and <a> elements within the <nav> element to avoid styling every <li> or <a> element across the page.

The navigational bar shown below makes use of the following CSS.

 

 

Explain why descendant selectors are used here.

2 marks

  1. Explain and exemplify a grouping selector
  2. Write the CSS to make the colour of a link change when it is hovered
  3. Explain and exemplify a descendant selector

 

On your computer, create a navigation bar on your website.

Review Questions

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