Skip to content

Lab 3: Styling & DOM

This lab is worth 20 points total, and consists of two parts on the same page: Parts 1-3 are about styling and CSS and Part 4 is about DOM and JS. Submit all files together to Gradescope.

Getting Started

Download this lab03.zip file and extract its contents to a lab03 folder, somewhere in your cs343 folder (or anywhere else safe).

Open the cs343 or lab folder in VS Code. Remember to use the live preview/server feature when working with HTML files to see your changes in real time.

Style Overflow 💅

For this lab, you will take a naked (🙈) HTML page and apply CSS styles to make it look fab.

There will be less hand-holding in this lab, so be prepared! You will also learn a few more simple CSS selectors to use.

Objectives

  • Link an external stylesheet to an HTML page
  • Understand the difference between element, id, and class selectors
  • Write rules to style basic CSS properties such as font, color, size, margin, padding, and border
  • Style an HTML page according to an image by writing CSS rules

Context

Your friend, Taylor, has recently started a new business in town, “Style Overflow,” a beauty salon that specializes in hair, nails, and more. They’ve been learning some HTML on their own to create a website for their business, but would like your help, since you’re taking CS 343 right now at the best school in the world, JMU.

✨ Note

Do NOT use AI for this specific lab, even as a reference. It is too easy to have it generate the CSS styles for you. Please get familiar with CSS syntax and start to learn how to find the properties and values you need (like with reference guides and Google).

Part 1: Housekeeping 🧹💨

Open the style-overflow.html file in VS Code and open a live preview.

If you already see an error on your page…
  1. As you should pretty much every time you open your browser to preview your work, open your browser’s Dev Tools
  2. Show the Web Console
  3. You should see an error message similar to: 
    GET http://127.0.0.1:3000/favicon.ico [HTTP/1.1 404 Not Found 2ms]
  4. If you have this error, great job! 🏆 You’re supposed to 😅. You’ll fix in step 1 below.

Before we can really get down to business, let’s change a few things to the HTML.

  1. Add a “favicon”

    1. A favicon is the little icon that appears in the browser, next to the name of the page in a tab, or in a bookmark.
    2. You typically need to upload an image and link to it in the page’s <head>, like so:
      <link rel="icon" href="path/to/image.ico">
    3. Let’s do something more fun. Go to https://fav.mhciael.com/
    4. Take a look at the examples on the page of how to make an emoji 💇‍♀️ into a favicon using HTML.
    5. Go to your HTML and write the code from fav.farm in the <head> to add your own emoji favicon.
      • You just write:
        <link rel="icon" href="https://fav.mhciael.com/🦆">
      • Instead of a duck, replace that part with whatever emoji you want.

  2. Link to the CSS!

    1. We’ve kept our CSS styles in a separate file, in an “external stylesheet” called styles.css.
    2. In order to use those styles, we need to link to that file from the HTML.
    3. In the <head>, add a link to the styles.css file.
      • Hint: <link rel="stylesheet" href="...">
    4. Open the styles.css file in VS Code as well.

  3. Look at the CSS

    1. Arrange your windows/tabs so that you can see the HTML, the CSS, and the rendered page at the same time.
    2. Take a look at the style rules we’ve included:
      • nav a - this spaces out the links in the navigation bar
      • .horizontal - this is responsible for making an element’s children display horizontally
      • article - this puts a border around all article elements

    3. Let’s do a little analysis first:

      • What does the nav a rule do?
        • Does it style all a elements, or just some of them?
        • Which elements in the HTML will this rule apply to?
      • What does the dot (.) in front of “horizontal” mean in CSS?
        • Is “horizontal” an HTML element? No… what is it?
        • Where in the HTML code do you see the word “horizontal” used?
      • For the “article” rule, take a look at border, padding, and margin.
        • Change each of these values one at a time and observe what happens in the rendered page.
        • Make sure you understand the difference between these three properties!
      Answers
      • The nav a rule styles only the a elements that are descendants of a nav element.
        • That’s what multiple selectors with spaces means in CSS: “select elements that are inside other elements.”
      • The dot (.) in front of “horizontal” means that it is a class selector.
        • “horizontal” is the name of a “class” that can be applied to any HTML element.
      • The “article” rule applies to all <article> elements.
        • border is the outline around the element.
        • padding is the space between the border and the content inside the element.
        • margin is the space outside the border, between this element and other elements.

Part 2: Get Styling! 🌟

Now, you will write CSS rules to style the page so that it looks like this image (open and reference it!):

Styled page example

I recommend referencing these resources:

Follow the instructions in both parts 2 & 3 below for step-by-step guidance. I recommend going through them in order.

CSS Only

Do NOT modify any of the HTML after this point; you should only be writing CSS!

You should reference the HTML structure to figure out how to select the elements you need to style.

You must write a separate CSS rule for each of the objectives below. You should only use one rule per objective.

  1. Make the entire page use a sans serif font.

    • You may have many fonts on your computer, but does everyone else?
      • For now, use a web-safe font that is commonly available on most computers. You should also specify a “fallback” font, in case the first one isn’t available.
    • Hint: the “body” selector will apply styles to all visible content.

  2. Give the boxes in “Our Services” and “Our Stylists” a margin of 5px and a padding of 10px.

    • Each box should have exactly 5px of space around it.
    • The content inside each box should have exactly 10px of space from the outline.

  3. Make the tagline use a cursive font, give it a 20pt font size, and make it JMU purple.

  4. All text in a span with class “highlight” should be italicized and have a “lightyellow” background.

    • Hint: How do you select all elements with a specific class? You saw this earlier!
    • The color should be the named color lightyellow.

  5. Make all the prices bold and “green”.

    • Use the named color green.

  6. Make the phone number in the contact section have a 14pt font size and be “blue”.

That’s a great start practicing your CSS selectors and properties. You’ll finish up with some more difficult selectors!

Part 3: Complex Selector Styles 🎯

Continue your styling. The following instructions will require more complex CSS selectors and properties.

Reference the provided image again to see how the final result should look.

⚠️ Again, do NOT modify the HTML code! ⚠️

  1. Make the boxes for just the services have an “aliceblue” background.

  2. Make the boxes for just the stylists have a “lavenderblush” background.

  3. Make the images of the stylists have a rounded border (15px radius).

  4. Make only the links in the navigation bar have no underline, be “darkblue”, and have a 16pt font size.

  5. Make only the names of the stylists have a “darkred” color.

  6. Make just the text for the address italicized.

Part 4: Time for JavaScript ☕

Taylor wants Style Overflow’s homepage to advertise a rotating list of “Daily Specials,” but doesn’t want to hand-edit the HTML every time the specials change. Let’s write some JavaScript that builds this list dynamically from an array of data instead.

  1. Back in style-overflow.html, find the #specials section. Notice it’s empty except for an <ul id="specials-list"></ul>
    • You’re going to write JavaScript to dynamically fill out this list!
    • There’s a <script src="specials.js"></script> tag added at the end of the <body> so this file runs on the page.
  2. Open specials.js.
  3. Read and understand the provided createListItem(listEl) function.
    • It creates a new <li>, appends it as the last child of the given list, and returns it.
  4. Look at the specials array.
    • It’s an array of objects, where each object has a name and a price field, e.g. { name: "Haircut", price: 15 }.
    • You’ll use this array to build the list of specials.
  5. Complete the renderSpecials(specials) function. Hints:
    • Use a for loop to iterate over the specials array. (or a for...of loop if you prefer)
    • Don’t forget that each item in the array is an object with a name and a price field.
    • How do you get a DOM element in JavaScript? (document.getElementById() or document.querySelector())
    • The createListItem returns a DOM element. How do you set the text for a DOM element?

Test your code by opening the page in a browser and checking that the list of specials appears correctly.

JavaScript Debug Console

Don’t forget! Open the browser’s Dev Tools and show the Console to see any errors or messages from your JavaScript code.

Submitting

Upload style-overflow.html, styles.css, and specials.js to the corresponding Gradescope assignment.

(You do not need to zip them first.)