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 y2s19-css2
- Open
lab1.html
in your browser and take a look at it!
- In
lab1_styles.css
, add ahover
selector, so every link has a blue background color when you hover over it. - Open
lab1.html
in your browser and see what happens!
- In
lab1.html
, choose a specific paragraph, and give it an ID ofimportant_paragraph
. - In
lab1_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 inlab1.html
, containing the textWhat happens if you hover over me?
, with IDspan_cover
. - Now, add an additional div in
lab1.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
lab1.html
in your browser! - Select this div, by ID, and add the rule
display: none;
, as one of its rules inlab1_styles.css
. - Open
lab1.html
in your browser - does anything look different? - Add a rule in
lab1_styles.css
which says:
#span_cover:hover + #hidden_div {
display: block;
}
- Open
lab1.html
in your browser - what does it look like now? Go on W3 to figure out how this rule works!
-
Open
lab2-centering
in your browser, we've added some extra content - and all of the content is color-coded. Check out the linked style sheet to see what element is what color. -
Your task in this lab is to make the webpage look like this:
-
But the catch is that you can only edit the style sheet!
-
Hint - to tell if something is block vs inline, look at the background color! Is the background just big enough to fit? Also, remember inline elements don't make newlines (so they would need a
<br>
element for newlines). -
Hint - the text "Survey Time" is a
p
, so it gets centered when you center allp
elements. But unlike the otherp
's, this one is inside adiv
. How can you use advanced selectors to un-center this element? Remember, what is the left-margin of something not centered?
- Go have some fun with selectors here
-
In
bounce_styles.css
, make a@keyframes
component calledbounce
, with 2 frames, at 0% and 100%. -
Make it so the element has 0 opacity in the first frame and is scaled down to 1/10th of its usual size (using the
transform: scale()
) property -
Make the element be full-size and have opacity 1 in the final frame (the one labelled 100%)
-
In the CSS selector for the
svg
tag, add in theanimation
property -
Make the ball bounce for 2 seconds
- Use
animation-iteration-count
property, or use the shorthand- If using the shorthand, remember to put values for the properties you aren't setting
- Again, for hints, look at the reference website