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:
- 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; }
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area><img src="image.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="#">
<area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position#id {
overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseoutdocument.getElementById("id").onmouseover = function(){
document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POSTif(isset($_GET["id"])) {
echo $_GET["id"];
}