[MUSIC]

Without CSS, all websites look pretty look exactly the same,

lots of text on a plain white page.

Luckily for us, CSS gives us a mind boggling number of options to control how

our webpages look, color, size,

shape, border, shadow, animation, the possibilities are endless.

We use CSS to make web pages beautiful by selecting HTML tags and

giving the browser a list of instructions for how those HTML tags should look.

Open styles.css in the profile project and take a look.

Each block of CSS is called a CSS rule.

And each rule selects a tag on an HTML page and

assigns it a list of properties that control how a browser displays the tag,

the size of the text or the color of a border, for example.

Take this rule right here, for instance.

This block of CSS tells the browser to make every single

anchor tag in the HTML this color.

As you can see, a style begins with some information, a,

in this case, followed by an opening bracket, which we call a curly brace,

and one or more lines of styling instructions.

The style ends with a closing curly brace.

Let me break this down a little more for you.

Each rule begins with what we call a selector,

this is how you tell the CSS which HTML tag or element you want to style.

We can select an HTML element in a variety of ways.

The most straightforward way is to select the element by its tag name.

Selecting the element by name allows you to style that element everywhere

that it appears on the page.

In this case, every link on the page.

We can style any HTML tag this way, h1, h2, paragraph even body.

Each line in the rule inside the curly braces is one style instruction.

Like on body, it sets the color of the text to this color, a really dark gray.

Let's look at another example.

Some styles use a different type of selector, for example, this CSS rule.

With this rule I'm saying to the browser, I want this .main-nav element to take

up 100% of the width of the browser, I want its background to be black,

and I want it to be at least 30 pixels high, and so on.

.main-nav isn't the name of an HTML tag,

it refers to the class name .main-nav in our HTML.

We'll get to styling by class a little later.

You can also see that a single CSS rule can hold a ton of styling instructions.

The more instructions you add, the more you can change the look of the tag.

Let's create and style a new element by creating a new CSS rule.

Say you wanted to add a new subsection in this background section,

maybe to include more information about yourself.

So let's go to index.html and right below the list that we made in the last video,

let's add a new section and we'll make that an h3, and

inside of the h3 type, A New Subsection.

And that's what that looks like.

Now lets go to styles.css, scroll all the way down to the bottom, and start

by telling the CSS which tag you want to style, which in this case is the h3.

I like to start by typing the selector followed by the opening and

closing curly braces, then hitting Return in-between the two curly braces.

Getting into this habit now will save you a lot of time wondering why your CSS isn't

working and hunting through your document for missing curly braces.

Now we'll write a CSS property.

All of these styling options like color, font size, line height, margin, and so

on are called CSS properties.

Set the color of the text by typing the property, color:, with a colon.

The colon separates the property on the left from the value on the right.

The value is where you get to have fun.

It's what you want to set the property to, like the color blue.

Don't forget to add a semicolon at the end of each and every style line.

If you can't figure out why your styles aren't working, checking for

proper punctuation is often a really good place to start.

Let's see what this looks like, it's blue.

Now we can change the color of the text by typing a huge number of colors,

like orange.

Or maroon.

Or you can always type a hexadecimal value here.

Which you might remember, is a code that tells the browser what color to display.

There are dozens of hexadecimal color pickers on the web.

I'll include a link to one in teacher's notes, or you can Google it and

find one you like.

Now let's use another CSS property called letter spacing.

This does just what you might think,

it changes the amount of spacing between each letter.

The higher the pixel value, the farther apart the letters will be.

On the right, you can type a whole number, like 2px,

which makes the letters a little farther apart.

Or 50px, which makes them very far apart.

Or you can use a decimal here like .5px.

Which as you can see, gives you a much subtler effect.

Selecting by element is great if you have a set of identical elements that you wanna

style in the same way.

Like if you wanted to style the look of every h3 heading on your page, for

example.

But what if you only wanted to style some of those elements, or

one specific element?

For example, both the background element and the goals element are h2s.

What if I wanted to change only this background h2 and

make a different color, or make it bigger?

This is where class selectors come in handy.

In the next video you'll learn how to select and style by class.