Preview
Video Player
00:00
00:00
Adding CSS to HTML: Inline Styles
5:30There are three different ways we can add CSS to a page: inline styles, internal styles, and with an external stylesheet. Let’s look at them one by one and discuss their pros and cons. First up are inline styles, where we write the CSS in the HTML file, directly inside an element's tag, using a style attribute.
There are three different ways
we can add CSS to a page:
0:01
inline styles, internal styles,
and with an external style sheet.
0:06
Let's look at them one-by-one and
discuss their pros and cons.
0:13
To get started, launch the workspace
with this video and follow along.
0:20
You can also download the project
files for this course, including
0:24
the completed files for each
lesson in the Downloads section
0:29
of this page. When we
launch our first workspace,
0:34
we'll see the files we need to get
started over here in the left sidebar.
0:37
We have an index.html containing
a resume for a job seeker named
0:43
Developer Diane. We should also
see a folder named css, which we'll
0:49
use later in this lesson. If we
click the Preview icon to bring
0:55
up the workspace preview
in the browser, we see
1:01
that Diana's resume is
currently unstyled. But keep
1:05
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:15
that gives certain elements
some default styling.
1:20
That way users can still have
a somewhat presentable and
1:24
readable experience by default.
1:29
That's why we're initially seeing
some whitespace around the page
1:32
below the headings and paragraphs
and between lines of text.
1:37
These are the default styles
applied by the Chrome browser.
1:41
But even if you look at this
unstyled page in Firefox, Safari,
1:46
or any other browser, it
should look extremely similar.
1:51
To learn more about the default
styles affecting the appearance
1:56
of Diane's resume, I can right-click
on an element and choose Inspect.
2:01
I'll do this with my h1 element.
2:07
And I can see the user
agent style sheet is
2:11
causing this heading to
have a bold font weight,
2:15
as well as an increased
font size and margin.
2:20
If you've never used your web
browser's Inspect feature before,
2:24
don't worry just yet, we'll
cover it eventually. But in
2:29
the meantime, I've included some
readings in the Teacher's Notes.
2:32
I'm sure you're anxious to go
beyond the user agent style
2:37
sheet, so let's write a few simple
styles of our own for this page.
2:41
The styles we designers and
developers create are called
2:46
author styles. First up are
inline styles, where we write
2:51
the CSS in the HTML file directly
inside an element's tag using
2:55
a style attribute. In our HTML
file, let's give the body element
3:02
a style attribute. Then,
inside the quotation marks,
3:08
we'll write
background-color: orange.
3:14
When we save our HTML file
and preview in the browser,
3:21
we can see how this makes the
background color of our page
3:26
the color orange. And if we go
back and give the h1 element
3:31
a style attribute, this time
we'll write color: white.
3:38
Let's save again and refresh
our preview. And the main
3:47
heading text changes to the
color white. So we can style
3:53
any element with any CSS
property using this inline
3:57
style method. We could style
the entire page with this
4:03
method if we wanted to, but
I don't recommend doing that.
4:08
In fact, inline styles are not
considered good practice for
4:13
developing websites
and should be avoided.
4:18
If we rely on inline styles and
we need to make any styling
4:21
changes, it means we need to go
directly inside our HTML to make
4:26
those changes. So we're not
really separating content from
4:32
presentation. And the CSS is
scattered throughout the file,
4:37
making maintenance difficult
and impractical.
4:41
Inline styles are also at the
lowest level possible of what's
4:45
referred to as the CSS cascade.
4:50
They're very powerful and
very specific. That means
4:52
they will override other
styles applied to an element.
4:56
So if we declare a new background
color style for the body element or
5:02
text color style for the h1
element, in an internal or
5:08
external style sheet, we won't
be able to see those changes
5:13
because these inline styles will
always overwrite them. We'll
5:18
learn more about how the cascade
works as this course progresses.
5:23