Introduction

CSS is a coding language that is used to style and design how a website looks to a user. CSS stands for Cascading Style Sheets. This page has been styled with CSS and dictates: the background is gray and even why the words use a certain type face.

Why Use CSS?

CSS gives design to the HTML body markup. While you can add design code straight to HTML, HTML as a language was never intended to include design. CSS makes working with large scale websites where design is the same on several different pages easier. Instead of adding the same code to several lines on several pages, you can simply change one line of code on a single page that refers to many areas of your website. This is achieved by using an external .css file that html files refer to for design markup perameters.

How It Works: Basics

CSS statements refer to different elements of html code and then declares what the design value for that element should be. Just like any language, understanding syntax allows you to learn CSS quickly. Each CSS statement uncludes a selector and a declartion, while the declaration states a property and value of that element. Below is an example of the basic syntax of CSS.
selector {property: value;}
Inderstanding this basic syntax can help you understand the following example:
body {background-color: blue;}
Here we see that the background color property of the body element is assigned the value of blue. This would affect the background color of all body elements that use this CSS.

We can expand on this syntac by adding more properties and values within the element, displayed below: 

body { background-color: blue;
       color: gray; }

In this example, any body element will now have a blue background-color and any text within the body element will be colored gray.

There is one catch to this syntax in CSS. Remember CSS stands for Cascading Style Sheets. So the computer reads this code by cascading it's way down the page. Meaning it assigns design as it reads it. So if you state that the background-color is blue and then state again further down the page that the background-color is pink, the computer will act on the last thing it read. So the background-color would be pink. In the below example, what color would the background-color of a paragraph element be? Orange or Red?

body { background-color: red;
       color: gray; }
p    { background-color: orange;
       color: white; }

You got it! The background-color would be orange and (if you noticed) it would also have white text within the paragraph. However, everything else in the body would have a background-color of red and text would appear gray.

Selectors

What if you only want to change the text color of certain paragraphs? This is where the different selector options come in. You can select different levels of html code. For instance let's say you want to style all

elements with the id="green-paragraphs" The CSS for this would look like: p #green-paragraphs { background-color: green; } Check below to see how to select different options:

How To Comment

Just like any other language, when writing code it is best practice to leave comments for yourself and others. This makes it easier to read CSS and understand what was intended. It's also useful to leave notes while you work out a problem you may be trying to solve. In CSS you comment by adding /* before your text and */. This also works for multiple lines of comments
/* This is a comment example. Come back to this when you've thought of a better example */

Next Steps

Now that you have the basics down, you can dive right in to learning more about CSS. Here are some great resources to learning more about how to style pages using CSS: