Up next in 10
In this CSS tutorial tailored for beginners, viewers are introduced to external style sheets, a powerful method for organizing and applying CSS styles across multiple HTML pages. The video likely covers how to create separate CSS files with the .css extension and link them to HTML documents using the "link" element in the head section. Viewers can expect to learn about the benefits of external style sheets, such as easier maintenance, better organization, and enhanced reusability of styles across multiple web pages. This tutorial serves as an essential resource for beginners looking to adopt best practices in managing CSS styles for their web projects.
Show More Show Less View Video Transcript
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
Programming
Software
Online Communities
Skins, Themes & Wallpapers