CSS Outline

Outlines are special visual properties similar to border, but take up no space in the layout. They will highlight an item without shifting its position.
An outline is a line that is drawn around elements, outside the border edge, to make the element 'stand out'. It specifies the style, color, and width of an outline, but don't have separate definitions for each of the four sides.

CSS outline-color

The outline-color property sets the color of an outline.

- Values:

invert - Makes a color inversion. This ensures that the outline is visible, regardless of color background (default).
name - specify a color name (blue, green, ...).
RGB - specify a RGB value, like 'rgb(10,20,250)'.
Hex - A hex value (#0101ff , #a8feb8).

- Syntax:

outline-color: value;

The outline-color does not work if it is used alone. You need to define the 'outline-style' property before the 'outline-color'.

CSS outline-style

The outline-style property specifies what kind of line to display. You can define one of the fallowing values.

none, solid, dashed, dotted, double, groove, ridge, inset, outset

- none specifies no outline. In the image below you can see the effect of the other values:
css outline-style

- Syntax:

outline-style: value;

CSS outline-width

The outline-width sets the size of the border.
- Values:

length - A pixel (px) value that defines the thickness of the outline.
thin - A thin outline.
medium - A medium outline (default).
thick - Specifies a thick outline.

- Syntax:

outline-width: value;

Example:

<style>
#idd {
outline-style: dashed;
outline-width: 2px;
outline-color: blue;
padding:3px;
}
</style>

<h4>Example CSS outline</h4>
 <div id='idd'>Free Web Development courses and resources.</div>

outline shorthand

Using the CSS outline shorthand property you can shorten the code. It accept three values representing outline-width, outline-style, and outline-color.
- Syntax:

selector { outline: width_val style_val color_val; }

The CSS code from the above example can be rewritten like this (the effect is the same):

#idd { outline: 2px dashed blue; }

<<-CSS Border -- Display and Visibility->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

CSS Outline

Css Course

CSS outline-color

CSS outline-style

CSS outline-width

outline shorthand

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month