Outline

Quick reference

• 00:05 OK, in this video I wanna talk about the outline.
• 00:07 So we've talked about the box model, padding, margins, borders, all that stuff.
• 00:11 There's one more element that sort of relates to that and that's the outline.
• 00:15 Let's take a look.
• 00:16 To use an outline we do outline-style and
• 00:22 you can see our development tool gives up these options.
• 00:24 So we can have dashed, dotted, double groove, hidden, inherit, inset.
• 00:29 And what else do we have, none, outset ridge and solid, so let's just do dashed.
• 00:36 Now if we save this hit reload, we get this dash thing outside of the border.
• 00:41 Outlines go outside of a border, they do not change your height or
• 00:45 width or anything.
• 00:46 It's just outside of everything.
• 00:47 An outline is inside of a margin, so you'll see sort of interesting.
• 00:52 If we give this a margin of say 50 pixels, save it, come back and hit reload, boom.
• 00:58 You see the outlines stays the same and the margin goes outside of the outline.
• 01:02 So that's something to keep in mind.
• 01:04 So there are few properties for outline, you can also do outline-color.
• 01:09 Give this a specific color and let's give this black.
• 01:13 And again you can use your hex codes or whatever, here reload,
• 01:17 boom that becomes black.
• 01:19 You can also do outline-width to give this a size, so if we go ten pixels,
• 01:25 save this and hit reload, boom we get a big, sort of larger outline.
• 01:29 So like with all the other elements we've worked with so
• 01:31 far you can do a shorthand for this as well.
• 01:33 For that we just leave off the properties and we just use outline.
• 01:38 And then we can give this, let's say the order is with style and color so
• 01:42 we go ten pixels.
• 01:45 And we wanna give this, let's pick a different one, dotted.
• 01:48 And a color, put black in, save this,
• 01:52 we can delete these guys boom, we get the same thing only dotted.
• 01:57 So again you can use the shorthand if you like.
• 02:00 I sort of like just printing everything out.
• 02:04 Just because it's easier for me to remember.
• 02:06 I don't like remembering all these orders.
• 02:08 And it's just easier to be explicit you know, so let's take a look at this and
• 02:11 let's go through here.
• 02:13 And look at some of these options because some of them are a little weird.
• 02:16 So if we do a solid, that is just what you would expect it to be,
• 02:21 just a solid outline.
• 02:22 And actually let's change this color to a sort of grayer one,
• 02:28 you'll see why in just a second.
• 02:29 And in fact I'm gonna give this a 20 pixels so we can do solid.
• 02:34 We can also do double and
• 02:37 we get these two outlines kind of neat looking.
• 02:43 What else do we have?
• 02:44 We can do groove, and we get this neat 3D looking thing.
• 02:52 We can do ridge.
• 02:56 That's a sort of slightly different 3D looking thing.
• 02:59 We can do inset.
• 03:04 That looks like that, interesting.
• 03:06 We can do outset.
• 03:10 That's kind of nice.
• 03:12 We can do none.
• 03:15 And you ask why would you want none?
• 03:16 Well sometimes you need to space things out a certain way with other elements and
• 03:21 it's a good idea to do that.
• 03:23 And finally you can do hidden.
• 03:26 Again similarly it just disappears, so that's outline.
• 03:29 One last thing you can do, outline-offset,
• 03:35 oops, offset.
• 03:38 Let's give this a ten pixel.
• 03:41 Let's call this solid.
• 03:45 So you see it pushes it away from the underlying element so
• 03:48 you have this border here.
• 03:50 Now there's ten pixels between the border and the outline and
• 03:54 we can make this even more dramatic boom like that.
• 03:58 So that is useful as well and you'll see later on some uses for that.
• 04:01 That's outline and that's all for this video.

Lesson notes are only available for subscribers.