Apply within 30 days to take advantage of the $2,500 tuition discount!

Back to Setup Page

Modifying the CSS

CSS allows us to “dress up” the content on our page.

Tour the Existing CSS

  • CSS allows us to target types of elements (ex: h2, p) and specific elements based on class name (ex: card-title)
  • Once we’ve targeted an element, we can write rules for that element to follow. Rules can be things like “the font-size of this element should be 20px” or “the maximum width of this element should be 70% of the width of the page”

Explore to Learn

Now click the CSS button on your embedded CodePen file below. Complete each of the following tasks, and click rerun to observe the changes in the mini-browser. If you like the change, keep it!

  • On line 2 of the css file (background: #023047;), change #023047 to darkgreen
  • On line 8 (color: #023047;), change #023047 to purple
  • On line 12 (width: 70%;), change 70% to 40%
  • On line 18 ( margin: 30px;), change 30px to 50px You will notice that we can use both a hex code or a color name as values for color properties. There are only 140 color names supported by modern browsers. Hex codes are 6-symbol codes made up of numbers and letters to represent a very specific color value. You can read more about it hex codes and how they translate to a color value in this article.


Modify the Existing Code

Now that we can see how CSS impacts the visual elements of a webpage, let's continue in this process of "making it our own".

  • Play around with sizes or colors until you are satisfied with your page.
  • It's a good idea to use popular color palettes until you feel more confident choosing colors that look good together.
  • You may be wondering what other properties can be defined in the CSS. Developers use tools like CSS Tricks and MDN to continue exploring and building their toolkit. If you have extra time, check out these resources and try to implement something new into your project!

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: