Css Course


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: - 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: - 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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
CSS Outline

Last accessed pages

  1. Mysql SELECT JOIN tables on two different Databases (4498)
  2. jQuery UI draggable - Drag elements (11448)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142520)
  4. Using the Bone Tool (4253)
  5. Node.js Move and Copy Directory (20134)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (523)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (62)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)