Subtitles of the Movie

In this movie we will see how to set up our outlines around content in order to make it stand out a little bit more. Our outlines are shapes that are drawn over the top of a selected box that do not add to the size of that box and can span multiple lines. The specification states that the outline may be drawn starting just outside the border edge. Now, because it says the outline may be drawn, our browsers may or may not start exactly right there so it is a little bit open to interpretation to our browsers may have some differences between them. Now, overall, our outline property will behave much like the border property as outlines use these same property values so as you can see, we have the outline width and that's going to behave exactly like our border width. Then we have our outline style which will behave exactly like our border style. The only exception is that we cannot have an outline style set to Hidden. And then lastly we have our outline color, which will behave just like our border color except we get the additional property value of Invert. Now, what the Invert property will do is it will set the color to the opposite color of what is established there on the page. Now, not all browsers are required to support that, so if they are not supporting it, it will just use a default color. In addition to having all of these same property values, our outline property also has a shorthand method of writing all those options in and it actually looks a lot like our border shorthand. So for our outline shorthand we have the outline property followed by style, width and color and again, our border is not really going to matter. So let's go ahead here and let's jump over into our sandbox so that we can see our outlines in action so that we can understand it a little more clearly. So I'll jump over to our HTML for our sandbox. I'll go ahead and get the browser up too and I want to set up an outline here around our H1. So first of all I'm going to go ahead and add in a border here and I'm going to see the border to 1px, black and solid and I'll save and just refresh here. So there I see my border. And the next I'm going to set up my outline and I go ahead and use my shorthand here too. I'll set it up to 3px, we'll make it red and I will make it dashed. I'll save and then refresh and as you can see, my outline shows up on the outside of my border. Now, the reason why you might want to end up utilizing your outline like this is it's another enhancement that will indicate where hyperlinks are. So if I jump back in here into my HTML and I set up a rule for the hover on all of the A tags in here and I set up an outline to 5px, purple, it's a solid and then jump down here and just add in a link right here. I'll save and then jump back over here and refresh and whenever I hover over that, it puts an outline around it. One of the reasons why it's popular to put an outline around some of your hyperlinks is because whenever you do this, it does not increase the size of the box. So this is being added to the outside of our box and it's drawn over top of the box so we're not messing up our layouts. Now, if you ended up adding in a border on this element using your border control, it would actually resize that content region and perhaps mess up your overall design. So the use of outlines is a good thing in terms of accessibility and for design purposes. However, it does end up kind of looking kind of strange, depending on how you have it set up. But it is a good, nice accessibility control. Now, that concludes our look on how to set up outlines as well as why we might want to and with it, it concludes our look at using CSS to control our various user interface elements.