Up next in 10
CSS Tutorial For Beginners 03 - Default Browser Styles
2K views
Feb 7, 2024
In this CSS tutorial aimed at beginners, viewers explore default browser styles, an essential concept in understanding how browsers render web content. The video likely delves into the default styling applied by browsers to HTML elements and how CSS can override or modify these styles. Viewers can expect to learn how to use browser developer tools to inspect default styles and how to reset or normalize them to create a consistent starting point for styling web pages. This tutorial serves as a foundational resource for beginners looking to gain control over the visual appearance of their web content using CSS.
View Video Transcript
0:00
Hey Ninjas! I'm Sean from The Net Ninja and this is CSS for Beginners Lesson 3
0:11
Default Browser Styles. Now the thing you have to remember about all browsers is
0:18
that they have style, and by this I don't mean they wear a trilby and go around
0:22
dancing to 70s funk music, I mean that they all apply their own default browser
0:27
styling to your HTML. And this could be little things like margin, padding
0:34
between elements, font sizes, underlining links and coloring them blue, that kind
0:39
of thing. So that if you don't have any CSS applied to your website, or if
0:42
someone views it without CSS, then they have these kind of default browser
0:47
styles to fall back on, so they all have this kind of basic experience of the
0:52
website. And different browsers, for example Chrome, Firefox, Internet Explorer, they all apply their own default styles. Now there's not much different between
1:02
them, they all kind of adhere to the same rules, but there may be slight
1:07
differences when it comes to things like font size or padding or margin. So what
1:11
we're going to do now is dive back into The Net Ninja website and we're going to have a look at these default browser styles
1:23
So here I am back on the website and I've got two browsers open. On the left
1:28
you can see Google Chrome, and on the right Firefox. And they're both applying
1:33
default browser styles here. We've stripped out all our own CSS and this is
1:37
just the basic styles being applied by the browsers. And as you can see if we
1:42
scroll down, both sets of styles are pretty similar. Yeah there may be slight
1:47
changes when it comes to things like font size and margin between the
1:51
elements, but they're both pretty spot-on. They're both very similar. Now these default browser styles, what are they? Well if you look at the headings
2:00
they're all bold and slightly larger. If you look at the links, they're all
2:04
underlined and they're blue on this side. The only reason they're purple here is
2:09
because I previously clicked them on Chrome. If we scroll down to the bottom
2:13
we can see the list items here all have these little bullet points. So these are
2:18
all the basic styles applied by Chrome and Firefox. And what they're doing is
2:22
they're saying well okay, I'm looking at this HTML and just in case the user
2:27
doesn't apply their own CSS, I'm gonna give them these default styles so that
2:32
if a user comes onto this website they have this basic website experience. Now
2:37
you might be sitting there thinking, why the hell am I talking about these
2:41
default browser styles? If I'm going to apply my own CSS to this website, why do
2:45
I need to know this? And the reason is this, if you are making your own website
2:50
and you apply your own CSS to this website, and down the line you're looking
2:55
at some header and you're thinking well hang on, why is this got all this margin
2:59
underneath the header? I didn't apply it. And that's the default browser styles
3:03
Nine times out of ten, that's what it's going to be. So you need to be aware of
3:07
this and you need to override this in your CSS. You need to explicitly say I
3:12
don't want margin on this header. Okay, so you always need to be aware of these
3:17
default browser styles and the part they play. Now this is a subject that sparked
3:23
some debate over the last few years and some people have gone as far as creating
3:27
these things called CSS resets. Now I'm not going to get into too much detail
3:32
about a CSS reset now, we're going to do that in a later video, but what I will
3:36
say is that in essence all they do is strip these browsers of their default
3:40
styles to different degrees so that you can have a more blank slate when it
3:45
comes to writing your CSS. Now some people agree with these, some people
3:50
don't. That's your decision as a developer at the end of the day. I'm not going to make that choice for you. What I will do is cover those later and go
3:56
through the benefits and the disadvantages of those. But for this lesson I think that's about it. Your main takeaway here should be that you
4:05
understand these default browser styles and you're aware of their existence in
4:10
the browser, so that you know when you come to write your own CSS that you have
4:14
to sometimes override these. So that's all there is for this lesson. In the next
4:19
lesson we're going to dive into the CSS itself and look at the syntax. If you
4:23
have any questions or comments about this one don't forget to comment below. Also don't forget to subscribe to these videos and I'll see you guys in the next one