Learning Intentions
- Students will understand the role of CSS in separating content from design to create visually appealing web pages.
- Students will explore the cascading nature of CSS, learning how more specific styles override general ones.
- Students will learn how CSS supports responsive design, allowing websites to adapt to different screen sizes and devices.
Syllabus Outcome
SE-12-02: Applies structural elements to develop programming code
Lesson Activity
Introduction to CSS
CSS, or Cascading Style Sheets, is a language used to control the presentation and layout of web pages. While HTML provides the structure and content of a webpage, CSS is responsible for the visual aspects—how the content is displayed, including colours, fonts, spacing, and overall design. By separating content from design, CSS allows web developers to maintain a consistent look and feel across multiple pages of a website with ease.
CSS is called ‘cascading’ because of the way styles can be applied in a hierarchy, where more specific rules can override more general ones. This cascading nature of CSS gives developers powerful control over how different elements on a webpage are styled. Additionally, CSS enables responsive design, allowing websites to adapt to different screen sizes and devices, which is crucial in today’s multi-device world.
Source: What is CSS?
History of CSS
CSS, or Cascading Style Sheets, was developed in the early 1990s as a solution to the limitations of HTML, which only allowed basic web page structure without much control over visual presentation. Proposed by Håkon Wium Lie and Bert Bos in 1994, CSS aimed to separate content from design, giving developers more flexibility in styling web pages. The first version, CSS1, was released in 1996, allowing basic styling like text colour and fonts. Over time, CSS evolved with updates like CSS2 in 1998, which introduced layout controls, and CSS3, which added advanced features such as animations and responsive design. This progression helped shape the visually dynamic websites we interact with today.
Source: History of CSS: The Evolution of Web Design
Browser Compatibility with CSS
When developing websites, it’s important to understand that not all browsers interpret CSS in the same way. Different browsers may support different CSS features, which means a design that looks perfect in one browser might not appear correctly in another. This variation in support can cause issues with layout, styling, and overall functionality. To ensure consistent user experiences across browsers, developers need to be aware of these differences and test their websites accordingly. You can explore which CSS features are supported by various browsers by visiting W3Schools Browser Support for CSS. This resource will help you understand which CSS features work on different browsers and how to address potential compatibility issues.
For this lesson and the next lesson you are to complete the tutorial on CSS over at Codecademy.
There is no need to complete the quizzes, but if time allows it would help re-enforce the learning you have done.
Start the the tutorial here
Resource
That course gives you access to a cheat sheet, you can use and refer to during this subject. You can view the cheat sheet here.