Introduction to CSS

When you're building a house, the first things you think about is the structure. You need the frame, the rooms, the floors, and the roof to make the house liveable. But if you stopped working on your house right after the last nail was hammered in, you would have a pretty lame home, right? If there was no painting on the walls, no carpets, no pictures, no chairs or tables, you may as well not live in the house at all.

CSS is like the decoration of the house: it's not a "necessary" part to a web page, but it's still important. CSS allows you to add color, format, and styling to your HTML page, just like the interior design of a house adds to the frame.

What CSS Can Do

CSS can be used to modify the existing HTML elements on the page. Here are some specific examples of what it can do:

CSS is written in property and value pairs. The property is the thing that you're trying to change, like the font size or the background color. The value is what you want to change it to, like 5px or 10px or blue or green. Properties and values are written like this:

property: value;

Here are some examples of property value pairs. The property is in red and the value is blue.

Formatting CSS

Now that you know about property/value pairs, which will tell the computer how you want to change an element, you need to tell it which element you're trying to change. Here is a picture of a little bit of full CSS code:

Picture

You probably recognize the pink part, which are the property/value pairs. The yellow part is called the selector. The selector tells the browser which HTML parts to style. There are three main ways to identify them:

By tag: If you want the CSS changes to apply to every element of a certain tag (like all of the p tags on a page) you can simply use the name of the tag like in the example above. To do this, just use the letters that make up the HTML tag. So, if you want to make every button on a page the same color, you would make the selector "button"

By ID: if you only want to style certain elements within a tag (say you want one button to be red but another button to be blue) you can identify them by ID. When you're using an ID for the selector, you'll need to put a # and then the name of the element (if the element's name was elementName, you would identify it using #elementName)

By Class: Class is similar to ID, except that many different elements can have the same class. To style elements of a class, write a period and then the class name. If the class name was greenButtons, the selector would be .greenButtons If you ever want to apply the same CSS using multiple selectors, you can simply make a list separated by commas, like this: #button1, #button3, p { color: red; } "color: red" will apply to the element with ID button1, the element with ID button3, and all p tags.

The last important part of CSS is the open and close curly brackets. All of the style change you want to make need to go between an open and close bracket. Look at this sample of CSS:

#myElement {
color: red;
background-color: blue;

The open and close brackets tell the browser which CSS code is for which elements. By putting "color:red;" and "background-color: blue" between a { bracket and a } bracket, you're telling it that that is the CSS that should be applied to #myElement.

Picture

Googling CSS

The good thing about CSS is that it's pretty intuitive, meaning it's not too difficult to understand. However, there are some things that you'll have to look up using google. Remember: if there's anything that you want to do in CSS but you don't know how, google it!!!

I want to make a button with rounded edges, but I don't know how do do rounded edges. I would start by making a button tag in HTML, like this:

<button>Click Me!!!!!!!!!</button>

Copy and paste that into the JSBin HTML window. The corners aren't rounded, are they? I don't know how to make them rounded... but I do know that I'll use CSS to make that change, because rounding the edges is modifying an existing element. So, I'm going to google it. I start by searching using important keywords. The search I'll use for this is: "rounded edges css"

Picture

The first two both seem promising, because they are both W3Schools websites. W3Schools has tons of easy to understand tutorials on HTML, CSS, and JavaScript.

***W3Schools should always be your first click when you're googling!***

Since I know that W3Schools is a great resource, I'm going to choose one of those.

I ended up choosing the second, because it says "border-radius property" and I know that I'm looking for a property (do you remember what that is?) I'm assuming that this will be the most straightforward response. This is the page that comes up:

Picture

W3Schools always has examples of what they're teaching, which is very helpful! If you read the first example, it says "Add rounded borders to a <div> element:" which is what I'm looking for. I decided to click the "Try It Yourself" button, to see how it worked before I used it in my code. This is what comes up:

Picture

To make sure that the border-radius is the property that does the rounded edges, I'm going to try changing it to 10px:

Picture
Do you see the difference? When I changed the border-radius to 10px the corners got less rounded!

Now, go back to your bin where you pasted the <button> tag. In the CSS pane, change the border-radius for the button.

This is an example of how you should google when you're trying to do something in CSS. Here's are a few things to remember:
  1. Use direct and relevant keywords
  2. Choose a link to click (W3Schools is your often your best bet)
  3. Read the page. If it isn't what you wanted, go back and find a different page.
  4. Try the W3 examples if they're there. Play around until you totally understand the solution to you problem.
  5. Read the page, don't just copy and paste the first thing you see!