Styling (CSS) Introduction

Adding styles to your page

To add CSS (Cascading Style Sheet) to your website you need to add a  <style> </style> tag which will hold the unique CSS markup.

In our exercise app there is a special panel to enter your styles which automatically adds the style tag for you.

CSS Syntax Intro

To add CSS properly you must follow this syntax

First, we have a selector, this tells the CSS which element we want to add the styling to. There are three ways to select an element:

1. You can use its class with the . selector So if you have an element like
   <div class="hello"> Hi </div>  you would use the following CSS code to make it have a black background  .hello { background: black; }
2. By using the id with the # selector
3. By using the element’s name (ideally only used for anchor or img) where first we select the parent element then add a space and list the element, for example:

   <div class="button">
       <a href="#">Welcome</a>
   </div>

   We would use the following CSS to make the anchor have green text color

   .button a {
      color: green;
   }

   The space indicates an element inside the selected element.

   The proper syntax to specify each style declaration (each thing you’re changing) looks like this:

We enter the property like background then we enter a colon separator so we can define the value we want to set like red and we must end the declaration with a semi-colon ;

Here is sample code with two declarations:

.button a {
    color: green;
    background: black;
}

You can find a nice list of CSS properties you can use here.