Unit 3: Formatting Web Pages with Style Sheets

Overview

This unit is the sequel to the proceeding unit, in which students learned the basics of HTML code, but focused solely on the content and structure of web documents. In this unit, students learn how to control the visual presentation of web documents using Cascading Style Sheets (CSS). Like the proceeding unit, this unit can be completed entirely with a web browser and HTML editor.

In the first three modules of this unit students generally fare well, but in modules 4 - 6 some students begin to have difficulty and to tire from all the coding they've been doing since the beginning of Unit 2. It's important for instructors to be prepared for this and to try to prevent it by making CSS exciting. Throughout Unit 2, students were probably lamenting that their web pages were dull-looking, and asking how to add features that were visual in nature (like centering text, creating multiple columns, changing text or background colors, using a different font, etc.) Now is their chance! With CSS they can finally make their website visually appealing!

One way to keep students motivated may be to explore other sites that use CSS especially well. The Software and Hardware Requirements page lists several toolbars that are available for various browsers. These toolbars make it easy to toggle CSS off and on with a single click or hotkey. It can be an interesting exercise to view web pages without CSS, then turn CSS back on to view the amazing transformation. One popular site that can be used for exploring the power of CSS is CSS Zen Garden, a site where each page has exactly the same content and structure, but has a unique and visually rich appearance, attained solely through CSS (with extensive use of background images). Encourage students to bring in other examples of sites that use CSS especially well and share them with the class.

Estimated time required: 16 - 20 hours

Learner Outcomes

Students will:

• be able to identify the components of a style in CSS.
• be able to apply CSS to a variety of HTML elements.
• have created an external style sheet, and linked to it from within their web pages.
• have learned about various tools that are available to help select colors for web pages.
• be able to identify two methods for expressing color in CSS.
• be able to identify a few basic colors, including black and white, by their hexadecimal codes
• be able to implement a color scheme on a web site using CSS to define background and font colors for HTML elements.
• have identified four guidelines for using typography effectively on web pages.
• have evaluated several web pages on whether they effectively follow the above guidelines.
• be able to identify whether a font is serif, sans-serif, or another font family.
• be able to make informed decisions about which font families to use on a website, based in part on the likelihood that these fonts will be installed on users' computers.
• be able to define the typography of a site by setting the font-family, font-size, font-weight, line-height, text-align, and letter-spacing properties in CSS.
• be able to identify the difference between margin, border, and padding in CSS.
• be able to add margins, borders, and paddings to HTML elements using CSS.
• be able to identify how ID attributes are used in CSS to enable styling of individual elements.
• be able to identify how Class attributes are used in CSS to enable styling of groups of elements.
• have added ID and Class attributes to certain elements within a web page.
• be able to stylize a class of elements using CSS.
• be able to stylize an individual HTML element using its ID.
• be able to use the :hover, :focus, and :active CSS pseudo-classes to a web page to help the user track their current position on the page.
• be able to use the :first-letter pseudo-class to distinctly stylize the first letter of a block of text.
• be able to demonstrate a basic understanding of CSS positioning principles.
• be able to apply CSS positioning to align elements into two columns on your web page.
• be able to position elements using both relative and absolute positioning.
• be able to use a variety of CSS properties to make an unordered list look like a navigation menu.

Modules

• Module 1: Introduction to Cascading Style Sheets
• Module 2: Color in CSS
• Module 3: Typography in CSS
• Module 4: The Box Model in CSS
• Module 5: The Role of ID and Class in CSS
• Module 6: Page Layout Techniques
• Module 7: Reflections

Assessment

See the Unit 3 Question Bank for sample questions, organized by module. These questions could be used as needed for quizzes and exams. See also our Recommended Assessment for the overall course.