1
00:00:00,320 --> 00:00:02,490
Before you begin laying
out a page with CSS,

2
00:00:02,490 --> 00:00:07,330
you should consider how a browser's
default CSS might affect your layout.

3
00:00:07,330 --> 00:00:12,170
In the CSS basics course, you learned that
a browser has its own built-in stylesheet

4
00:00:12,170 --> 00:00:14,200
called a User Agent Stylesheet.

5
00:00:14,200 --> 00:00:17,250
It's the CSS a browser
applies to a page before you

6
00:00:17,250 --> 00:00:19,700
even write a single line of CSS.

7
00:00:19,700 --> 00:00:22,015
The browser gives elements like the body,
headings,

8
00:00:22,015 --> 00:00:27,760
paragraphs, and lists default margin,
padding, line height and font size values.

9
00:00:27,760 --> 00:00:32,270
Popular web browsers like Chrome,
Firefox, Safari and Internet Explorer

10
00:00:32,270 --> 00:00:35,900
use slightly different default styles
in their built-in style sheets.

11
00:00:35,900 --> 00:00:38,840
So, there will be subtle differences
in the way your layout displays

12
00:00:38,840 --> 00:00:40,690
in the various browsers.

13
00:00:40,690 --> 00:00:43,070
Default heading, font sizes and
form elements for

14
00:00:43,070 --> 00:00:45,940
example, will look
different in some browsers.

15
00:00:45,940 --> 00:00:49,610
That's why it's good practice to
use a CSS reset in your website.

16
00:00:51,070 --> 00:00:55,030
A CSS reset removes the subtle
browser inconsistencies in margins,

17
00:00:55,030 --> 00:00:57,280
padding, line height and font sizes

18
00:00:57,280 --> 00:01:00,480
to ensure that your layout displays
as consistently as possible

19
00:01:00,480 --> 00:01:02,210
across all browsers.

20
00:01:02,210 --> 00:01:05,460
In other words, it helps your site
look the same in Chrome, Firefox,

21
00:01:05,460 --> 00:01:06,920
Safari, IE and Opera.

22
00:01:08,360 --> 00:01:11,090
Now there are different types of CSS
reset methods used by web 

23
00:01:11,090 --> 00:01:13,030
designers and developers.

24
00:01:13,030 --> 00:01:17,069
In this lesson, I'm going to cover
a popular method called normalize.css.

25
00:01:18,440 --> 00:01:22,580
To follow along using workspaces,
launch the workspace on this page.

26
00:01:22,580 --> 00:01:26,220
If you're starting a website project
without the assistance of a grid or

27
00:01:26,220 --> 00:01:27,180
framework,

28
00:01:27,180 --> 00:01:29,880
your website layout usually
looks similar to this

29
00:01:29,880 --> 00:01:32,530
before writing any CSS of your own.

30
00:01:32,530 --> 00:01:35,720
Notice the color of the links,
the different font sizes and

31
00:01:35,720 --> 00:01:41,120
the space around the body, headings,
paragraphs and between lines of text.

32
00:01:41,120 --> 00:01:45,370
The page is styled to a limited extent
by the browser's default style sheet

33
00:01:45,370 --> 00:01:48,290
to make it appear more readable to users.

34
00:01:48,290 --> 00:01:52,810
I'm going to use the CSS
reset normalize.css

35
00:01:52,810 --> 00:01:55,760
to remove some of these
default browser styles.

36
00:01:55,760 --> 00:01:59,560
Like the extra margin and
padding around the page.

37
00:01:59,560 --> 00:02:03,300
This will create a level playing field for
me to style the layout and

38
00:02:03,300 --> 00:02:06,630
help create what's called
cross-browser compatibility.

39
00:02:06,630 --> 00:02:09,950
It's when your layout looks
consistent in all the browsers.

40
00:02:09,950 --> 00:02:15,534
Normalize is the CSS reset method used 
in CSS frameworks like Twitter Bootstrap

41
00:02:15,534 --> 00:02:17,460
and ZURB Foundation.

42
00:02:17,460 --> 00:02:20,350
You can read more about
the styles it resets

43
00:02:20,350 --> 00:02:24,220
and the common bugs it fixes
on the normalize website.

44
00:02:24,220 --> 00:02:27,800
I included the links in the 
Teacher's Notes of this video.

45
00:02:27,800 --> 00:02:30,450
So adding normalize to
your project is easy.

46
00:02:30,450 --> 00:02:35,360
You simply download the CSS file from
the website and link it to your HTML.

47
00:02:35,360 --> 00:02:38,740
So I'll click the Download button here and

48
00:02:38,740 --> 00:02:43,980
save the CSS file as normalize.css.

49
00:02:43,980 --> 00:02:48,190
You should already see
a file named normalize.css

50
00:02:48,190 --> 00:02:52,390
inside the CSS folder of this workspace.

51
00:02:52,390 --> 00:02:56,700
I'm gonna link this style
sheet to the index.html file.

52
00:02:56,700 --> 00:03:01,952
So right above the link tag that
links to the main style sheet,

53
00:03:01,952 --> 00:03:07,020
I'll add a new link element
that links to normalize.css.

54
00:03:14,604 --> 00:03:19,440
And as the href value,
I'll type the path to the style sheet,

55
00:03:19,440 --> 00:03:23,940
which is css forward slash
followed by normalize.css.

56
00:03:23,940 --> 00:03:30,170
I'm linking the CSS reset above my main
CSS file, so that I'm able to override

57
00:03:30,170 --> 00:03:35,430
any of the normalized resets in my main
style sheet, if I need to, later on.

58
00:03:35,430 --> 00:03:39,890
So the normalized style sheet is small,
modular and

59
00:03:39,890 --> 00:03:42,560
broken down into independent sections.

60
00:03:42,560 --> 00:03:46,290
So it makes it easy to see which
elements need specific styles,

61
00:03:46,290 --> 00:03:48,060
it's also well documented.

62
00:03:48,060 --> 00:03:51,610
So you'll know what each reset
rule does and why it's doing it.

63
00:03:53,100 --> 00:03:56,160
And if you don't need certain
reset rules in your style sheet,

64
00:03:56,160 --> 00:03:58,270
you can remove them from the CSS file.

65
00:03:59,880 --> 00:04:05,630
Now what's great is that we can just as
easily add reset rules in the style sheet.

66
00:04:05,630 --> 00:04:09,050
So for example,
I want to remove the margins,

67
00:04:09,050 --> 00:04:13,300
padding and
bullets in every list item of my layout.

68
00:04:13,300 --> 00:04:17,900
So I'm going to add a custom
reset in the normalized.css file.

69
00:04:18,980 --> 00:04:23,270
So I'll scroll all the way down to
the bottom of the style sheet, and

70
00:04:23,270 --> 00:04:24,350
add some new CSS.

71
00:04:26,830 --> 00:04:33,030
So first I'll copy this table's comment
here and paste it at the bottom.

72
00:04:33,030 --> 00:04:37,210
And I'll change the text to say Lists, and

73
00:04:37,210 --> 00:04:41,428
the description will say Remove default

74
00:04:41,428 --> 00:04:46,570
list styles, margins and padding.

75
00:04:48,540 --> 00:04:54,850
I’ll add a new rule that targets
ordered lists and unordered lists.

76
00:04:56,010 --> 00:05:00,590
And I’ll set the margin and
padding values to 0.

77
00:05:02,690 --> 00:05:07,360
And the list style value to none,
then I'll save my file.

78
00:05:07,360 --> 00:05:11,450
So now, if we look at this page in
every browser, it should look the same.

79
00:05:11,450 --> 00:05:15,470
Because now we forced browsers
to match this reset base line.

80
00:05:15,470 --> 00:05:19,900
Therefore avoiding subtle cross-browser
differences as much as possible.

81
00:05:19,900 --> 00:05:23,770
So now we're ready to start writing
the main layout styles for our webpage.