SUCCEED

8 Minutes

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
• Example:
  • 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.

5 Minutes

Teacher Input

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.

Student Exploration
Tell Students

• 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

Discussion
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
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

No physical modeling in this lesson.

35 Minutes

Guided Practice

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)

• You can add CSS to your document several different ways.
• Remember, in HTML there are two parts of your page -- the head and the body. Which of these does the CSS go in and why?(the head).
• Let's add a <style> tag to the head of the document. A type attribute will specify what language the styles are written in:

   <style type=&quot;text/css&quot;>
   </style>
  		

• All of your CSS will go between those tags.

CSS syntax (5 minutes)

• Each CSS statement consists of three parts: selector, property, and value.
  • Selector: we first select a part of the HTML that we are going to change using CSS. This can be a tag, class name or id.
  • Property: next, we say what we'll change about that part of the page. For instance, are we going to change the color of the background or the size of the text?
  • Value: finally, we choose what the value of that property should be; for instance, blue or 12 point.
• Writing a CSS statement should look something like this:

  selector {property: value;}
  		

• Example: If I wanted to change the font size for all paragraphs to be 15 pixels, I could say:

   p {font-size: 15px;}
  		

• Several properties can go inside the same selector, as long as there is a semi-colon after every property/value pair.
• A few notes:
  • When you type values, be sure to leave no space between the value and the units
  • If the value has more than one word, put it in quotes, i.e.,

    font-family: "Times New Roman"
    			

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

5 Minutes

Closure

• 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