CSS

Making everything look pretty with CSS

Cascading Style Sheets, or CSS, is what give websites style. Without CSS, the internet would be a very bland place.

Facebook with CSS:

Facebook without CSS:

Here are just a few things you can do with CSS:

• Choose colors of everything on the page like the background, font, or main menu.
• Set the size of any element such as font size, width of the entire site, or an image
• Create borders or drop shadows around whole sites, images, and menus
• Change the state of items when hovering over them

To make CSS work you select an HTML element and assign various properties to it.

One of the first things you might want to do on any site, if you're not satisfied with white, is to change the background color.

body {
        background-color: blue;
}

We're selecting the body element, which encompasses the entire page, and setting the background color to blue. Body is a selector and the background-color is a property. Look over the formatting in that code.

We have:

• The selector
• A curly bracket
• The property
• A colon
• The value of the property
• A semicolon
• A curly bracket

The spacing and indenting doesn't matter but it's best to format it like that for readability. Note that als

Padding

Now we're going to start playing with padding. Padding is the amount space around content that is inside of an element. You can set padding on all four sides of an element.

Here's an example of padding around a div:

div {
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 0;
    }

Remember that the div is the selector and there are four properties which apply to padding.

Margins

A margin is the amount of space outside of an element. You can set it on all four side like padding.

Classes and IDs

When you want to get more specific than all of the HTML elements across a site you use classes and IDs to do that. You will often want to apply styling to only certain HTML elements rather than all of them. In the above code examples we're selecting the <h1> and <p> elements. The CSS styling you applied will change the look of all of the <h1> and <p> elements across the site.

Classes in CSS are created with a period and the class name:

.class-name {
    font-size: 20px;
}