Skip to main content.

Lab 1: CSS and Tools

Goals

After the lab, you should know how to

  1. write valid CSS rules
  2. Add semantic tags into HTML document
  3. use Firefox's [Web] Developer Tools to inspect and edit CSS

Objective: Modifying a CSS file (45 pts)

For this objective, you will use tools to modify example.css for the original example.html page that you copied in the last lab.

  1. Make a directory within your public_html/cs335 directory called submissions
  2. Copy (or move) example.* into your submissions directory. (If necessary, copy the files from /csdept/courses/cs335/handouts/lab0)
  3. Change the name of example.html to lab1_practice.html
  4. Open your lab1_practice.html in a new browser window. This step is important so that you don't lose your modified CSS while reading these directions.
  5. In the new browser window that displays lab1_practice.html, go to the menu, then "Web Developer" tool, then select "Style Inspector". This should open the Web Developer tools, and you'll be on the "Style Editor" tab. Alternatively, if you right-click in the window, you can select "Inspect Element" and see the same thing. Click on the "Style Editor" tab to get to the right place.

    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, if you want. You can make the Developer tool window larger by dragging the divider.

  6. 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". This will focus you on the "main" css files.
  7. Click the eye icon (and then click it again) for each css file so that you can see what CSS each CSS file contributes.
  8. Click on "example.css" (or whatever you called it), so that we can edit its contents "live".
  9. In the Style Editor pane, modify the font-size of the body tag to be 10 pt. 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.
  10. Make body's background color lightgray. (Autocomplete should help with these tasks.)
  11. Throughout this objective, periodically save the modified CSS file as example.css (or whatever you called it) in your submissions directory by clicking the "Save" link near the example.css name. I don't want you to lose any of this work! You may need to click the "Browse for other folders" arrow to get the directory you want. After you have saved the CSS, if you reload your lab1_practice.html page, you should see all your changes that you made to the CSS.
  12. Modify h2's color (and only h2's color) to be teal.
  13. In the rule specific for a:link, 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.
  14. Modify the rules for a:link and a:visited by removing the incorrect comment /*gold*/. You should not see any difference in your page's presentation.
  15. Change the color of the a:link to be #0033cc 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.
  16. Modify the font-size property in the rule for a:link, a:visited, a:active to be larger.
  17. Add a rule for ul and ol that sets the line-height to 150%.
  18. Add a rule for p elements that sets the margin to 10px.
  19. Add a rule to h2 that the padding on the top is 10px.
  20. Save your .css file.
  21. Now, let's look at a particular element's style information. Click the "Inspector" tab. Then, click the pointer icon to 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.
  22. Hover over an h2 element with your mouse (to confirm it is an h2 element) and then click on it. In the middle 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.

  23. Add a rule (which means which tab should you be in?) for img that adds a thick, dashed border in yellow around the image. (Review the syntax on the CSS Reference page.)
  24. Save your CSS file.
  25. Edit lab1_practice.html such that the h2 tag for "Images" has an id of "images". Reload the page. There shouldn't be any changes (except perhaps that you're seeing the changes that you made to the CSS in the previous steps).
  26. Add a new rule to your CSS for the id "images" that some how sets it off/differentiates it from the other h2 elements.
  27. For the last time, save the modified CSS file as example.css in your submissions directory.
  28. Reload your lab1_practice.html page to make sure that it is being presented with your modified CSS. If not, check that your CSS file is in the correct directory.
  29. Validate that your CSS adheres to the specification. If your CSS (rather than the Bootstrap CSS) is not valid, fix your CSS.
  30. Modify your cs335/index.html page to add a link to your lab1_practice.html page under the "Submissions" heading.

Objective: Adding Semantic Information Into an HTML Page (10 pts)

Update your cs335/index.html page to include semantic HTML tags.

  1. Add a section element to group the "Submissions" and the links (well, just one link so far) into a section.
  2. Wrap the section's heading in a header element.
  3. Validate the HTML

Objective: Creating Your Own Home Page (45 pts)

Now, it's time to get creative! Modify your home page (~yourname/index.html) and yourname.css to personalize its content and presentation.

I don't want to stifle your creativity too much, but your home page must contain:

Other than that content, you have free reign over this web page. Make it your own! (Of course, be tasteful; anyone can see this page.) Some ideas about the content that you might put on this page

There are lots of options! We can brainstorm to come up with something that you'll find interesting.

Presentation: I encourage you to try out a Bootstrap-based or other framework example. There are lots of free ones available. Try to find something that matches you. I modified a theme from bootswatch for the course web site. A former student recommended bootsnipp. W3 Schools Bootstrap Tutorial

There are a few requirements for successful completion of this part of the lab:

  1. Your home page should contain at least 12 different HTML elements and should reflect your personal style with appropriate rules for these elements in yourname.css (or whatever you named your css file). (12 different types may sound like a lot, but you always have at least 3 by default--html, head, and body--and you'll probably have a title, a heading, some text, and a link, so you have 7 right there.)
  2. Define at least one [new -- not given in example] style for an element of a specific class. You'll need to define the style for the class in the CSS file and make an element in your web page be a member of that class.
  3. Include one inline style in your page and document where that is in comments so that when I view your HTML source code, I can easily find it.
  4. Include at least one semantic HTML element. The examples that use Bootstrap often use these elements.
  5. Validate that your HTML adheres to the specification and that your CSS adheres to the specification by using the CSS Validator If your CSS or HTML is not valid, fix them. (You can ignore the errors if they are in Bootstrap.)

Add a favicon for this page too, if you want.

Extra Credit (up to 5 points)

Add a div element in your web page. 5 points for using it once and applying a style to the html inside of it.

Grading (100 pts)

Due by 11:59 p.m. tonight.