Lab 2: CSS
Goals
After the lab, you should know how to
- write valid CSS rules
- add semantic tags into HTML document
- use Developer Tools to inspect and edit CSS
Objective: Set Up
- ssh into the lab machines and then run labhelp so that I can keep track of the help queue.
- in another terminal, ssh into the CS web server
- Now, go into your
public_html/cs335
directory - Accept the assignment.
- Clone the git repository.
- Open the
css_practice.html
file and edit the stylesheet link and the image link appropriately. View the page to make sure it worked. (What is the URL for this page?) - Commit and push the changes you just made.
- On the machine where you're using the browser (e.g., your personal machine, the lab machine), clone the git repository. (So, you'll have two copies of the git repository -- this is the beauty of a distributed version control system like git.)
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.
- Add a
section
element to group the "Links" heading and the links into a section. - Wrap the section's heading in a
header
element. - This isn't semantic information, but enclose the footer's
paragraph and citation in a
div
. - Update the
h2
tag for "Images" so that it has anid
of "images". - Update the
h1
tag and thecite
tag so that they have aclass
of "highlights".None of these changes should have changed how the page looks.
- Validate the HTML
Objective: Using Developer Tools
For this objective, you will use tools in either Firefox or Chrome
to modify example.css
.
- 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. -
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 (
example.html
).
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.
- 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.
- Click on
example.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.
- 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. - Save the modified CSS file as
example.css
in your (local) git repository. (In Firefox, click the "Save" link near theexample.css
name. In Chrome, right-click and "Save as".) I don't want you to lose any of this work!After you have saved the CSS and pushed the changes and pulled the repository on the CS web server, when you reload your
css_practice.html
page, you should see all your changes that you made to the CSS.
Objective: Reviewing CSS
Read (most of) Chapter 4 of the text book to confirm your understanding of CSS. 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 and commit the modified CSS file
as example.css
in your git repository.
- Make
body
's background colorlightgray
. - Modify
h2
's color (and onlyh2
's color) to beteal
. - In the rule specific for
a:link
anda: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. - Modify the rule for
a:link
anda:visited
by removing the incorrect comment/*gold*/
. You should not see any difference in your page's presentation. - 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. Visit at least one link or add a link to a page you haven't visited so that you do see a difference. - Modify the font-size property in the rule for a:link, a:visited,
a:active to be
larger
. - Add a rule for
ul
andol
that sets the line-height to 150%. - Add a rule for
p
elements that sets the margin to 10px. - Add a rule to
h2
that the padding on the top is 10px. - Save your .css file.
- 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.
- Hover over an
h2
element with your mouse (to confirm it is anh2
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 withh1
andp
elements by hovering over them (to confirm their types) and then click on them. - Add rule (which means which tab should you be in?)
for
img
that makes the width of the image be 400px and adds athick
,dashed
border in yellow around the image. (Review the syntax on the CSS Reference page.) - Save your CSS file.
- 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?) - 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! - Save the modified CSS file. Do what you need to do to get it
synched up on the server. Confirm that
your
css_practice.html
page is being presented with your modified CSS. - 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?)
- Modify your
cs335/index.html
page to add a link to yourcss_practice.html
page under the "Submissions" heading. (5 pts)
Grading (70 pts)
Due by 11:59 p.m. tonight.
- Updated css_practice.html (15 pts)
- Updated, validated CSS (50 pts)
- Updated CS335 Page (link) (5 pts)