• Home
  • Styling (CSS) Introduction

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.