- CSS Reset with Normalize 5:24
- Creating a Layout Wrapper 3:27
- Why Vertical Margins Collapse 3:42
- Centering Page Content and Creating a Full-width Header 4:48
- Layout Wrapper Challenge 2 objectives
- Using a Mobile First Approach 6:21
- Creating a Sticky Footer 5:07
- Getting Started with CSS Layout Review 6 questions
Preview
Video Player
00:00
00:00
CSS Reset with Normalize
5:24A CSS reset removes the subtle browser inconsistencies in margins, padding, line-height and font sizes to ensure that your layout displays as consistently as possible across all browsers.
Before you begin laying
out a page with CSS,
0:00
you should consider how a browser's
default CSS might affect your layout.
0:02
In the CSS basics course, you learned that
a browser has its own built-in stylesheet
0:07
called a User Agent Stylesheet.
0:12
It's the CSS a browser
applies to a page before you
0:14
even write a single line of CSS.
0:17
The browser gives elements like the body,
headings,
0:19
paragraphs, and lists default margin,
padding, line height and font size values.
0:22
Popular web browsers like Chrome,
Firefox, Safari and Internet Explorer
0:27
use slightly different default styles
in their built-in style sheets.
0:32
So, there will be subtle differences
in the way your layout displays
0:35
in the various browsers.
0:38
Default heading, font sizes and
form elements for
0:40
example, will look
different in some browsers.
0:43
That's why it's good practice to
use a CSS reset in your website.
0:45
A CSS reset removes the subtle
browser inconsistencies in margins,
0:51
padding, line height and font sizes
0:55
to ensure that your layout displays
as consistently as possible
0:57
across all browsers.
1:00
In other words, it helps your site
look the same in Chrome, Firefox,
1:02
Safari, IE and Opera.
1:05
Now there are different types of CSS
reset methods used by web
1:08
designers and developers.
1:11
In this lesson, I'm going to cover
a popular method called normalize.css.
1:13
To follow along using workspaces,
launch the workspace on this page.
1:18
If you're starting a website project
without the assistance of a grid or
1:22
framework,
1:26
your website layout usually
looks similar to this
1:27
before writing any CSS of your own.
1:29
Notice the color of the links,
the different font sizes and
1:32
the space around the body, headings,
paragraphs and between lines of text.
1:35
The page is styled to a limited extent
by the browser's default style sheet
1:41
to make it appear more readable to users.
1:45
I'm going to use the CSS
reset normalize.css
1:48
to remove some of these
default browser styles.
1:52
Like the extra margin and
padding around the page.
1:55
This will create a level playing field for
me to style the layout and
1:59
help create what's called
cross-browser compatibility.
2:03
It's when your layout looks
consistent in all the browsers.
2:06
Normalize is the CSS reset method used
in CSS frameworks like Twitter Bootstrap
2:09
and ZURB Foundation.
2:15
You can read more about
the styles it resets
2:17
and the common bugs it fixes
on the normalize website.
2:20
I included the links in the
Teacher's Notes of this video.
2:24
So adding normalize to
your project is easy.
2:27
You simply download the CSS file from
the website and link it to your HTML.
2:30
So I'll click the Download button here and
2:35
save the CSS file as normalize.css.
2:38
You should already see
a file named normalize.css
2:43
inside the CSS folder of this workspace.
2:48
I'm gonna link this style
sheet to the index.html file.
2:52
So right above the link tag that
links to the main style sheet,
2:56
I'll add a new link element
that links to normalize.css.
3:01
And as the href value,
I'll type the path to the style sheet,
3:14
which is css forward slash
followed by normalize.css.
3:19
I'm linking the CSS reset above my main
CSS file, so that I'm able to override
3:23
any of the normalized resets in my main
style sheet, if I need to, later on.
3:30
So the normalized style sheet is small,
modular and
3:35
broken down into independent sections.
3:39
So it makes it easy to see which
elements need specific styles,
3:42
it's also well documented.
3:46
So you'll know what each reset
rule does and why it's doing it.
3:48
And if you don't need certain
reset rules in your style sheet,
3:53
you can remove them from the CSS file.
3:56
Now what's great is that we can just as
easily add reset rules in the style sheet.
3:59
So for example,
I want to remove the margins,
4:05
padding and
bullets in every list item of my layout.
4:09
So I'm going to add a custom
reset in the normalized.css file.
4:13
So I'll scroll all the way down to
the bottom of the style sheet, and
4:18
add some new CSS.
4:23
So first I'll copy this table's comment
here and paste it at the bottom.
4:26
And I'll change the text to say Lists, and
4:33
the description will say Remove default
4:37
list styles, margins and padding.
4:41
I’ll add a new rule that targets
ordered lists and unordered lists.
4:48
And I’ll set the margin and
padding values to 0.
4:56
And the list style value to none,
then I'll save my file.
5:02
So now, if we look at this page in
every browser, it should look the same.
5:07
Because now we forced browsers
to match this reset base line.
5:11
Therefore avoiding subtle cross-browser
differences as much as possible.
5:15
So now we're ready to start writing
the main layout styles for our webpage.
5:19