Preview
Video Player
00:00
00:00
Adding CSS to HTML: Internal Styles
5:13The second way we can add CSS to a page is with internal styles. Internal styles are usually embedded in the <head> section of the HTML document and are defined using the <style> tag.
The second way we can add CSS
to a page is with internal styles.
0:01
Internal styles are usually
embedded in the head section
0:07
of the HTML document and
are defined using the style tag.
0:11
Inside of our head element, let's add
a style tag right beneath the title tag.
0:17
This time, we'll style our
paragraph by writing the letter p,
0:25
followed by a set of curly braces.
0:30
I'll place my cursor
inside the curly braces,
0:33
then write font-size: 20px,
which is short for pixels,
0:38
and font-weight: bold.
0:43
Don't worry about these properties
and values or this syntax just yet,
0:48
as we'll cover them throughout
this course. For now,
0:54
just know that the styles inside
these curly braces will increase
0:58
the paragraph's text size and
make the text bold.
1:03
Let's look at our
page in the browser.
1:09
Notice how the text in each
paragraph is now larger and bold.
1:12
We can do the same
for our heading.
1:20
Back in our HTML file,
we'll style the h1
1:23
element by writing
font-size: 90px.
1:27
Now we have a pretty large
heading on the page.
1:39
What if we wanted to change
the text color of our heading?
1:43
Let's go back to our h1 styles
and we'll add a color property.
1:47
Instead of the color white, we
want our h1 to be firebrick red.
1:53
When we go back to the browser
and refresh the page,
2:03
nothing happens.
Our h1 is still white.
2:07
So what's the problem here?
Well, as we learned earlier,
2:11
inline styles are very
powerful and very specific.
2:16
So what's happening is
the inline style in the h1 tag
2:21
is overriding the internal firebrick
color style we just wrote.
2:26
So let's go back to our h1 tag
and remove the inline style,
2:33
including the style attribute.
2:38
Then save the file and refresh
the browser, and we're now
2:41
able to see the color of the h1
change to firebrick red. The last
2:48
thing I want to do is make the
body of the page white
2:54
instead of orange, but still keep
the orange background color
2:59
in the header of the page. So
first, let's go back to our HTML
3:03
file and delete the inline style
written in the body tag.
3:08
Then, back in the style block,
we'll write header with some
3:15
curly braces, and we'll say
background-color: orange.
3:22
Now the body background is back
to the default color of white.
3:36
While the header maintains
the orange background color.
3:41
The internal stylesheet
method might be useful for
3:47
an extremely small scale site,
maybe a coming soon holding
3:50
page or for temporary use while
testing a new feature on a site.
3:55
But once again, internal styles
are best avoided when
4:01
developing websites. The
downside to using this internal
4:05
stylesheet method on larger
projects is that because the styles
4:09
are written inside the HTML file–
and there could be tens or
4:14
hundreds of HTML files
depending on the project–
4:19
the browser has to download
the styles each time a new
4:23
page is loaded. And it also means
that we're duplicating a lot of the
4:27
same styles across multiple pages,
which defeats the real purpose
4:31
and convenience of using CSS.
4:36
Developers like to follow a principle
called DRY or don't repeat yourself.
4:42
Repeating internal styles at the
top of each HTML page means to
4:49
make a change–oops, I meant my h1
elements to be tomato red, not
4:54
firebrick red–you need to make that
edit in the head of every single HTML
5:00
page of your web project.
5:06
We'll learn a more efficient
way to work in our next video.
5:08