Focus and Review: What is HTML?
Remind students what they have previously learned about HTML:
- It's a language to represent the content of a web page
- Say that we have a newspaper article to put on the web. We would put the text -the content- into an HTML file.
- HTML lets us divide up the text into different chunks:
- what the title of the article is
- who the author is
- where each paragraph starts and ends
- Ask the class to recall HTML tags that could be used to divide up a newspaper article
- Remember, however, that an HTML page won't look like a finished web page, because it only has content and no "presentation" or "style"
Tell the students:
- Today, you will be learning about Cascading Style Sheets, or "CSS" for short.
- CSS is a language that applies presentation/style to your HTML web page.
- CSS doesn't represent any content; it only changes the appearance of existing content.
Ask the students,
- Why do you think HTML and CSS are two separate languages
- Why is it important to keep content and presentation separate?
- Here's an example: Say that you have a website with 1,000 pages. Each has a title with blue, italic text. What if you want to redesign your site so that all titles are red?
- If your content and presentation bound together, you would have to change it on each page - 1,000 times.
- If your presentation was separate, you could change it in just one file and it would apply to all the content on your site.
Tell the students:
- Now we're going to look at some examples of CSS.
- Pretty much any website you look at uses CSS, but the CSS Zen Garden website is a great example.
- This website shows how you can apply different presentation styles to the same content. Demonstrate the website from your browser, and show how clicking on different links changes the look.
- Now I will let you explore this website. As you change between designs, keep in mind what changes and what doesn't change.
- Open your computers and go to www.csszengarden.com
Ask the students, what changed and what did not change?
- font color, size, family; background color and image; layout of elements on the page; etc. change
- content (text) does not change
Review the difference between content and presentation by asking students whether each example would be defined using a content language (HTML) or a presentation language (CSS). Ask them to explain why before you confirm the answer:
- These words are a title on my page - HTML (h1 tag/title tag)
- The text on my web page should be blue - CSS
- Headers in my document should be bold, 24pt - CSS
- This text is one cell of a table of data - HTML (td tag)
- I would like to place a photograph on my website - HTML (img tag)
- I would like this photograph to show up in the background of every page of my site - CSS
Physical Modeling and Measurement
No physical modeling in this lesson.
Tell the students:
- Now we are going to add some CSS styles to the plain web page I have given you.
- Follow along on your computers. Together, we'll write the CSS to make your page look nicer.
- Start by opening the HTML document in TextWrangler (drag it onto the TextWrangler icon), so that we can edit the code. Also, open the same document in Safari so that we can see what the changes we're making look like.
Adding CSS to your document (8 minutes)
CSS syntax (5 minutes)
Examples on Your Webpage (30 minutes)
styled.html: Download File
unstyled.html: Download File
- Tell the students: Let's write some basic styles for your webpage.
- Start by adding the styles from "Phase 1" of the CSS in the sample file "styled.html." For each CSS statement:
- Tell the students what you want to do visually
- Ask them what CSS selector they would use
- Lead them through entering the property and value
- If students are catching on quickly, let them come up with the "Phase 2" styles alone; otherwise, lead them through.
- Finally, tell the students that CSS can also be used for page layout. Walk through "Phase 3" as an example, explaining:
- How divs act like boxes, which can have certain dimensions (width/height)
- The difference between margin and padding (margin is outside the border; padding is inside the border)
- Floating, and items can only be floated horizontally, as if they are floating on the surface of water.
- Try adding some other styles to your webpage.
- To find more properties and values to use, visit: http://htmlhelp.com/reference/css/properties.html
- Ask students to recall the difference between content and presentation, and why they are kept separate
- Ask for a reminder of the structure of a CSS statement
- Ask for examples of property/value pairs used in this lesson
- Remind students that they can apply CSS to their own web pages at home, for free, using any text editor and any web browser.
- You could ask the review questions on content vs. presentation during the conclusion section rather than at the end of the exploration section