Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this lesson, you will change the color, background color, and size of an element.
Further Reading
[MUSIC]
0:00
Without CSS, all websites look
pretty look exactly the same,
0:04
lots of text on a plain white page.
0:08
Luckily for us, CSS gives us a mind
boggling number of options to control how
0:11
our webpages look, color, size,
0:15
shape, border, shadow, animation,
the possibilities are endless.
0:18
We use CSS to make web pages
beautiful by selecting HTML tags and
0:23
giving the browser a list of instructions
for how those HTML tags should look.
0:28
Open styles.css in the profile project and
take a look.
0:32
Each block of CSS is called a CSS rule.
0:38
And each rule selects
a tag on an HTML page and
0:41
assigns it a list of properties that
control how a browser displays the tag,
0:44
the size of the text or
the color of a border, for example.
0:49
Take this rule right here, for instance.
0:53
This block of CSS tells
the browser to make every single
0:55
anchor tag in the HTML this color.
0:59
As you can see,
a style begins with some information, a,
1:02
in this case, followed by an opening
bracket, which we call a curly brace,
1:07
and one or
more lines of styling instructions.
1:12
The style ends with a closing curly brace.
1:15
Let me break this down a little more for
you.
1:18
Each rule begins with
what we call a selector,
1:20
this is how you tell the CSS which
HTML tag or element you want to style.
1:23
We can select an HTML
element in a variety of ways.
1:28
The most straightforward way is to
select the element by its tag name.
1:31
Selecting the element by name allows
you to style that element everywhere
1:35
that it appears on the page.
1:39
In this case, every link on the page.
1:40
We can style any HTML tag this way,
h1, h2, paragraph even body.
1:43
Each line in the rule inside the curly
braces is one style instruction.
1:48
Like on body, it sets the color of the
text to this color, a really dark gray.
1:54
Let's look at another example.
2:00
Some styles use a different type of
selector, for example, this CSS rule.
2:02
With this rule I'm saying to the browser,
I want this .main-nav element to take
2:07
up 100% of the width of the browser,
I want its background to be black,
2:12
and I want it to be at least
30 pixels high, and so on.
2:17
.main-nav isn't the name of an HTML tag,
2:21
it refers to the class name
.main-nav in our HTML.
2:24
We'll get to styling by
class a little later.
2:28
You can also see that a single CSS rule
can hold a ton of styling instructions.
2:30
The more instructions you add, the more
you can change the look of the tag.
2:36
Let's create and style a new
element by creating a new CSS rule.
2:40
Say you wanted to add a new subsection
in this background section,
2:44
maybe to include more
information about yourself.
2:48
So let's go to index.html and right below
the list that we made in the last video,
2:51
let's add a new section and
we'll make that an h3, and
3:01
inside of the h3 type, A New Subsection.
3:06
And that's what that looks like.
3:14
Now lets go to styles.css, scroll all
the way down to the bottom, and start
3:16
by telling the CSS which tag you want
to style, which in this case is the h3.
3:23
I like to start by typing the selector
followed by the opening and
3:28
closing curly braces, then hitting
Return in-between the two curly braces.
3:32
Getting into this habit now will save you
a lot of time wondering why your CSS isn't
3:37
working and hunting through your
document for missing curly braces.
3:41
Now we'll write a CSS property.
3:45
All of these styling options like color,
font size, line height, margin, and so
3:47
on are called CSS properties.
3:51
Set the color of the text by typing
the property, color:, with a colon.
3:54
The colon separates the property on
the left from the value on the right.
4:00
The value is where you get to have fun.
4:04
It's what you want to set the property to,
like the color blue.
4:06
Don't forget to add a semicolon at
the end of each and every style line.
4:12
If you can't figure out why your
styles aren't working, checking for
4:16
proper punctuation is often
a really good place to start.
4:19
Let's see what this looks like, it's blue.
4:24
Now we can change the color of the text
by typing a huge number of colors,
4:27
like orange.
4:32
Or maroon.
4:37
Or you can always type
a hexadecimal value here.
4:43
Which you might remember, is a code that
tells the browser what color to display.
4:47
There are dozens of hexadecimal
color pickers on the web.
4:51
I'll include a link to one in teacher's
notes, or you can Google it and
4:54
find one you like.
4:58
Now let's use another CSS
property called letter spacing.
4:59
This does just what you might think,
5:06
it changes the amount of
spacing between each letter.
5:08
The higher the pixel value,
the farther apart the letters will be.
5:11
On the right,
you can type a whole number, like 2px,
5:14
which makes the letters
a little farther apart.
5:19
Or 50px, which makes them very far apart.
5:22
Or you can use a decimal here like .5px.
5:31
Which as you can see,
gives you a much subtler effect.
5:36
Selecting by element is great if you have
a set of identical elements that you wanna
5:39
style in the same way.
5:43
Like if you wanted to style the look
of every h3 heading on your page, for
5:45
example.
5:49
But what if you only wanted to
style some of those elements, or
5:50
one specific element?
5:53
For example, both the background
element and the goals element are h2s.
5:55
What if I wanted to change
only this background h2 and
6:01
make a different color, or make it bigger?
6:04
This is where class
selectors come in handy.
6:07
In the next video you'll learn
how to select and style by class.
6:09
You need to sign up for Treehouse in order to download course files.
Sign up