This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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
There are different ways we can add CSS to a page. First, let’s go over the inline and internal style methods.
Inline Styles
When we write inline styles, we write the CSS in the HTML file, directly inside an element's tag using a style attribute.
<body style="background-color: orange;">
Internal Styles
Internal styles are embedded in the <head> section of the HTML document and are defined inside a <style> tag.
<style>
p {
font-size: 20px;
font-weight: bold;
}
</style>
There are different ways we can add CSS to
a page, and
0:00
each way has its advantages, or it might
have its disadvantages.
0:03
So let's review three methods we can use
to apply CSS to our pages.
0:07
To get started, simply launch a new
workspace and follow along.
0:13
You can also download the project files
for
0:16
each lesson in the downloads section of
each page.
0:18
When we lauch our first work space we'll
see the files we need to
0:22
get started over here in the left side
bar.
0:25
But before we start, let's go ahead and
close this Console panel at the bottom of
0:28
the page since we're not going to use it
in this course.
0:33
Over in our project files,
0:37
we have an index.html file containing
parts of our Lake Tahoe page.
0:38
For now, we're only working with the
header of the page, and
0:43
an introductory paragraph about Lake
Tahoe.
0:47
We should also see a folder named CSS
which we'll use in a later lesson.
0:51
So if we click the Preview button over
here in the top right corner,
0:56
that brings up the workspace preview in
the browser.
1:01
So in the browser preview, we see that our
page is currently un-styled.
1:04
But keep in mind that even if we haven't
written a single line of CSS for
1:09
the page, browsers use what's called a
user agent style sheet,
1:13
that gives certain elements some default
styling.
1:17
That way users can still have a somewhat
presentable and
1:20
readable experience by default.
1:23
So that's why we're initially seeing some
white space around the page,
1:26
below the headings, paragraphs and between
lines of text.
1:30
These are the default styles applied by
the Chrome browser.
1:35
But even if we look at this unstyled page
in Firefox, Safari or
1:38
Internet Explorer, it should still look
just like this.
1:42
So, what we'll do first is right a few
simple styles for
1:46
this page, so, we can get a better idea of
how CSS affects a page.
1:49
So, the styles we designers and developers
create are called author styles.
1:55
And there are three methods for adding
author styles to a page.
2:00
We can do it with inline styles, internal
styles, and with an external style sheet.
2:04
So, let's go over these methods.
2:09
First up, when we write inline styles, we
write the css in
2:12
the html file directly inside an elements
tag using a style attribute.
2:16
So in our index.html file let's give the
body element
2:22
a style attribute, then inside the
quotation marks we're going to write,
2:29
background-color followed by a colon and
2:34
a space, then the word orange and a
semicolon.
2:40
So now when we save our HTML file by going
over to File>Save,
2:46
when we bring up the browser preview and
refresh the page,
2:52
we can see how this makes the background
color of our page the color orange.
2:56
And if we go back to our HTML file and
give the h1 element a style attribute.
3:00
So we're going to go in the opening h1 tag
and add a style attribute, and
3:07
inside the quotation marks, we're going to
write color followed by a colon and
3:13
a space then, the word white, and a semi
colon.
3:18
When we save our index.html file, and
refresh the browser preview,
3:23
we see how the main heading text changes
to the color white.
3:29
So, we can style any element with any css
property, using this in-line style method.
3:34
We could style the entire page with this
method if we wanted to, but
3:39
I don't recommend that you do that.
3:43
In fact, inline styles are not considered
a good practice for
3:45
developing websites, and they should be
used sparingly if at all.
3:49
Because if we need to make any styling
changes,
3:53
it means we need to go inside our html to
make those changes.
3:56
So we're not really separating content
from presentation.
4:01
And the CSS gets scattered throughout the
file,
4:05
making maintenance difficult and
impractical.
4:07
Inline styles are also at the lowest level
possible of
4:11
what's referred to as the CSS cascade.
4:14
They're very powerful and specific.
4:17
That means they will override other styles
applied to an element.
4:20
So for example if we declare a new
background color style for
4:24
the body or a color style for the h1
element and
4:28
an internal or external style sheet, we
wont be able to see those changes because
4:33
these inline styles will always override
them and we'll see that in just a bit.
4:38
But inline styles may come in handy when
creating quick HTML and CSS mockups.
4:44
Or, if we're in a pinch, we can use the
inline style method for
4:49
debugging purposes or writing temporary
fixes.
4:53
So the second way we can add CSS to a page
is with internal styles.
4:56
Internal styles are usually embedded in
the head section of the HTML document.
5:02
And they are defined using the style tag.
5:08
So inside of our head element.
5:11
Let's go ahead and add a style tag right
beneath the title tag.
5:14
And this time we're going to style the
paragraph.
5:18
In our page, by writing P, followed by a
set of curly braces.
5:23
Then I'll place my cursor inside the curly
braces and
5:29
hit enter twice to create some white
space.
5:33
Then between the curly braces, I'm going
to hit the Tab key, then write font-size
5:36
followed by a colon and a space, then I'm
going to write 20 px and a semicolon.
5:45
Px stands for pixels, and we're gonna get
to that later in this course.
5:51
So now I'm going to hit Return or
5:55
Enter, and right below what we just wrote,
I'm going to write font-weight.
5:57
Followed by a colon and a space, then the
word bold, and a semicolon.
6:04
Now don't worry about these properties,
values, and
6:10
the syntax just yet, we'll cover a lot of
that throughout this course.
6:13
For now, just know that the styles inside
these curly
6:17
braces will increase the paragraph's text
size and make it bold.
6:21
So let's take a look at it in the browser.
6:26
I'm going to go up here and hit File >
Save,
6:28
then in the browser preview I'm going to
refresh the page, and
6:32
notice how the text in our paragraph is
now larger and bold.
6:36
And now we can also do the same for our
headings.
6:43
So back in our html file, underneath the
last curly brace here
6:45
we're going to style the h1 element in our
page by writing h1
6:51
followed by a space and a set of curly
braces then inside the curly
6:56
braces we're going to write font-size
followed by colon,
7:01
a space, then were going to write 90px and
a semicolon.
7:07
So now when we save our index.html file
and refresh the browser
7:12
preview we can see that we have a pretty
large heading on the page.
7:17
So what if we want to change the text
color of our heading?
7:22
Well let's go back to our h1 styles here
the ones we just wrote.
7:26
And we're going to add a color property.
7:32
So right after the semicolon I'll hit
Enter, and
7:33
I will write color followed by colon and a
space.
7:37
And instead of the color white, we want
our h1
7:41
to be the color firebrick red because
that's a pretty awesome sounding color.
7:44
So let's write, firebrick followed by a
semi-colon.
7:49
So if we save our indexed.html file, go
back to the browser preview,
7:54
and refresh the page, nothing happens.
7:59
Our h1 is still white.
8:02
So what's the problem here?
8:04
Well, as we learned earlier, in line
styles are really powerful and
8:07
specific, so what's happening is the
inline style and
8:12
the h1 tag here is overriding the
firebrick color that we just wrote.
8:17
So now if we go back to our h1 tag and
remove the in line style, so
8:23
I'm going to select the entire style
attribute and hit Delete.
8:28
When we save our index file than go back
to the browser preview and hit Refresh.
8:33
We're now able to see the color of the h1
change to Fire Brick Red.
8:39
So, the last thing we'll do is make the
body color of
8:44
the page white instead of orange.
8:47
But, we still wanna keep the orange
background color in the header of
8:49
the page.
8:53
So first, let's go back to out HTML file,
and
8:54
we're going to delete the in line style in
the body tag.
8:57
So I'm going to select this style
attribute, hit Delete, and
9:01
then we're going to go back to our style
block and we're going to style the header
9:06
by writing header followed by a space and
a set of curly braces.
9:12
Then inside a curly braces we're going to
write background-color.
9:19
Then a colon and a space, followed by the
word orange, and a semi colon.
9:26
So now when we save our index file, and
refresh the browser preview,
9:33
we can see that the body background is
back to the default color of white,
9:37
while the header maintains that orange
background color.
9:42
So the internal style sheet method we just
used is useful if we're
9:47
creating a small-scale site, maybe a
coming soon holding page, or for
9:51
temporary use while testing a new feature
on our site.
9:56
But again, it's not a best practice for
developing websites.
10:00
The downside to using this internal style
sheet method on larger projects is that
10:05
because the styles are written inside the
HTML file, and
10:10
there could be tens or hundreds of HTML
files depending on the project,
10:15
the browser has to download the styles
each time a new page is loaded.
10:19
And it also means that we're duplicating a
lot of the same styles across
10:24
multiple pages, which defeats the real
purpose and convenience behind using CSS.
10:28
You need to sign up for Treehouse in order to download course files.
Sign up