0:00
Hey Ninjas! I'm Sean from The Net Ninja and this is CSS for Beginners Lesson 2
0:12
What the heck is CSS? Now CSS stands for cascading style sheets and the thing
0:20
you have to remember is that it's all about presentation. CSS controls the
0:25
presentation of HTML. So you may have joined me on my previous course on HTML
0:30
basics where we made a simple HTML document, simple web page and at the end
0:36
of that course I showed you the web page and it looked pretty cruddy. It was just
0:41
a load of text everywhere, a big image at the top, there was no kind of design or
0:45
aesthetics to it whatsoever. Now this is where CSS jumps in. It grabs all of that
0:50
content and it styles it to however you see fit for that website so it gets it
0:54
looking really good and another thing you have to remember about CSS is that
0:59
they have constantly changing standards. Currently we're in the kind of CSS 3
1:04
period and it's developing all the time and the thing is CSS and CSS 3 are the
1:11
same thing. People sometimes confuse these and they think they're separate things. They're actually one and the same. It's just that CSS 3 is the current
1:18
standard. It was like kind of or rebranded as the whole kind of package
1:22
along with HTML 5 as a new kind of web standard. So exactly the same thing, you
1:29
just have to bear in mind that there are constantly evolving standards when it comes to CSS 3 and there's varying support when it comes to one browser to
1:37
the next. Now a lot of the browsers have started to catch up and there is some
1:41
kind of unity between them all now so that they all have these kind of core standards built in but you just have to be wary when it comes to certain parts
1:50
of CSS and we're going to cover that later in the course, kind of browser
1:54
testing and things like that. So what I'm going to do now is dive into a website
1:59
and I'm going to show you the impact that CSS has. Okay so here we are on the
2:05
netninja.co.uk website and you can see here that it's an absolutely brilliant design. Flawless. I couldn't fault it. Now you can see that there's
2:17
loads of different design elements in it. You've got text weight, you've got
2:20
this little kind of ninja star throwing thing above the text, we've
2:25
got lines under the navigation, you've got the navigation position in certain
2:29
areas, different colours. This is all CSS at work and to illustrate this I just
2:35
want to open up Google development tools and I'm going to go to the sources tab
2:41
and find the CSS which is here and I'm just going to delete all of this CSS and
2:47
watch this. There we go. Now this is the website without CSS and I think you'll
2:53
agree this looks really ridiculous. No one's going to want to come here to learn
2:57
anything about CSS or HTML because I'd be like well you don't know what you're
3:02
doing. So that's the website without CSS. If we paste that back in you can see
3:07
what a massive effect CSS has. So this is really important. It's a really important
3:12
branch of front-end web development so you want to master your CSS
3:16
skills. There is no substitution for great CSS skills and you don't want to
3:21
be one of those people that just kind of fudge it. You know I'll learn just enough to get along and I'll play with some different properties and numbers
3:29
and you know try and get it looking good without really knowing what's going on
3:33
This is one skill you want to master because especially in the advent of
3:37
different devices you've got mobile screens, tablet screens, desktops, smart TVs. This is kind of highlighting the importance of CSS in responsive design
3:49
You want your website to look good on all devices so this is an area that you
3:53
really want to get good at and this is what I'm here to do. I'm here to teach
3:57
you all the core essentials of CSS to make sure you learn properly and can
4:02
develop at your own pace. So that's about it to this introduction to CSS. Hopefully
4:08
now you understand the importance of it and where it sits in the web development
4:12
arena. If you have any questions whatsoever feel free to comment below
4:16
I'll answer all of those. Don't forget to subscribe and I'll see you guys in the
4:21
next video where we're going to have a quick look at default browser styles
4:25
I'll see you guys then. you
