WEBVTT

1
00:00:00.000 --> 00:00:02.360
[treehouse presents]

2
00:00:02.360 --> 00:00:05.790
[Normalizing Your CSS IN CSS with Guil Hernandez]

3
00:00:05.790 --> 00:00:07.260
Hi, I’m Guil from Treehouse.

4
00:00:07.260 --> 00:00:10.650
In this quick tip, we’ll learn about Normalize.css,

5
00:00:10.650 --> 00:00:15.160
a new CSS tool we can use as an alternative to traditional CSS reset methods.

6
00:00:15.160 --> 00:00:17.210
Let’s check it out.

7
00:00:17.210 --> 00:00:20.380
Most CSS resets provide developers a baseline

8
00:00:20.380 --> 00:00:25.000
for styling pages by completely removing certain browser style inconsistencies,

9
00:00:25.000 --> 00:00:29.300
such as margins, padding, line height, and heading font sizes.

10
00:00:29.300 --> 00:00:31.050
But depending on your project,

11
00:00:31.050 --> 00:00:34.390
it’s okay to leave in some of those basic default browser styles.

12
00:00:34.390 --> 00:00:39.780
What Normalize.css does is it preserves useful browser default styles

13
00:00:39.780 --> 00:00:43.200
instead of removing all default styles from every element.

14
00:00:43.200 --> 00:00:47.380
It also corrects common bugs like display settings for HTML5 elements,

15
00:00:47.380 --> 00:00:50.680
font size rendering, and form element styling.

16
00:00:50.680 --> 00:00:54.210
All HTML elements will render consistently

17
00:00:54.210 --> 00:00:57.210
and in line with modern web standards.

18
00:00:57.210 --> 00:01:00.010
You can download Normalize.css at

19
00:01:00.010 --> 00:01:04.629
necolas.github.com/normalize.css

20
00:01:04.629 --> 00:01:11.210
or grab the files on GitHub at /necolas/normalize.css.

21
00:01:11.210 --> 00:01:13.600
So save the file in your project folder,

22
00:01:13.600 --> 00:01:16.310
then you can link to it from your HTML file

23
00:01:16.310 --> 00:01:18.200
right above your main style sheet.

24
00:01:18.200 --> 00:01:23.050
Or you can import it from your main style sheet, and you’re all set.

25
00:01:23.050 --> 00:01:26.390
There are some advantages to using Normalize.css

26
00:01:26.390 --> 00:01:28.950
over other CSS reset methods.

27
00:01:28.950 --> 00:01:31.180
Since it preserves useful default styles,

28
00:01:31.180 --> 00:01:33.840
there’s no need to overwrite a lot of element styles.

29
00:01:33.840 --> 00:01:35.770
Headings and paragraphs, for example,

30
00:01:35.770 --> 00:01:39.220
preserve their default styles consistently across the browsers.

31
00:01:39.220 --> 00:01:42.400
Another neat feature is that it also makes form elements

32
00:01:42.400 --> 00:01:45.070
cross-browser consistent and styleable.

33
00:01:45.070 --> 00:01:49.680
The normalized style sheet is small in size and it’s modular,

34
00:01:49.680 --> 00:01:51.820
so it makes it easy for us to see exactly

35
00:01:51.820 --> 00:01:54.470
which elements need specific styles,

36
00:01:54.470 --> 00:01:58.160
and we can also remove entire sections of the CSS file

37
00:01:58.160 --> 00:02:00.800
if we do not need them in our project.

38
00:02:00.800 --> 00:02:04.890
The CSS file also has detailed in-line documentation

39
00:02:04.890 --> 00:02:07.330
explaining why each rule was added

40
00:02:07.330 --> 00:02:10.180
and how it affects each browser.

41
00:02:10.180 --> 00:02:15.330
If you’re using HTML5 Boilerplate from html5boilerplate.com,

42
00:02:15.330 --> 00:02:18.640
Normalize.css is already included.

43
00:02:18.640 --> 00:02:22.930
It also has a wide browser support, including mobile browsers.

44
00:02:22.930 --> 00:02:26.750
Normalize.css is not necessarily a better solution

45
00:02:26.750 --> 00:02:29.430
over other CSS reset techniques,

46
00:02:29.430 --> 00:02:31.840
it’s just an alternative method that,

47
00:02:31.840 --> 00:02:34.680
depending on your project, might be the best fit.

48
00:02:34.680 --> 00:02:36.970
With other full CSS resets,

49
00:02:36.970 --> 00:02:40.750
you begin from no styles whatsoever and build up from there.

50
00:02:40.750 --> 00:02:44.510
Normalize.css lets you start somewhere in the middle

51
00:02:44.510 --> 00:02:47.150
in a state that’s consistent in all browsers.

52
00:02:47.150 --> 00:02:49.920
Then you build up or down as you need to.

53
00:02:49.920 --> 00:02:52.970
If you’ve been using CSS resets for a while,

54
00:02:52.970 --> 00:02:54.760
give Normalize.css a try.

55
00:02:54.760 --> 00:02:57.550
You might realize that your site might require less fixes

56
00:02:57.550 --> 00:02:59.650
for browser compatibility than you thought.

57
00:02:59.650 --> 00:03:01.700
As with any tool or framework,

58
00:03:01.700 --> 00:03:05.040
read the documentation first to make sure it’s the right solution for you.