Want to go back?
CSS (The Style)
CSS allows us to “dress up” the content on our page.
Tour the Existing CSS
Take a few minutes to explore the CSS code in the CodePen. Do not worry about the JavaScript yet!
Here are some guiding questions:
- How do we indicate which HTML element we’d like to apply the styling to?
- What are some properties you see that make sense to you? (i.e.
width
) - What are some properties you see that do NOT make sense to you? (i.e.
border-radius
) - What do you think
px
means?
Modify the CSS
Let’s make some changes to this CSS code. Be sure to click Run
after each edit to see the changes!
- Change the color of the
h1
to:color: rebeccapurple
(line 3) - Change the font of the
h2
to:font-family: cursive
(line 7) - Change any of the colors or fonts you’d like to! Only make changes to lines 1-17.
Note: Use this list to find more colors! You will notice that we can use both a hex code or a color name as values for color properties.
CSS Summary
- CSS allows us to target an element and write specific rules for it to follow.
- Based on the type of rule, CSS will expect different values (ex:
darkgreen
or a hex code for a color and10px
or50%
for a measurement). - There are many types of rules we can write; with practice, we become familiar with more but don’t need to memorize them all.