CSS for Computing Science teachers Level 1

Cascading Style Sheets or CSS is how you add visual appeal to web pages. You create CSS rules to control fonts, margins, backgrounds, layout and all other visual aspects of web page.

The structure and content of web pages is created using HTML code. CSS is used to control what the page and contents look like. When it comes to National 4, National 5 and the new Higher Computing science courses there is a greater emphasis and some requirement for pupils to produce and edit simple html code. Adding CSS to that code will bring the pages to life.

This course introduces CSS, what it is, how its used and the basics of creating CSS rules.

Course Aims

  • To develop Computing teachers knowledge, skills and confidence in CSS.
  • To provide an opportunity for teachers to explore, discuss and practice workable methods of teaching CSS coding in the classroom

Course Content summary

Below is an overview of the topics covered in the course. Click here to view a complete list of contents

  • CSS
  • Software choices
  • Approaches to teaching CSS
  • Working environments
  • Presentation vs Structure
  • <style> Style elements
  • Inline CSS
  • Document CSS
  • Stylesheets
  • CSS Selectors
  • Common CSS selectors
  • Common styling
  • Writing and editing CSS Declarations
  • ID and Class selectors
  • Div tags <div>
  • CSS Layout
  • Box Model
  • More advanced CSS
  • Online tutorial, reference, support materials

Course Content Detail

  • CSS - What is CSS
  • Software choices - for writing and editing CSS code – demonstrating the pros and cons of using the various software programs available to schools and currently in use
  • Approaches to teaching CSS – software, file/folder organisation, timescale
  • Working environments – how to set up the user screen for effective code creation
  • Presentation VS Structure
    • Keeping the structure and presentation of web page code separate – why and how.
    • Good practice in modern web design
  • <style> Style elements
    • What they are
    • Where to place them in the page
  • Inline CSS
  • Document CSS
  • Stylesheets
    • How and when to use inline CSS, document CSS and stylesheets
  • CSS Selectors What they are
    • How to write valid selectors
  • Common CSS selectors
      • Most commonly used CSS selectors
      • Body
      • Headings
      • Paragraphs
      • Images
      • Hyperlinks
      • Lists
    • Correctly forming selectors
  • Common styling
    • Fonts, font size, font colour, headings, paragraph spacing, page colour, element background co­lour, image alignment, borders, navigation, lists, margins, padding…
  • Writing and editing CSS Declarations
    • Properties and values
    • Units
  • ID and Class selectors
    • What they are and how to use them
  • Div tags <div>
    • Using them for layout
  • CSS Layout
    • Creating simple page layouts using CSS
    • Positioning
    • Widths, Heights, Units
    • Floats
  • Box Model What it is and how it is used in CSS to create and control elements and layouts
  • More advanced CSS Demonstration and discussion of advanced CSS techniques
  • Online tutorial, reference and support materials