Skip to content

Lab 3: Styling & DOM

This lab consists of two parts worth 10 points each. Part A is about CSS styles, and Part B is about JavaScript DOM manipulation. Submit each part separately 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.

Part A: 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).

Step 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.

Step 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!

Step 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.

Submission

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

Part B: Show Yourself!

Objectives

  • identify a common user experience issue with a website
  • write javascript to address the issue
  • test the js via the DevTools
  • apply the js to arbitrary pages via userscripts in the browser

Additional Context

As you’re reading through the Style Overflow page on which you’re consulting, you imagine you’re not a consultant, but someone (let’s say you’re “Al”) who’s trying to decide if Taylor’s salon is for them. It could happen that Al sees something interesting in one of the sections, ‘Those curls look perfect, and my friend Betty did say, if you see a good salon for modern cuts and coloring, you can call me Al!’

User Experience Issue

There’s a small problem though 👀:

When Betty clicks the link you sent, there are no curls!

The interesting detail you’re looking at when you send the link to your friend isn’t made obvious to your friend. The cool curls are “below the fold”.

Style Overflow webpage has the curls below the fold.

If the <section> headings were clickable, it’d be easier from some place deep in the page for you to send a link to your friend that goes closer to the part you intend them to see.

On Style Overflow, you could just help them change this since you’re consulting (after all, they already wrote id’s into the page 🙌, it’s how the nav functions), but this pernicious problem preventing passive perception of ‘portant pictures goes far beyond Style Overflow, and Al’s had enough! Why can’t those id’s just… show themselves?!

Show yourself 🎶

Every inch of DOM is trembling
But not from the load
Something feels discoverable
Like an element I see but can’t be told
I can sense you there
In the markup, all alone
I’m inspecting
And it feels like I’m home

I have always been a fortress
Divs nested deep inside
You have IDs, too
But you don’t help users find
Show yourself

Step 4: Plan the solution

  1. Consider a few websites that have this problem:

    • Style Overflow
    • Wikipedia (e.g. on your mobile device, read about Brinicles)
    • what other websites do you know of that do this?
    Answers: other web sites

    What about… this page?! 🤯 😵‍💫

    1. Make your browser window wide enough that the table of contents is showing on the right (i.e. at least 960px wide)
    2. Notice the choices available in the table of contents
    3. Notice that when you encounter the corresponding items in reading through the page, there is no feature to support you to get the link to the section (other than the table of contents, which hides at mobile widths [and narrower])

  2. Use the DevTools Inspector to look at the HTML of those pages.

  3. What would you change about the markup to make it so that the subsections were clickable to facilitate easier sharing of more precise links? Write a brief description of your proposed changes, then change the html to align with your proposal

    Answers: propose markup changes

    What if instead of the id attribute being set only on the semantically meaningful element such as headings, those elements could additionally be “links” (anchor tags)?

    <h3 id="step-4-plan-the-solution">Step 4: Plan the solution</h3>
    ⬇️ 
    <h3 id="step-4-plan-the-solution"><a href="#step-4-plan-the-solution">Step 4: Plan the solution</a></h3>

Step 5: Write JS to alter the DOM

In the previous step you wrote a little HTML to make an element have a link. This fix requires that you have privileged access to the server, i.e. not just the ability to visit the page, but the ability to edit it.

Of course, like most sites on the web, 🚨 Y’ALL DON’T HAVE OUR PERMISSION TO EDIT THIS SITE 😳.

How about if you could tell your browser to remember that you’d like to run a little Javascript code on this website every time you visit it?

Enter UserScripts 👋🛠️🐶

If you haven’t already, install a userscripts extension for your web browser.

To prepare to author your userscript, revert your most recent changes to the html made in the previous step.

Timeline

Check this out:

  1. right-click on the html file in vscode’s Explorer View
  2. Choose Open Timeline…
  3. click on the top-most entry in the TIMELINE view
  4. see a diff of your most recent saved changes! 🏆

Write some Javascript that accomplishes the same a similar result, i.e.

  1. given a variable elem that refers to an element that:
    1. has its id attribute set,
    2. is not an <a> (its nodeName is not 'A')
  2. create a new hyperlink element that
    1. links to the given element’s id
    2. has a Pilcrow () as its content
      • though honestly an octothorpe, or even an emoji would probably have worked well too 🤔
    3. has the class: jmucs-cs343-show-yourself
  3. add this new hyperlink element as the last child of the given element

  4. How can you test this code? Give at least 2 ways.

    Answers: testing js 2 ways
    1. While on one of the pages we identified in Step 4, paste your code into the Web Console of the Browser’s DevTools
      1. make a new html file named testuserscript.html in vscode.
      2. in the new file type a single exclamation point (!) and except the suggested completion
      3. in the body of the stubbed out html file, add a few headings, each with (unique to the page) ids
      4. as the last child of the body, add a script tag
      5. paste your js in the script tag
      6. Live Preview: Show Preview (External Browser)

      Alternatively, make a quick html for testing:

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick test</title>
    <link rel="icon" href="https://fav.mhciael.com/🧪">
</head>

<body>
    <h1 id="h1">1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tempora nulla aliquam, nemo saepe fugiat nihil
        laborum autem beatae deserunt mollitia iure ex, aut nostrum libero. Laboriosam voluptates earum quidem.</p>
    <h2 id="h2">2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tempora nulla aliquam, nemo saepe fugiat nihil
        laborum autem beatae deserunt mollitia iure ex, aut nostrum libero. Laboriosam voluptates earum quidem.</p>
    <h2 id="h21">2.1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tempora nulla aliquam, nemo saepe fugiat nihil
        laborum autem beatae deserunt mollitia iure ex, aut nostrum libero. Laboriosam voluptates earum quidem.</p>
    <h3 id="h3">3</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tempora nulla aliquam, nemo saepe fugiat nihil
        laborum autem beatae deserunt mollitia iure ex, aut nostrum libero. Laboriosam voluptates earum quidem.</p>
    <h4 id="h4">4</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tempora nulla aliquam, nemo saepe fugiat nihil
        laborum autem beatae deserunt mollitia iure ex, aut nostrum libero. Laboriosam voluptates earum quidem.</p>

    <script>
        // YOUR CODE HERE
    </script>
</body>

</html>

Note: we changed it to only have the new hyperlink have a single character of content so that it doesn’t so thoroughly wreck the layout of the page.

Answers: create and add hyperlink to id 
const link = document.createElement('a');       // create a new hyperlink
link.href = `#${elem.id}`;                      // make new hyperlink link to elem's id
link.textContent = '¶';                         // has Pilcrow as its content
link.title = 'Link for this element';           // whatever we fancy out her'
link.classList.add('jmucs-cs343-show-yourself');// has the class
elem.append(link);                              // add link to page as last child of elem

Step 6: Test as a UserScript

We’re almost there! 😅
  1. We have identified a problem on sites we don’t have permission to edit
  2. We identified changes to the HTML that would address the issue
  3. We have drafted some Javascript we can run in our own client (browser) to fix the problem by manipulating the DOM.

Now we just have to put your code into a userscript, and provide for some of the previous assumptions.

  1. Using your new browser extension, create a new userscript.
  2. paste the code from show-yourself.js in the bottom of the new userscript file
  3. Complete the TODOS as commented in the script

Submitting

Submit to the gradescope assignment.