Description
In this lesson on Cascading Style Sheets, students will explore the basics of CSS while learning how a stylesheet works. The hope is that students will understand the outcome or product before they do it. So, show them samples of CSS code along with criteria and/or rubric below. The objective is that as a teacher, you can guide students through each step of the CSS code process, model in-hand of the finished product.
Objective
- Students will understand and evaluate each step of the CSS process.
Common Core State Standards
| CCSS.ELA-Literacy.W.9-10.8 | Gather relevant information from multiple authoritative print and digital sources, using advanced searches effectively; assess the usefulness of each source in answering the research question; integrate information into the text selectively to maintain the flow of ideas, avoiding plagiarism and following a standard format for citation. |
| CCSS.ELA-Literacy.CCRA.W.6
|
Use technology, including the Internet, to produce and publish writing and to interact and collaborate with others. |
Length
50 minutes
Resources
Plain text editor (not a word processor or an HTML editor)
Browser window
Links to CSS Zen Garden website to play with CSS code
*Some Free Text Editors Include: TinyMCE, 2. FCK Editor, NicEdit, BXE, MarkItUp!, WidgEditor, EditArea, Cross Browser Rich Text Editor, Library Rich Text Editor, FreeTextBox, TextWrangler Paid Software: BBEdit, Dreamweaver will help to write the code for students.
Lesson step-by-step
1. Building background — 5 minutes
Explain to students that CSS is short of Cascading Style Sheets – Formatting attributes that is used to style an element on the page. A style sheet is a collection of these styles that can either apply to a single page in your site, a range of pages, or your entire site. CSS help you to create a more manageable website. If you have ever used styles in Word or Indesign, you will have a pretty good idea as to how they work. For example, if you want all of your headlines to look the same, you can simply write a single style that controls all of your headings. Modifying a single stylesheet will change all of your styles (such as your headings) for the entire site. You can link CSS styles as an external file to all of the pages in your site and giving yourself the ability to control updates to your site’s formating through that one single file. (It doesn’t have to be an external stylesheet; there are several options as to how you will be placed).
2. Understanding the stylesheet — 30 minutes
Explain to students that there are two parts to a stylesheet rule: the selector and the declaration.
| Selector | Declaration |
| h1 | {font-family: Verdana; font-size: 1.2 em; color: #0000FF;}
Notice that each property is followed by a colon and after each value there is a semi-colon. Also make sure you use the { } to start the style and to end the style rule |
QUICK FORMATIVE ASSESSMENT:
(HTML Color Values – http://www.w3schools.com/html/html_colors.asp)
- Look up the code #0000FF and have students tell you what color is represented. _______
- What is the hex code for the color red? ________
- Write a CSS code to add a font, size and color for a headline.
- Syntax is so important to writing code. Ask students what punctuation follows the property and what punctuation follows the value?
MEASUREMENT: (What is an em?)
There are two different units of measurement in CSS:
- Absolute – Fixed unit, one that does not change based on any other factors
- Relative – Unit of measurement that looks for either a parent element or the user agent itself for a base value to begin with.
Points – Units of measurement for print design. 1/72 of an inch.
- To understand what a point looks like on a screen depends on the resolution of the monitor is set to and the operating system.
- AVOID using points for onscreen font measurement.
Understanding sizes
- An Em is the most popular relative measurement for onscreen sizing.
- An em is best described as being the equivalent of the size of a capital M for that particular font.
- An ex is equal to the x-height of that specific font.
- The size of the font can change dramatically as font-families are substituted (Helvetica, Verdana, Georgia, Arial, etc.)
- A percent value sizes the text to the percentage of its inherited or default value.
- Pixels are based on the current resolution of the viewing device. (relative unit) – you should avoid using pixels as a font-sizing since it could look much larger on one browser than another and it is not compatible with Internet Explorer (prior to version 7)
3. Practice activity — 10 minutes
Using the sample quote below, instruct students to add a sentence and adjust the same sentence and copy it at least 3 times on the same HTML page. You will want to adjust the sizes of the font to reflect the 1) relative size 2) absolute size and adjusted for 3) pixel sizes.
You will need to use an HTML text editor that will allow you to adjust CSS stylesheets. Save the file as an .HTML file and open it into a variety of browsers including Safari, Firefox, IE, and Chrome.
Sample Quote:
“You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.” ― Steve Jobs
4. Class discussion — 5 minutes
- What was different in each browser?
- Why is important to test your HTML document in different browsers and computers?