CSS Level 1 for Computing Science Teachers

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

Who this course is for

  • Computing Science teacher, teaching web design and development.
  • You are delivering, developing and planning National 5, Higher and Advanced Higher Computing Science courses.
  • You're a complete beginners with no piror knowledge of CSS
  • You would like to up-date your CSS skills to use contemporary best practice.
  • You'd like a refresher on CSS styling.

What you need to know

This is an introductory course on CSS suitable for beginners of CSS, however, to use CSS you first must have good understanding of HTML coding. CSS is applied to HTML elements to affect their appearance and layout.

Knowledge and skills needed to undertake this course

This course builds on topics and skills developed in one or more lower level courses.

It is vital that you have either attended the course(s) listed below or that you are confident that you are comfortable and competenent in the topics and skills it covers.

We want you to get the best from your time on our course and making sure you are attending a course at a suitable level is important for you and for the others on the course.

Please click the link and view the course details. If you are in any doubt about whether you are at the right level to do this course then please don't hesitate to contact us for further information

Courses that provide the necessary skills:

Content summary

Below is an overview of the topics covered in the course.

  • 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 in detail

  • CSS - What is CSS
  • Software choices - for writing and editing CSS code – the pros and cons of using various software programs typically available in schools
  • 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> and HTML5 Semantic elements <header>, <nav>, <section>, <footer>,
    • Using them for layout
  • CSS Layout
    • Creating simple page layouts using CSS
    • Understanding 'normal document flow'
    • 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