Before we begin, make sure to fork and clone this repository as we did yesterday:
- Click the Fork button at the top right of the screen to make your own copy of the repository
- Clone it as we did before:
cd ~/Desktop
git clone <YOUR-REPO-URL>
cd y2s18-css2
Open lab1.html
in your browser. Take a look at it, before you make all your changes!
- In
lab1_styles.css
, give the header class a bottom border of 1 point solid gray. - Give it an all-around padding of 10px.
- Give it a padding of 10px on the left and right, and 15px on the top and bottom.
- Notice that the sidebar and main content are overlapping!
- Fix this issue by making the width of the sidebar smaller (see the slide on total width and height to adjust your calculations)
- Give it a 5 pixel wide, solid, blue border.
- Give it margins of 5 pixels all around.
- Add padding on the left and right of 15 pixels, and on the bottom of 10 pixels.
Your page should look like this when you're done:
- Look up why there has to be
margin:0
for the body. - Give the title a box shadow.
- Give the title text shadow.
- Remove the underline from the links in the sidebar.
- Open
lab2.html
in your browser and take a look at it!
- In
lab2_styles.css
, add ahover
selector, so every link has a blue background color when you hover over it. - Open
lab2.html
in your browser and see what happens!
- In
lab2.html
, choose a specific paragraph, and give it an ID ofimportant_paragraph
. - In
lab2_styles.css
, add a hover selector for this paragraph. Hovering over this paragraph should make the background color yellow, and the text size 40 point.
Hint: Check out the font-size attribute
- Now, for the remaining paragraph elements on the page, add them to a class
less_important_paragraphs
. - When you hover over any of the paragraphs in this class, make the font color blue.
- Add a
<span>
element, right before the last paragraph inlab2.html
, containing the textWhat happens if you hover over me?
, with IDspan_cover
. - Now, add an additional div in
lab2.html
, with IDhidden_div
. This div should contain the last paragraph of text in your website. Make sure this is below the<span>
element you previously created! - Make sure you can see this text, if you open
lab2.html
in your browser! - Select this div, by ID, and add the rule
display: none;
, as one of its rules inlab2_styles.css
. - Open
lab2.html
in your browser - does anything look different? - Add a rule in
lab2_styles.css
which says:
#span_cover:hover + #hidden_div {
display: block;
}
- Open
lab2.html
in your browser - what does it look like now? Go on W3 to figure out how this rule works!