0:00
Your ninjas what the hell is up my name is Sean from the net ninja and this is
0:11
CSS beginners lesson 6 external style sheets. So we learned in the last lesson
0:17
that inline styling and embedded style sheets can be pretty time-consuming and
0:22
being a front-end developer is all about being more efficient with your workflow
0:25
and a great way to do this with CSS is to use external style sheets so whereas
0:31
last time if we had embedded style sheets we'd have to go through every page and change those rules if we want to make a change to specific tags on
0:38
those pages this way we just have one external file one external style sheet
0:43
we make a change on there and as long as that style sheet is linked into every
0:48
HTML page that's going to have the effect you want over all the pages so
0:52
you just do it once instead of multiple times massive massive time saver and
0:57
it's something you want to be using in your workflow rather than inline
1:01
styling or embedded style sheets so what we're going to do is go back to the
1:05
simple HTML file I've already created and we're going to add an external style
1:10
sheet and make a few rules and just demonstrate how this works so I'm back
1:17
here in the index.html file from last lesson and I've just stripped out the
1:23
inline and embedded styles and I've totally ripped out all of the CSS rules
1:29
from the syntax.css file too now if you've not got a CSS file yet all you
1:34
have to do is right-click this pane and go to new folder to create this CSS
1:38
folder and then within that right-click again to create this new file here and
1:42
remember to call it .css at the end that's what says it's a style sheet it
1:48
stands for cascading style sheets okay so what we're going to do now is link
1:53
that within our head tag and if you've not seen our HTML basics course I'll
1:58
leave a link to the video which explains how to add an external style sheet I'm
2:03
going to go through it quickly here as well and it's a link tag we say rel for
2:08
one of the attributes and we're going to say this is a style sheet rel stands
2:12
for relation remember the type is going to be text slash CSS and then the h
2:22
reference is going to be this here so where do we want it to point to well we
2:29
want it to go into the CSS folder first of all so we say CSS and then we put a
2:34
forward slash to jump into that folder brackets is suggesting this syntax .css
2:39
here it's already found the file so I'll just click that and we're done I'll
2:43
close that off now and I'm going to save this and then I'm going to copy this
2:49
jump into my contact HTML file and place it in the head here also save that and
2:57
now we have this syntax .css linked to both the index and contact HTML files
3:03
so we can start adding some rules in our syntax .css file now and one thing
3:09
we did last time was change all the P tags we added some styles in the head on
3:13
both pages up here to change the font size of the P tags so we're going to do
3:18
that again I'm going to say P open my parentheses and close them and then I'm
3:25
going to give this a property of font size of 18 pixels this time and I'm
3:31
going to say color is blue so I want all the P tags to have a font color of
3:37
blue and a font size of 18 pixels and again don't pay attention to these
3:42
properties and values I'm just demonstrating how we're linking this style sheet up at the minute we're going to cover this later so just to show you
3:51
what this is done I'm going to save that and then I'm going to right-click index first of all show in Explorer we're going to view this in a browser so I'm
4:01
going to go open with Google Chrome and you can see that every P tag all these
4:07
here and the one at the top is blue okay let's go to the contact file I'm going
4:13
to minimize this and open this with Chrome and same again everything in the
4:22
contact us file is also blue so hopefully that demonstrates how much
4:28
easier and how much quicker it is to have this external style sheet linked in
4:33
before we would have had to go into both files and do that and change the rules
4:38
depending on what we wanted whereas now we just have to go into this one file
4:42
and change the rule here so if I put red and then save this again view this in
4:48
the browser everything's changed and if we go back to the contact us page and
4:57
refresh everything's changed there so really simple really easy to update the
5:03
best way to add CSS to your document is via the external style sheets so that
5:08
about covers it for this episode if you have any questions don't forget to
5:12
comment below I'll answer all of those questions as soon as I can don't forget
5:16
to subscribe if you like these videos there's more coming soon and I'll see you guys in the next movie
