Module 1: Introduction to Cascading Style Sheets

Overview

In this module, students will begin to learn the basics of Cascading Style Sheets (CSS), which they will use to transform their rather dull-looking portfolio pages to designs that are more visually pleasing.

Lesson 1: Anatomy of a Style

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• Reinforce that CSS is a different language than HTML with very different syntax. Students are often tempted to use HTML conventions like angle brackets around element names.
• Like HTML, it is important with CSS to be careful to use correct syntax, and to use indentation to keep the document well organized. It may be necessary to lead the entire class in a mini-lesson on the correct syntax for CSS.

Example Output

When this lesson is complete, students will have added a basic style sheet to their index.html file.

Lesson 2: Applying Styles

• Estimated time required: 60 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• This lesson provides a good opportunity to look at real world examples of CSS in action, as described on the Unit 3 home page. Get students excited about what CSS can do, then start teaching them the techniques they need to implement rich visual designs on their own sites. Beware when doing so that students may want to fly before they can crawl, so it will be important to use the external sites for education, motivation, and inspiration; while keeping students' expectations realistic about what they can accomplish in an introductory course. That said, many students are satisfied with small improvements and generally pleased that a single line of CSS code can have a significant effect on the look of their website. Reinforce the pattern of saving and refreshing, so students can immediately be rewarded with results for their work.
• It can be very helpful to ensure students understand the relationship between HTML elements and CSS selectors. Even though HTML and CSS have a very different syntax, that H1 referenced in CSS is the same top-level heading as the <h1> added to the page using HTML. Every HTML element in the body of the web page can be stylized using CSS. These relationships will carry over when students learn to manipulate HTML elements dynamically using JavaScript in Unit 5, so it's important for students to understand these relationships now.
• Check students' work closely to be sure they have applied styles to a variety of selectors/elements and have used a variety of properties before they proceed to the next lesson.

Example Output

When this lesson is complete, students will have expanded on the style sheet in their index.html file.

Lesson 3: Linking to an External Style Sheet

• Estimated time required: 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• When moving styles from the <style> section of the HTML file to the external CSS file, students have a tendency to link to the external file, but forget to remove the same CSS from the HTML file. Emphasize the importance of cleaning up the code to eliminate redundancy. Redundant CSS code is a common source of confusion later. When students make changes to their external CSS file but don't see the results of those changes, the cause may be another style defined elsewhere that's trumping the style in question. It's much easier to avoid that problem than to have to track it down later.
• Cascading Style Sheets are said to be "cascading" because of the way CSS rules are added together and applied cumulatively, like small streams cascading into rivers. The rules of how CSS is applied and which style definitions take precedence when there are conflicts can be tricky, even for professional web designers. Given the complexities, we haven't included this topic in the curriculum. However, instructors should have some familiarity with at least the basics as it can come in handy when helping students troubleshoot their CSS. Vitaly Friedman offers a very good explanation in his Smashing Magazine article CSS Specificity: Things You Should Know.
• CSS can be challenging and frustrating, but it can also be fun! Some students may require some convincing, so it's particularly important with this lesson to present the challenges as puzzles, and to remind students that by figuring out the nuances of CSS, their sites could very quickly become as rich as the sites at CSS Zen Garden.

Example Output

When this lesson is complete, students will have created an external style sheet and linked to it from all their HTML files. They will also have copied the overall updated structure from index.html to all other files. Follow links from the example index.html to see how all pages now look on our example site.