Lab: CSS cont...
Goals
- Practice writing basic, but some more advanced perhaps, CSS rules
- Practice using ids and classes
- Start using debugging tools, like Developer Tools in Chrome
- Validating CSS code
Overview
In this lab you will try to come up with yet a different presentation (look) for the two web pages you worked with last week.
In the process you are encouraged to use Chrome's Developer Tools, found under Chrome --> View --> Developer --> Developer Tools.
Finally, please Validate your css as you go, piece by piece, so at the end you have a nice and correct set of rules.
The following resources should be helpful:
We recommend that you open the links above in separate Tabs in your browser, so you have them easily available for reference.
Setup
Connect to the CS server and download the folder labs/lab4
to your Desktop. Rename that folder
to include your and your partner's user names. (for example: lab4_sk1_ps23)
Open the local file wellesley.html
in Chrome.
This file is your starting point for this lab; as you may recall from last week it's a simple, un-styled HTML page.
At this point, under
View --> Developer --> Developer Tools
open the Developer Tools, to see them side by side with the wellesley.html page, on your browser's window.
In a different tab open lecture notes on more CSS.
In yet an other tab open the w3schools CSS
online documentation
Start your work
Your task is to add style to this page (and as time permits, to the second htlm page in the downloaded folder). The end result you are aiming is up to you. We suggest that you use your notebook and colored pencils, or the white board and markers, to think and -with your partner- design a look for your web page(s) before you start writing the css rules. This way you have an idea about what you are aiming for.
Now, in Atom, create a file, name it style2.css, add a simple css rule there, and link it to the wellesley.html document. Make sure the two documents are successfully linked.
Here are a few ideas/suggestions on what you may want to include in your css rules:
- color names, hexadecimal color codes (like #FA0000), and rgb(a) color codes (like rgb(250,0,0))
- absolute but also relative sizes, like 10px, 0.5cm, but also 120%
- font families
- boxes, with margins, padding, border styles
- background color and background image, background attachment and position
As you are designing your web page, try to employ:
-
different selectors, like
- type selector, e.g. body, footer, all unordered lists, or all paragraphs:
p{ ....... }
- class selectors, e.g. elements in the class "centerP:, or "smallImages":
.centerP{ ..... }
- id selectors, e.g. the element with id "beliefs":
#beliefs{ .... }
- descendant selectors, e.g. elements within another element:
nav a {
}
The above rules will style the links within the nav element.
- pseudo-classes, like visited links, or links hovered-over:
.center a{ ... }
Validate
Run your CSS code through the CSS Validator to check for any problems.
Style other pages
Now that you are done with styling the wellesley.html
page, go ahead and do
the same with the isheau-wong.html
page, which is provided for you.
Of course you will use the style sheet that you have already created!
If time permits, you can create and style more pages for other alums.