Slides badge

CSS

Write the opening tags

  • Write the opening tags for:

    • A link

    • An unordered list

    • An image

    • A paragraph

Write the opening tags

  • Write the opening tags for:

    • A link

    • An unordered list

    • An image

    • A paragraph

<a href="">
<ul>
<img src="" alt="">
<p>

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

Review

Review

  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

  1. Create a website about you consisting of:
    1. Two or more pages
    2. A list of favourite things
    3. Three or more images
    4. A couple of paragraphs
  2. Add styling to your websites using CSS. 
    1. Add a background colour
    2. Change the colour of some of the text

Task

Review

Presentation Overview
Close
JB
National 5 Computer Science :: Web Design and Development :: CSS
© J Balfour
11:33 | 07-06-2023
Slideshow Outline
Save progress Show presenter mode Toggle whiteboard
Dark Mode Bold Text Accessibility
Random Number Generator Timer Binary & decimal converter Show Python editor Show Knox 90
Provide feedback Help
Login
Keywords
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slide files