Back to Setup Page

CSS - Styles

CSS allows us to “dress up” the content on our page. Go ahead and switch over to your CSS file in your MASH app and let’s take a tour of the code.

Tour the Existing Code

  • CSS allows us to target types of elements (ex: body, button) and specific elements based on class name (ex: .category) or id (ex: #future).
  • Once we’ve targeted an element, we can write rules for that element to follow. Rules can be things like “the text of this element should be black” or “the maximum width of this element should be 80% of the width of the page”.

Explore to Learn

After you complete each task, click the green Run button and observe the changes in the browser!

  • On line 2 of the CSS file, change serif to sans-serif
  • On line 3, change white to #81b29a
  • On line 5, change 80% to 50%
  • On line 7, change center to left

You may be wondering, “how does one know all these special keywords and commands to create these rules?” Great question! With time and practice, and the use of documentation like MDN and CSS Tricks, developers slowly build their toolkit. Even the most experienced developers need to continually research and google to find the tool they need.

Update the CSS in Your MASH App

Now that we can see how some of the pieces come together with CSS, let's continue in this process of "making it our own".

  • Choose a color palette and change the colors of your font and background using the appropriate hex codes. You can find all of the recognized html color names here.
  • Choose another font from Google Fonts and implement that font for your application. When you select a font, there are two steps to use the font in your application. First, copy and paste the code block into the head of your HTML file. Second, copy and paste the CSS rule into your CSS file under the body selector.

Need help? At this point, your project should look something like this.

CSS Summary

  • CSS allows us to target an element and write specific rules for it to follow. We can target an element using its HTML tag, class, or id.
  • Based on the type of rule, CSS will expect different values (ex: teal 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

Next Section: Wrap-Up