Using CSS 3 Ways

Quick reference

• 00:00 Okay in this video I wanna to talk about the three ways to use CSS.
• 00:09 CSS goes with HTML you can't really have CSS without HTML.
• 00:13 We're using CSS inside of HTML.
• 00:16 So we need an HTML page.
• 00:17 So i'm gonna come down here and click New File.
• 00:19 Once you call this index.html.
• 00:22 So we wanna use CSS on this page.
• 00:24 So I'm gonna take just a second here and rough out a quick skeleton in HTML.
• 00:29 Okay, so I've created this very basic HTML page and
• 00:32 all I has is a title that says Hello World and a big h1 tag that says Hello World.
• 00:36 So with this open we can click on this run and down here we see this URL.
• 00:41 So if we grab this, copy it, open another web browser and
• 00:45 paste it in we can see here's our page.
• 00:47 Now this is a live URL, anybody can see this from anywhere.
• 00:50 This is not a very powerful web server, only a few people can see this at a time
• 00:54 before it crashes, this is just for our development purposes basically.
• 00:57 So, here we have our site and there's nothing much to it.
• 01:00 But let's say we wanna use CSS, how do we do it?
• 01:03 Well there's main ways to use CSS on a webpage.
• 01:07 And the first way, the most common way is to reference an external style sheet.
• 01:12 And we've already created one external style sheet right here,
• 01:15 this style.css file.
• 01:17 And as we open these you will notice that they tab up at the top here so
• 01:20 we can toggle between them.
• 01:22 So how do we reference this style sheet in this HTML page.
• 01:26 Well you come to your head document, your head tag and you just create this new tag.
• 01:31 Its link rel equals and then we type in style sheet, oops.
• 01:39 Misspelled style, S-T-Y-L-E.
• 01:41 There we go stylesheet because CSS is a cascading stylesheet.
• 01:46 And then we give it a type equals to text/CSS.
• 01:50 That's saying, hey, it's CSS.
• 01:52 Now we want to give it a link HREF equals and then we just send the link to this,
• 01:58 whatever it's called, in our case style.css.
• 02:03 Close that tag, save it and that's it.
• 02:06 Now we can reference this.
• 02:08 Any CSS in this style sheet will work right here.
• 02:12 So let's give this a try real quick, we already have our P.
• 02:17 Let's create another one.
• 02:18 H1, cuz we have a heading tag in there.
• 02:20 And let's call this color, I don't know, we'll just say red.
• 02:25 And if we save this and come back and hit reload, boom, that changes to red.
• 02:30 Because we've defined h1 tags to be red and
• 02:34 we've linked to this stylesheet in our head document.
• 02:36 Document and so that works.
• 02:38 So that's the first way to use CSS.
• 02:40 That's the main way.
• 02:41 That's the way you're gonna use most of the time.
• 02:43 Another way is to just flat out write your CSS on the HTML page.
• 02:47 And you do that like this.
• 02:49 You basically create an internal style sheet.
• 02:51 And you do that by creating a style tag.
• 02:55 And you see we have an open tag and a closed tag and
• 02:58 inside of this tag it goes inside the head tag of your HTML document.
• 03:02 But inside here, we can pretty much do anything we want.
• 03:05 So let's make another other h1 tag and call this color: blue.
• 03:12 And if we save this, come back to our page and hit reload, boom.
• 03:16 Now, it becomes blue.
• 03:17 Now you'll notice we're still referencing this stylesheet up here.
• 03:21 And in that style sheet, it still says our h1 is red.
• 03:24 Well there's sort of an order of operations here.
• 03:26 A style sheet that's on an actual page
• 03:29 takes precedence over one that is referenced up here.
• 03:32 So that's why it becomes blue.
• 03:34 The third and final way to use CSS is right in your HTML tag itself.
• 03:39 We can type in style S-T-Y-L-E and
• 03:43 say color equals green.
• 03:47 Now if we save this and come back and hit reload boom, it becomes green.
• 03:52 And again, even though we have this listed as blue here and
• 03:57 red here this is called an inline style.
• 04:00 It's inline, right in your HTML.
• 04:03 And inline CSS takes precedence over everything else,
• 04:07 because it's closest to whatever you're trying to do.
• 04:09 So we're trying to change this Hello World right here.
• 04:12 This bit of CSS is right here.
• 04:14 It's right by it.
• 04:14 So it takes precedence.
• 04:15 Next is the internal style sheet right here.
• 04:19 And then third, is this.
• 04:20 So you might ask which one is better.
• 04:23 Well, from time to time we'll just want to do a little tweaky thing, so
• 04:26 we'll use inline CSS, the third way.
• 04:28 Sometimes you want to use an internal style sheet like this, but not often.
• 04:32 And the reason why you don't use it often is because if you use any amount of CSS,
• 04:37 this can get quite long.
• 04:39 And so you don't want like three pages of internal style on your HTML page.
• 04:44 In that case you would just put it in its own CSS style, its own CSS file and
• 04:49 then just reference it up here like this.
• 04:51 So those are the three ways you can use CSS and that's all for this video.

Lesson notes are only available for subscribers.