Skip to main content.

Lab 1: CSS and Tools

Goals

After the lab, you should know how to

  1. write valid CSS rules
  2. use the Web Developer plugin to validate CSS
  3. use a tool (e.g., Web Developer, Firebug) 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 cs335 directory called submissions
  2. Copy (or move) example.* into your submissions directory. (You may need to copy the files from /csdept/local/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 the directions.

    5. For the following directions, I am assuming that you're using the WebDeveloper CSS editor tool. You can use Firebug or Chrome's Developer tool (although it wasn't clear to me how to save the CSS edits in the latter). It's important that you know how to use one of these tools.

  5. In the new window that displays lab1_practice.html, under the "Web Developer" tool, select "CSS" and then "Edit CSS".
  6. The CSS editor tabs will probably show up at the left of the page. You can click the button that looks like a window frame to change the position of the tool, if you want. You can make the CSS editor window larger by dragging the divider.
  7. In the CSS editor, modify the font-size of the body tag to be 10 pt. You should see the page update automatically.
  8. Make body's background color silver.
  9. Modify h2's color to be teal.
  10. 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.
  11. Throughout this objective, periodically save the modified CSS file as example.css in your submissions directory by clicking the "Save" icon, which looks like a down arrow over a computer monitor. I don't want you to lose any of this work! You may want 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 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.
  13. 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 these links, you may or may not see a difference.
  14. Modify the font-size property in the rule for a:link, a:visited, a:active to be larger.
  15. Add a rule for ul and ol that sets the line-height to 150%.
  16. Add a rule for p elements that sets the margin to 10px.
  17. Add a rule to h2 that the padding on the top 10px.
  18. Turn on the style information tool by selecting "WebDeveloper" then "CSS" then "Display Style Information". Hover over an h2 element with your mouse (to confirm it is an h2 element) and then click on it to view its style information. Compare h2's code with h1 and p elements by hovering over them (to confirm their type) and then click on them.
  19. Add a rule for img that adds a thick, dashed border in yellow around the image. (Review the syntax on the CSS Reference page.)
  20. Save your CSS file.
  21. 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).
  22. Add a new rule to your CSS for the id "images" that some how sets it off/differentiates it from the other h2 elements.
  23. For the last time, save the modified CSS file as example.css in your submissions directory.
  24. 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.
  25. Validate that your CSS adheres to the specification by using the Web Developer plugin. Right click, select "Web Developer", select "Tools", and select "Validate CSS". If your CSS is not valid, fix the CSS.
  26. Modify your cs335/index.html page to add a link to your lab1_practice.html page under the "Submissions" heading.

Objective: Creating Your Own Home Page (55 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, 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 Boostrap-based 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. (W3 Schools Bootstrap Tutorial ) A student recommended bootsnipp

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

  1. Your home page should contain at least 10 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). (Ten 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 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. Validate that your CSS adheres to the specification by using the Web Developer plugin. Right click, select "Web Developer", select "Tools", and select "Validate CSS". If your CSS is not valid, fix the CSS.

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

Extra Credit (up to 10 points)

Use the div tag in your web page. 5 points for using it once and applying a style to the html inside of it. Earn additional points for additional uses of the div tag.

Grading (100 pts)

Due by midnight tonight.