Apply Today to our Software Engineering Program & check out our scholarships!

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 and 10px or 50% 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.

Up Next