1
00:00:01,300 --> 00:00:07,370
The second way we can add CSS 
to a page is with internal styles.

2
00:00:07,370 --> 00:00:11,790
Internal styles are usually 
embedded in the head section 

3
00:00:11,790 --> 00:00:16,380
of the HTML document and
are defined using the style tag.

4
00:00:17,650 --> 00:00:23,780
Inside of our head element, let's add
a style tag right beneath the title tag.

5
00:00:25,350 --> 00:00:30,696
This time, we'll style our
paragraph by writing the letter p,

6
00:00:30,696 --> 00:00:33,570
followed by a set of curly braces.

7
00:00:33,570 --> 00:00:38,111
I'll place my cursor
inside the curly braces,

8
00:00:38,111 --> 00:00:43,796
then write font-size: 20px,
which is short for pixels,

9
00:00:43,796 --> 00:00:48,816
and font-weight: bold.

10
00:00:48,816 --> 00:00:54,185
Don't worry about these properties 
and values or this syntax just yet,

11
00:00:54,185 --> 00:00:58,161
as we'll cover them throughout
this course. For now,

12
00:00:58,161 --> 00:01:03,100
just know that the styles inside
these curly braces will increase

13
00:01:03,100 --> 00:01:06,970
the paragraph's text size and
make the text bold.

14
00:01:09,260 --> 00:01:11,570
Let's look at our 
page in the browser.

15
00:01:12,830 --> 00:01:17,890
Notice how the text in each
paragraph is now larger and bold.

16
00:01:20,410 --> 00:01:23,265
We can do the same 
for our heading.

17
00:01:23,265 --> 00:01:27,603
Back in our HTML file, 
we'll style the h1

18
00:01:27,603 --> 00:01:33,658
element by writing 
font-size: 90px.

19
00:01:39,110 --> 00:01:43,230
Now we have a pretty large
heading on the page.

20
00:01:43,230 --> 00:01:47,727
What if we wanted to change
the text color of our heading?

21
00:01:47,727 --> 00:01:53,517
Let's go back to our h1 styles 
and we'll add a color property.

22
00:01:53,517 --> 00:02:00,384
Instead of the color white, we 
want our h1 to be firebrick red.

23
00:02:03,312 --> 00:02:08,051
When we go back to the browser 
and refresh the page,

24
00:02:07,051 --> 00:02:11,110
nothing happens.
Our h1 is still white.

25
00:02:11,110 --> 00:02:16,953
So what's the problem here?
Well, as we learned earlier,

26
00:02:16,953 --> 00:02:21,641 
inline styles are very 
powerful and very specific.

27
00:02:21,641 --> 00:02:26,890
So what's happening is
the inline style in the h1 tag

28
00:02:26,890 --> 00:02:33,313
is overriding the internal firebrick
color style we just wrote.

29
00:02:33,313 --> 00:02:38,745
So let's go back to our h1 tag 
and remove the inline style,

30
00:02:38,745 --> 00:02:41,797
including the style attribute.

31
00:02:41,797 --> 00:02:48,063
Then save the file and refresh 
the browser, and we're now

32
00:02:48,063 --> 00:02:54,140
able to see the color of the h1 
change to firebrick red. The last

33
00:02:54,140 --> 00:02:59,250
thing I want to do is make the
body of the page white 

34
00:02:59,250 --> 00:03:03,333
instead of orange, but still keep 
the orange background color

35
00:03:03,333 --> 00:03:08,003
in the header of the page. So 
first, let's go back to our HTML

36
00:03:08,003 --> 00:03:13,561
file and delete the inline style
written in the body tag.

37
00:03:15,992 --> 00:03:22,759
Then, back in the style block, 
we'll write header with some 

38
00:03:22,759 --> 00:03:30,503
curly braces, and we'll say 
background-color: orange.

39
00:03:36,855 --> 00:03:41,560
Now the body background is back
to the default color of white.

40
00:03:41,560 --> 00:03:45,010
While the header maintains
the orange background color.

41
00:03:47,190 --> 00:03:50,986
The internal stylesheet
method might be useful for

42
00:03:50,986 --> 00:03:55,927
an extremely small scale site,
maybe a coming soon holding 

43
00:03:55,927 --> 00:04:01,040
page or for temporary use while 
testing a new feature on a site.

44
00:04:01,040 --> 00:04:05,021
But once again, internal styles 
are best avoided when 

45
00:04:05,021 --> 00:04:09,435
developing websites. The 
downside to using this internal

46
00:04:09,435 --> 00:04:14,314
stylesheet method on larger
projects is that because the styles

47
00:04:14,314 --> 00:04:19,121
are written inside the HTML file–
and there could be tens or

48
00:04:19,121 --> 00:04:23,110
hundreds of HTML files 
depending on the project–

48b
00:04:23,110 --> 00:04:27,610
the browser has to download 
the styles each time a new

49
00:04:27,610 --> 00:04:31,456
page is loaded. And it also means 
that we're duplicating a lot of the

50
00:04:31,456 --> 00:04:36,620
same styles across multiple pages, 
which defeats the real purpose

50b
00:04:36,620 --> 00:04:39,620
and convenience of using CSS.

51
00:04:42,100 --> 00:04:47,540
Developers like to follow a principle
called DRY or don't repeat yourself.

52
00:04:49,270 --> 00:04:54,672
Repeating internal styles at the 
top of each HTML page means to 

53
00:04:54,672 --> 00:05:00,310
make a change–oops, I meant my h1 
elements to be tomato red, not 

54
00:05:00,310 --> 00:05:06,031
firebrick red–you need to make that 
edit in the head of every single HTML 

55
00:05:06,031 --> 00:05:08,560
page of your web project.

56
00:05:08,560 --> 00:05:11,880
We'll learn a more efficient
way to work in our next video.