Objectives

• Practice using the fundamentals of CSS that were explored in lecture.

Setup

0. Create a new project folder and connect it to a github repository. Copy this README.md file into it.
1. Create an index.html file and a styles.css file.
2. In the head element, link the two files together via the link tag.

Build the HTML Structure

3. In the body element, create a div with an id of "container".
4. Add 4 div elements with a class name of "boxes" and a unique id (box1, box2, boxN) inside the container div.

• Each added div will be a child of the container div and a sibling to each other.

5. Create a h2, p, and an anchor element inside of each of the 4 div's.

• h2: A story title.
• p: A story description.
• a: Read Me.

6. Add some text for the heading, paragraph, and anchor elements.

Now, Lets style!

7. Assign a global font family.

• Here is a list of some Web Safe Fonts: https://www.w3schools.com/cssref/css_websafe_fonts.asp
• You could also play around with Google Fonts: https://fonts.google.com/
• { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }

8. Change the background color for the body element: *the two forward slashes indicate a comment.

• The HEX value (#XXXXXX) is the HEX equilvalent to lightgray (you can use either one in this drill).

9. Use a multiple selector rule set to center the text for all h2, p, and a elements.
10. Use an element selector to remove the default underline styles for a anchor element and change the font color:

• When you refresh your browser you'll notice that the link is not centered like the h2 and p elements.
• This is because text-align will center the element based on the width assigned to it.
• If you apply a border to the link tag, you'll see that the link is centered inside the anchor element.
• The best way to center the link, relative to its parent element, is to enclose it inside of a div element.

11. Wrap the anchor element inside of the div and give the div a class name of "readme-wrapper".
12. Replace the a in the multiple selector rule with ".readme-wrapper".
13. Now, refresh and you'll see the link is centered as we expected it.
14. Use a class selector to target the ".boxes" class:
15. Change the display to inline-block:

• Add margin.
• Add padding.
• Add a solid border.
• Add a border radius to round the edges of the border.

16. Add a CSS :hover selector so that when the link is moused over the cursor changes to a pointer, the font is bold, and text color changes.
17. Wrap a single word in each paragraph element inside of a span element and assign it a new font color and font weight.
18. Change the display to block in the class selector named ".boxes".
19. When you refresh the page, you'll see each div now takes up the entire row.
20. Add a width of 20% to each div with the class ".boxes".
21. Use an id selector to add an unique background color to each div.
22. Change the position of the second div to be relative to its parent.
23. Position the second div so that it is next to the first div.
24. Change the position to absolute.
25. Position the second div to the top right corner.
26. Remove the position styles for the second div.
27. The second div should now be returned to the normal flow.
28. Add a new div element as a child inside each of the 4 div elements (we'll use this div to represent an image).
29. Give the new div a class name.
30. Assign a width, height, and background color to the div.
31. Position the div so its inline and to the left of the header.

Styling Specificity

32. Insert 3 h1 tags into the html document, give each text for your favorite tv shows.
33. Apply styling so that any and all h1’s have a font color of your choice.
34. Add 2 more h1’s with 2 other tv shows, what immediately happens to their font color when you refresh the html doc?
35. Give the original 3 h1’s all the same class.
36. Give the additional 2 h1’s the same class (have it be different than the other 3).
37. Apply styling by class name, have the first 3 h1’s get a new font color, don’t delete or comment out the original styling.

• Once you apply a new font color by class, refresh the page and see what it does.

38. Do the same thing for the added 2 h1’s, give them a different font color by class name.

• Take note at what styling applied to a class does to what was already applied to ALL of the elements before.

39. Rank each tv show you have (so all 5 h1’s), a rank of show1 would be the best. Have the rank be the id of each h1.

• At this point every h1 should have a class AND an id attribute.

40. Apply styling using the id of each h1, give each a different color.

• Refresh the document and see how this type of styling changes what was already applied.
• Create 3 unordered lists each with 5 items.
• Have the first list be 5 friends names.
• Have the next be 5 places you want to travel to.
• And have the last list be your favorite restaurants.

41. Apply the same steps covered in the directions to play with the specificity of styling on each of these lists.
42. Wrap each list in a div, give the div a border that is 2 pixels thick, have it be solid and the color be black.