VISJ 321: HTML In Class #4

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, create two files: “index4.html” and “stylesheet.css” – save BOTH to your WWW folder.
  2. Add structural tags and a <title>
  3. In your HTML: Create a first-level heading and two paragraphs of text; make the second paragraph a different font; add a hyperlinked word; create a <div> of any size and color
  4. In your CSS:
    1. Change background color of <body>
    2. Make the font size of <h1> 36px
    3. Make your <p> red
    4. Give your <div> a border of 1px and a background color of blue
    5. Create a comment
  5. In your HTML, link to the CSS (three parameters, end with /) – Preview in your browser
  6. In your HTML, add a second <div></div> tagset – what happens?

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: