HTML #3: CSS

Today we learn about CSS, a more elegant and streamlined way of adjusting the style of our webpages (see the previous three weeks for review). The following instructions are based on this week’s Codecademy module: CSS: An Overview:

As always, remember these basics for coding and previewing your work:

To preview in TextWrangler:

  1. In Chrome, go to File > Open File… and open “index4.html”
  2. Command-Tab to select TextWrangler and write code
  3. Command-Tab to select Chrome and Command-R to refresh your webpage

Complete these instructions:

  1. Create a WWW folder (or use your previous one). In TextWrangler, open the file I’ve sent you (“index3.html”) and create a new one, “stylesheet.css” – save BOTH to your WWW folder.
  2. Change <title> to something new
  3. In your HTML: Preview html3 in Chrome. Notice which paragraph is different. In your code, identify how that happened.
  4. Change the style of paragraph three in some way (use Google!).
  5. Add a link to paragraph three.
  6. After paragraph 3, create a < d i v >(look it up!). It will be empty for now.
  7. In your HTML <head>, link to the CSS (three parameters, end with /)
    1.  <link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/>
    2. Preview in your browser (it should look the same)
  8. In your CSS, change the style of <p> by doing the following:
    1. p { }
    2. In the { }, enter “font-family: Verdana;” (no quotes)
    3. Save and refresh your webpage – did it change?
    4. If so, notice paragraph two is still unchanged – why?
  9. Once you get this, try these other changes.
    1. Make the font size of <h1> 36px
    2. Make your <p> red
    3. Give your <div> a border of 1px and a background color of blue
    4. Create a comment
  10. In your CSS, change the <div> style to a specific height (e.g., 200px), width, and background-color. Save and refresh to see what happens.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: