Web design offers a massive library of choices for page design. One of those great options is being able to add a CSS outline onto page elements. This provides a great way to segment out HTML elements with a very direct style the user is sure to see.
However, there is more to a CSS outline than just adding a styled border to the elements. In this short guide, you will learn how to set your own CSS outline as well as understand its differences from a traditional CSS border.
Before you jump any further into outlines, be sure to have a solid understanding of basic HTML and CSS. For the former, a read into HTML for Dummies provides a great starting point. For the latter, CSS Basics for Beginners will give you a crash course on CSS.
What is a CSS Outline?
Much as its namesake implies, a CSS outline provides an outline that surrounds an HTML element. In the sample HTML code below, you can see one of the paragraph tags within the body has been given an id of “outline” to work with.
If you are not familiar with the use of the id attribute in HTML, please refer to HTML/CSS Class and ID Selectors: Everything You Need to Know for a detailed write-up on the topic.
In the next example image, a CSS stylesheet is used to provide the “outline-style” property to the target HTML paragraph element. The rendered result is displayed next to it showing an outline around the text.
In a previous post, the concept of setting up a CSS border provided a very similar effect to the “border-style” property. In much the same way, the outline property cannot be displayed on the page if a style is not declared. After all, the browser needs to know what to show before it can attempt to show it.
Before you jump into any of the other design options provided for the outline property, you need to understand how it differs from the CSS border property. Firstly, a CSS Outline sits on top of or apart from the standard CSS Box Model. This means that the outline does not directly alter the element’s dimensions such as width and height since it does not take up space from the box model. Secondly, a CSS border can be applied selectively to the left, top, right, and bottom of an element. A CSS outline, however, can only be applied as a full set on all four sides.
If you are wondering why you would use an outline over a border, the answer normally returns to the idea of element focus. A CSS outline can be used to add an emphasis to page items such as links, important terms, or even images. An outline can be added in place with the need for the user to hover in order for it to become active.
CSS Outline Properties
The Outline-style Property
Keeping in trend with great CSS abilities, the outline properties provide a set of flexibility in design. The following values are for the outline-style property. Each one gives a different visual appearance for the outline itself.
- dotted – This value gives a dotted appearance for the outline.
- dashed – This value provides a dashed look for the outline.
- solid – When used, this value sets a solid line for the outline.
- double – This value sets a double outline.
- groove – When applied, this value gives a 3D groove to the outline.
- ridge – Set a 3D ridged look for the outline.
- inset – This value applies a 3D inset on the outline.
- outset – A value used to provide a 3D outset outline.
- none – This value states there is no outline, (the default).
- hidden – This sets an outline but hides it on the HTML render.
In the CSS example image below, you can see the outline-style property has been set to the value of “double” for the outline.
The Outline-width Property
The outline-width property changes the width of the outline. Note that this affects the width of the outline itself, not the space the target element takes up on a row. You can set this property using one of the following values.
- thin – Sets a thin line for the outline, (default setting).
- medium – Applies a medium line for the outline.
- thick – This value sets a thick line on the outline, generally about 5 pixels.
- User declared size – You can set the size as you wish via px, in, cm, cm, em, or pt values.
In the example below, the outline-width property has been set to “thick” to alter its width.
In the next example, the outline-width has instead been set to a pixel size of 10.
The Outline-color Property
As you might have guessed, the outline-color property modifies the color value of the outline. The color can be applied using a hex, RGB, and HSL value. You may even use a direct color name supported by CSS. In the example shown below, the outline-color has been set to red.
It’s also worth noting that you can set the color value to “invert”. This provides an inverse of the color. This will allow the outline to appear visible against the background.
The Outline-offset Property
The outline-offset property provides spacing between the element’s edge and the outline itself. This is a great place to serve as a reminder that the outline is not adhering to the CSS box model on an HTML element. In the example below, note how the outline-offset value is set to six pixels.
In the next example, the outline-offset property is set with a value of 26 pixels.
You can see how the outline has moved out and around from the element with no concern for the other paragraph element sitting above it. In fact, the other paragraph element is now obscured by the outline attached to the target HTML element.
This is why it is a good idea to understand the relationship between the outline and an element as well as the difference between its behavior with the box model. Knowing these key differences can help you decide if you want to use a CSS outline or a CSS border on an element.
___________________________________________________________________
Even with this bit of CSS knowledge under your belt, there is a vast ocean of abilities waiting for you. Take another step towards building your future. Claim advanced programming skills to tackle your designs. The creativity of programming is allowing people to do even more with their ideas.
If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
