Learning How to Use CSS Outlines

In CSS outlines there are lines that are shown all around an element so that it would show and stand out. This line would show outside of the border part of the element. In order to change the different aspects of these lines, the outline properties in CSS are used.

Basics of CSS Outlines

The CSS outline can be used for specifying the following features of the outline to be used:

    • Style
    • Color
    • Width

 

You need to keep in mind that although the outline is something that goes to the element in order to make it appear more distinct, it is something different from the border. Unlike the border which will affect the total width and length of the element, the element will have no effect on that. This means you can set it on top of the space that you have allotted for the element.

The CSS Outline Properties

These are the properties used for setting the CSS outline:

      • CSS outline-color
      • CSS outline-style
      • CSS outline-width
      • CSS outline shorthand

CSS Outline-Color

This is the property that is used for setting the color to be used for the outline. This would come after only you have defined the outline style. You cannot set the outline color without having defined the style to be used. On the properties, there might be several values that would show. The color is the actual color of the outline. The value invert means the color of the outline is going to be inverted which would make the outline visible. This is the default setting. Inherit means that the color is going to be taken from the main element.

Here is a sample code for setting the outline-color:

p

{

outline-style:dotted;

outline-color:#00ff00;

}

This is the property that actually sets the outline. This would have to be set first before the other two properties are defined. There are many styles from you can take your pick. You can choose the outline to be dotted, dash or ridge. It gives just as many options when compared with that of the border. This property is supported in most of the major browsers in use today. Here is a sample code that sets the outline style:

p
{
outline-style:dotted;
}

CSS Outline Width

This property sets the total width which can be used on the outline. Like the outline color, the outline width should only be set after the style has been specified. If you don’t set the width of an outline, then it would revert back to the default value which is medium. Here is an example code that defines the outline width:

p

{

outline-style:dotted;

outline-width:5px;

}

 

CSS Outline Shorthand

There is a much simpler way of setting the outline. This method is through the use of the CSS outline shorthand which defines all the three major elements of the outline at the same time. Instead of using three separate definitions, you can just state in one. Here is a good example of a code that uses outline shorthand:

p

{

outline:#00FF00 dotted thick;

}