Styling HTML with Inline CSS

Quick reference

• 00:05 In this video, I wanna talk about formatting text a different way,
• 00:08 by using CSS.
• 00:09 Now we're not gonna get into a whole lot of CSS in this course.
• 00:12 We're basically just gonna talk about HTML.
• 00:14 We'll mention it a little bit later on, and we'll use a Bootstrap CSS framework,
• 00:18 but I'm not gonna teach you flat out CSS.
• 00:21 But you do need to know that there's a way to use CSS in an HTML tag.
• 00:26 Now basically CSS can be used three different ways.
• 00:29 One is to create a style sheet in a separate file and
• 00:32 reference it in the head, up here.
• 00:34 Another way is to create an actual style sheet in your head, just like this.
• 00:41 Style, style, and then just like right here, type in your CSS stuff.
• 00:47 The third way, and the thing I wanna talk about in this video,
• 00:52 is to use it directly in an HTML tag.
• 00:55 And it's pretty easy.
• 00:55 Let's see, this is a line of text.
• 01:00 Save this, head back, hit reload.
• 01:03 This is a line of text, no big deal.
• 01:05 Now if we wrap this in a <p>, paragraph tag, save it.
• 01:11 Again, no big deal, a little bit of formatting.
• 01:14 Now if we wanna change the way this looks using CSS,
• 01:18 we can actually add CSS right to the <p> tag and you'll do this all the time.
• 01:22 You'll just type in style.
• 01:25 Oops, I cannot spell today, s-t-y-l-e = and " ".
• 01:30 And inside of here, you write your CSS.
• 01:33 And again, I'm not gonna teach you CSS in this course,
• 01:36 we'll talk about it a little bit.
• 01:38 But if you know any CSS, you could use it right here.
• 01:41 So let's say font-size, and let's go 35 pixels.
• 01:48 So this is a basic CSS format.
• 01:50 You have your CSS on the left then a : and
• 01:54 then the value on the right followed by a ;.
• 01:57 So if we save this, and come back here and hit reload,
• 02:01 all of a sudden this gets real big.
• 02:02 We could go color = red, boom.
• 02:06 It's red.
• 02:08 666, 666.
• 02:12 Use a hex color code.
• 02:15 It should be sort of a gray color.
• 02:17 So that makes it very easy to style different tags.
• 02:22 And if you know a little bit of CSS, it's a super easy way.
• 02:25 Now I should mention when you create CSS like this in a tag,
• 02:29 it overrides any other CSS you have in your file.
• 02:33 So if you've referenced a CSS file up here in your head section,
• 02:37 that's generally the CSS you want to use.
• 02:40 But you can override that CSS by putting in this style tag right in here.
• 02:45 And for instance, if we go color : red this only applies to this tag.
• 02:52 If we do another <p> right here,
• 02:56 this is another line, and save it.
• 03:01 This other one is not red even though we're using a <p> tag, the style,
• 03:06 the CSS style, only applies to this specific <p> tag, not every <p> tag.
• 03:11 Now CSS, if you create a CSS file and you reference it in your head file,
• 03:16 and you instruct that CSS file to change all <p> tags to red, it will go through and
• 03:20 change all <p> tags to red.
• 03:22 But when you specify it on a specific line,
• 03:24 it only deals with that specific line.
• 03:26 So that's CSS, in line CSS, some people call that.
• 03:30 Kind of useful, we use that from time to time.
• 03:32 And in the next video I wanna talk about special characters.

Lesson notes are only available for subscribers.