Up next in 10
CSS Tutorial For Beginners 05 - Inline & Embedded Styles
755 views
Feb 7, 2024
In this CSS tutorial designed for beginners, viewers learn about inline and embedded styles, two methods for applying CSS to HTML elements. The video likely explains the differences between inline and embedded styles, with inline styles being applied directly within HTML elements using the "style" attribute, and embedded styles being defined within the "style" element in the HTML document's head section. Viewers can expect to understand the advantages and limitations of each method and how to use them effectively to style their web pages. This tutorial serves as a foundational resource for beginners looking to explore different ways of incorporating CSS into their HTML documents.
View Video Transcript
0:00
Yo Ninjas, what the hell is up
0:08
My name is Sean from the Net Ninja and this is CSS for Beginners Lesson 5, Embedded and Inline Stiling
0:15
So there's three ways to add CSS to your document and the first way is by inline styling
0:21
and that is not an acronym you see in there, that YUK, that is yuck because I can't stand inline
0:27
styling. Second way, embedded style sheets. Again, yuck, don't like it. Third way, external
0:33
style sheets, cowabunga. Don't ask me why I've put cowabunga. I haven't a clue. It's the first
0:39
thing that popped into my head and in my head it means it's great. So, inline styling, right
0:48
the reasons I don't like it is because it's time consuming to style multiple elements. Okay
0:53
If you have a ton of different elements on your HTML document and you want to style all those
0:58
say you've got, I don't know, 50 P tags and you want to give them all the same style
1:02
you have to go into each P tag individually and style them. So it's going to take you forever just to make one page
1:09
The second reason is tricky to manage an update. Say, for example, you've done all those styles on those P tags and then you want to change the colour
1:16
Lo and behold, you have to go through all of them again and change the styles. Thirdly, it's messy
1:21
It makes your HTML look terrible. If you're putting inline styles all over the place, it's going to look disgusting
1:27
Now, there is a reason to use inline styling, and it's a very specific reason, okay
1:32
If you have a tag that has a very specialized purpose, I don't know, maybe it's some kind of warning message
1:40
and you want this tag to overwrite any other styles, then feel free in this one case you could use a specialized inline rule on that tag
1:48
And I'll show you that later. Okay, the second way of doing it, embedded styling
1:55
Again, it's time consuming to apply global styles. If you have various pages and you want to style P tags on each of those pages the same
2:03
you have to go into each page and embed an internal style sheet on each of those pages
2:08
So, very time consuming, hard to maintain an update. If you want to change anything again, you have to go into all of those pages separately
2:15
and update your inline embedded style sheet The reason I like these and I say like loosely I don really like them but they do have their usage and that because they good for making specific page styles
2:28
So if you have one page that is radically different from the rest and you have very unique styles
2:33
on this page, then feel free. You can embed an internal style sheet on this page to overwrite
2:39
kind of global external style sheets. Now, I'm not going to go into external starsheets now
2:44
That's for the next video. So what I'm going to do now is jump. back into the code and we're going to have a look at inline and embedded styling. Wow
2:52
Okay, so here I am back in brackets and we're in the same HTML document as last time
2:58
Now I'm going to add some inline styling first of all and this is how you do it
3:02
Say I want to style this header element here. What I want to do is add a style attribute and if you don't want, if you don't know what
3:09
attributes are then you best check out my HTML basics course. I'll pop a link to that video down below where I discuss attributes
3:17
back here so we're going to add a style attribute this is where we control the CSS all within
3:21
this one attribute if we're doing inline styling and the same as when we added um properties and
3:29
values in our declaration in rules in the last video we're going to have we're going to add
3:33
properties and values within this style attribute okay so say I want to make this header
3:38
position absolute exactly the same way we've got our property here with the colon then our value of
3:47
the property here with a semicolon. And then we can just stack these side by side. So I can add another
3:52
one. I can say top zero, left, zero, width, 100%. Okay. And again, don't pay attention to what I'm
4:00
doing here, to these properties and values. I'm just showing you how to add inline styles via this
4:05
style type. Okay, so that's how we do them. Now, I mentioned that it's hard to update, and it's
4:11
hard to add styles to everything. Let's take this for an example. I'm going to copy this P tag
4:18
and I'm going to paste it about, I don't know, five, six times, and I want to style these all the
4:24
same way. Now I'm going to have to go into this and say style font size 10 pixels. Okay, now I want
4:32
to do that for each one each P tag So I going to have to get this copy it go here paste paste pace now that going to get boring really quickly and this is just what seven or eight tags if you have 20 tags on your page and you have 20 pages just
4:50
imagine how long that is going to take I would not want to be in your shoes so
4:54
there's better ways to do this okay and one slightly better way is by using an
5:00
embedded style sheet so I'm gonna delete all these right now so they don't conflict
5:07
and then what we do to embed a style sheet we go into the head tag and we open our style
5:16
tag here brackets automatically closes it for me and then within these two style tags we
5:21
add our rules our CSS rules just as we did in the previous movie in an external
5:28
style sheet exactly the same so I could just say here P and then do my declaration
5:35
between the curly braces font size 10 pixels and now instead of writing it multiple times in each tag that's going to grab all of these
5:43
p tags on this one here as well on the page and it's going to give them all a font size of 10 pixels so you
5:49
can imagine how much easier that is to update than inline styling okay now again there is a problem
5:55
with this imagine we had a few pages and I've already made one more here this contact page and it's
6:00
very simple but again I've got a simple p tag here and in fact I'm going to copy and paste this a few times
6:07
okay now we've got two pages so we want exactly the same styles on both pages now this
6:16
style sheet here is not going to affect the contact piece here because we've not got
6:20
this style embedded in the head so what we'd have to do is copy let's get in the
6:26
index copy this style tag and everything in it go to the contact page and paste
6:33
it into our head again and now that works however if you have 20 pages you're going to have to do this on every page so again pretty time consuming
6:41
and imagine this halfway down the line you're making a a website for a client and then you show him
6:49
your first version where all the fonts red and then he says hey you know what I've changed my mind
6:53
I want the font blue now that is going to be a shot in the foot because you're going to have to
6:59
go through each page and you going to have to change the color here if it was color red you going to go into each page and change the color to blue And that just one property change Imagine if you wanted to change a whole lot of things on each page you going to have to go in and style every page change rules in every
7:16
embedded style sheet, okay? And that's why I don't like them. I prefer to have an external
7:20
style sheet and then we link it into every page and then we just have to change it once and
7:25
it updates all the pages. And I'm going to tell you about that in the next episode, the next
7:29
movie. Alright. So I did say they have their uses and yes they do and I'll cover this embedded
7:38
style sheet use first. Imagine just on the index page we have this welcome message. Okay. I'm going to
7:45
give this a class of welcome. Okay. And we just have this welcome message here. Now if this was
7:54
only on this page then there is no need to style this in an external starsheet that is going to be
7:59
globally accessible from every page because it's only going to affect this one page
8:04
So we could just style it here in this one page in this embedded style sheet
8:09
So what we do is put the class, the period, remember that starts a class, and then we'd go welcome
8:15
And then we'd say font size 10 pixels, colour, red, because we want the welcome text to be red
8:20
And that's a good example of when to use an embedded style sheet
8:24
A good example of when to use an inline style is something similar
8:30
Instead of having this here, we could just do... Oops, we could just go here and add a style equals font size, 10 pixels, color, red
8:48
And that will do the same trick. Okay, so there, they do have the uses very occasionally
8:54
use them sparingly otherwise it's going to be really difficult to update okay so that about
8:59
covers it for embedded and inline styling if you have any questions don't forget to comment below
9:05
I'll answer all of those as soon as I can subscribe to these videos if you like them and I'll
9:09
see you guys in the next video where we're going to be covering external style sheets cowabunger
9:24
I'm