Outline Properties: CSS Web Design Tutorial Series Part 30

outline properties css

CSS Outline Property

This will be a short lesson on the outline properties in CSS. The outline property draws a line around the outside of an element to make it stand out. Style, color, and width can be specified. It is very similar to a border but has some differences. An outline is NOT part of an element’s dimensions. The total width and height of an element are not affected by an outline. It is NOT part of the box model. To learn more about the box model, click here: BOX MODEL. See the first set of images below, for exmaple-1.

index.html Example 1: outline property

outline property html

my-styles.css Example 1: outline property

outline property css

Displayed Page Example 1

outline properties css display

We create a simple P ELEMENT in the index.html document. In my-styles.css, we create a CSS rule with p as the SELECTOR. The first declaration adds a 10 pixel, solid, lime green border. Next, we begin adding our outline properties, starting with outline-style. Outline-style needs to be declared in order for the other outline properties to have any effect. This is exactly like the border properties where border-style needs to be declared first. We specify that we want solid style. The following outline properties, outline-color: and outline-width: define the color and width of the outline to be lime and 2 pixels thick. Refer to the list below to see the values that can be used for the outline-style property

VALUES THAT CAN BE APPLIED TO OUTLINE-STYLE

  • solid – solid line outline
  • double – double line outline
  • dotted – dotted line outline
  • dashed – dashed line outline
  • groove – 3D groove outline (outline-color: value; affects the design)
  • ridge – 3D ridge outline (outline-color: value; affects the design)
  • inset – 3D inset outline (outline-color: value; affects the design)
  • outset – 3D outset outline (outline-color: value; affects the design)
  • hidden – defines a hidden outline
  • none – defines no outline

When specifying the width of your outline, besides using (px, pt, em, etc.) to set the width, you can use thin, medium, or thick. These are pre-defined values. Try out each value to see what result you get. The outline property can be written shorthand as well. See the images below.

index.html Example 2: Shorthand outline property

css outline property html

my-styles.css Example 2: Shorthand outline property

css outline properties

Displayed Page Example 2

css outline display

We start by creating a p element with a CLASS name of “outline” in the index.html document. Over in the my-styles.css document, we add another CSS rule with a selector of p.outline. In this rule, we have two shorthand declarations. One for the BORDER, and one for the outline. They are virtually identical. The shorthand outline rule specifies that we want a 5 pixel wide, dashed style, blue outline.

That wraps up this simple lesson on CSS outlines. Thanks for reading, we’ll see you in the next lesson.

ALL OUTLINE PROPERTIES

  • outline: – shorthand, sets all outline properties for width, style, and color in a single declaration
  • outline-style: – sets the style of the outline
  • outline-color: – sets the color of the outline
  • outline-width: – sets the width of the outline
  • outline-offset: – used to specify the space between the outline and the edge or border

index.html Source Code


<!doctype html>
<html>
<head>
<title>CSS Outline Properties</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<p>This element has a black border and a lime green outline.</p>

<p class="outline">We are using the shorthand outline property on this element.</p>

</body>
</html>

my-styles.css Source Code


p {
border: 10px solid black;
outline-style: solid;
outline-color: lime;
outline-width: 5px;
}

p.outline {
border: 2px solid black;
outline: 5px dashed blue;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: