Skip to main content.

Lab 2: CSS

Goals

After the lab, you should know how to

  1. write valid CSS rules
  2. add semantic tags into HTML document
  3. use Developer Tools to inspect and edit CSS

Objective: Set Up

  1. ssh into the lab machines and then run labhelp so that I can keep track of the help queue.
  2. In another terminal, ssh into the CS web server
  3. Now, go into your public_html/cs335 directory
  4. Get the starter assignment:
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/resources/starter_css_lab/css_practice.html
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/resources/starter_css_lab/practice.png
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/resources/starter_css_lab/practice.css
  5. View css_practice.html in your browser. (What is the URL for this page?)
  6. Open the css_practice.html file in a text editor and edit the stylesheet link and the image link appropriately, if necessary.

Objective: Updating an HTML Page (15 pts)

Update the css_practice.html page to include semantic HTML tags, divs, classes, and ids. All of this is to help with styling our page.

  1. Add a section element to group the "Links" heading and the links into a section.
  2. Wrap the section's heading in a header element.
  3. This isn't semantic information, but enclose the footer's paragraph and citation in a div.
  4. Update the h2 tag for "Images" so that it has an id of "images".
  5. Update the h1 tag and the cite tag so that they have a class of "highlights".

    None of these changes should have changed how the page looks.

  6. Validate the HTML

Resources

Objective: Using Developer Tools

For this objective, you will use tools in either Firefox or Chrome to modify practice.css.

  1. Open your css_practice.html in a new browser window. This step is important so that you don't lose your modified CSS while reading these directions.
  2. In the browser window that displays css_practice.html,
    • Firefox: go to the menu under "Tools", then "Browser Tools", then "Web Developer Tools". This should open the Web Developer tools, and you'll be on the "Inspector" tab. Alternatively, if you right-click in the window, you can select "Inspect" and see the same thing.

      Click on the "Style Editor" tab to get to the right place.

      The left sidebar shows you the CSS files the page is using. Click on the settings icon in the left sidebar, and uncheck "Show original sources" (if it isn't already). This will focus you on the "main" css files.

      Click the eye icon (and then click it again) for each css file so that you can see what CSS each CSS file contributes.

    • Chrome: go to the menu under "View", then under "Developer", then "Developer Tools". Alternatively, you can right-click the menu and select "Inspect" to the see the same thing.

      Click on the "Sources" tab to get to the right place. Expand the folders until you see the CSS for this lab (practice.css).

    The Web Developer tool will probably show up at the bottom of the page. You can click on the options on the right to change the position of the tool or pop it out of the window. You can make the Developer tool window larger by dragging the divider.

  3. Click on pratice.css, so that you can edit its contents "live".

    Note that this does not change the CSS file that is on the server. It's just allowing you to play with the CSS.

  4. Modify the font-size of the body tag to be 10 pt. (Autocomplete should help with these tasks.) The page should update automatically. You should now see a * next to the css file name in the left, so you know it's been changed.
  5. Save the modified CSS file as practice.css on your personal machine. (In Firefox, click the "Save" link near the practice.css name. In Chrome, right-click and "Save as".) I don't want you to lose any of this work!
  6. Secure copy the modified file to the CS web server. Make sure that you put it in the appropriate place on the web server.

    After you have saved the CSS and copied the modified file to the CS web server, when you reload your css_practice.html page, you should see all your changes that you made to the CSS.

    7. Your browser may be helping you by caching the style sheet and not fetching it again. Typically, that would be helpful, right? Why bother spending that time/resources fetching a file that hasn't changed? But, you know it did change, so you can force the reload.

    To force the reload (and skip the cache), I usually just hit Command/Control-Shift-R. You can also press Shift and the click the Reload button.

Objective: Reviewing CSS

Read (most of) Chapter 4 of the text book to confirm your understanding of CSS. Read section 4.5 before attempting the quiz in 4.4. See the Assignments page of the textbook for more information.

Objective: Continuing to Modify the CSS File (50 pts)

Now that you reviewed CSS some more, you're ready to go! Back in the browser, you'll edit the CSS file.

Throughout this objective, periodically save the modified CSS file as practice.css to your computer.

  1. Make body's background color lightgray.
  2. Modify h2's color (and only h2's color) to be teal.
  3. In the rule specific for a:link and a:visited, comment out "text-decoration: none;" because that property was already specified by the above rule. You should see no change in the page's presentation.
  4. Modify the rule for a:link and a:visited by removing the incorrect comment /*gold*/. You should not see any difference in your page's presentation.
  5. Change the color of the a:link to be #440044 to help distinguish visited and unvisited links. (Why would users want to distinguish between the two?) Depending on if you visited any of these links, you may or may not see a difference. Visit at least one link or add a link to a page you haven't visited so that you do see a difference.
  6. Modify the font-size property in the rule for a:link, a:visited, a:active to be larger.
  7. Add a rule for ul and ol that sets the line-height to 150%.
  8. Add a rule for p elements that sets the margin to 10px.
  9. Add a rule to h2 that the padding on the top is 10px.
  10. Save your .css file.
  11. Now, let's look at a particular element's style information. Click the pointer icon on the left. As you move your mouse over the page, note how elements get boxed and highlighted. The element's corresponding HTML code is highlighted in the Inspector tab.
  12. Hover over an h2 element with your mouse (to confirm it is an h2 element) and then click on it. In another pane, you'll see the CSS rules that are applied to this element and which CSS files they come from.

    Compare h2's code with h1 and p elements by hovering over them (to confirm their types) and then click on them.

  13. Add rule (which means which tab should you be in?) for img that makes the width of the image be 400px and adds a thick, dashed border in yellow around the image. (Review the syntax on the CSS Reference page.)
  14. Save your CSS file.
  15. Add a new rule to your CSS for the "highlights" class: make the background yellow, center the text, and make the font small caps. (Note that you won't see a change in centering for the cite element. Why not?)
  16. Add a new rule to your CSS for the id "images" that somehow sets it off/differentiates it from the other h2 elements--CSS developer's choice!
  17. Save the modified CSS file. Copy it to the server. Confirm that your css_practice.html page is being presented with your modified CSS.
  18. Validate that your CSS adheres to the specification. If your CSS (rather than the Bootstrap CSS) is not valid, fix your CSS. (Why did we have to wait until here to check that the CSS is valid?)
  19. Modify your cs335/index.html page to add a link to your css_practice.html page under the "Submissions" heading. (5 pts)

Grading (70 pts)

Due by 11:59 p.m. tonight.