Tuesday, March 13, 2018

Css outline (Css tutorial)

Hello guys! welcome to this wonderful section of my tutorial on CSS. In this tutorial i want to talk about CSS Outline.

Outlines are very similar to borders, but there are few major differences as well, which are listed out below:
  • An outline does not take up space.
  • Outlines do not have to be rectangular.
  • Outline is always the same on all sides; you cannot specify different values for different sides of an element.
NOTE: The outline properties are not supported by IE 6 or Netscape 7.

You can set the following outline properties using CSS.
  • The outline-width property is used to set the width of the outline.
  • The outline-style property is used to set the line style for the outline.
  • The outline-color property is used to set the color of the outline.
  • The outline property is used to set all the above three properties in a single statement.
 You can also read: Html Formating[CONTINUATION]

The outline-width Property
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border width attribute that we discussed in Css border tutorial.
 
A width of zero pixels means no outline.

Below is a short example:

<p  style="outline-width:thin;">
This text is having a thin outline.
</p>

<br />

<p  style="outline-width:thick;">
This text is having a thick outline.
</p>

<br />

<p  style="outline-width:4px;">
This text is having a 4px outline.
</p>

The outline-style Property
The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values:
  • none: No border. (Equivalent of outline-width:0;)
  • solid: Outline is a single solid line.
  • dotted: Outline is a series of dots.
  • dashed: Outine is a series of short lines.
  • double: Outline is two solid lines.
  • groove: Outline looks as though it is carved into the page.
  • ridge: Outline looks the opposite of groove.
  • inset: Outline makes the box look like it is embedded in the page.
  • outset: Outline makes the box look like it is coming out of the canvas.
  • hidden: Same as none.
Below is a short example:

<p  style="outline-width:thin;  outline-style:solid;">
This text is having a thin and solid outline.
</p>

<br />

<p  style="outline-width:thick;  outline-style:dashed;">
This text is having a thick and dashed outline.
</p>

<br />

<p  style="outline-width:4px;  outline-style:dotted;">
This text is having a 4px and dotted outline.
</p>

You can also read: Html Attributes 2

The outline-color Property
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color property.

Below is a short example:

<p  style="outline-width:thin;  outline-style:solid;
                        outline-color:red;">
This text is having a thin, solid and red outline.
</p>

<br />

<p  style="outline-width:thick;  outline-style:dashed;
                        outline-color:#009900;">
This text is having a thick, dashed and green outline.
</p>

<br />

<p  style="outline-width:4px;  outline-style:dotted;
                        outline-color:rgb(13,33,232);">
This text is having a 4px, dotted and blue outline.
</p>

The Outline Property
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed above in a single statement.

Below is a short example:

<p  style="outline:thin solid red;">
This text is having a thin, solid and red outline.
</p>

<br />

<p  style="outline:thick dashed #009900;">
This text is having a thick, dashed and green outline.
</p>

<br />

<p  style="outline:4px dotted rgb(13,33,232);">
This text is having a 4px, dotted and blue outline.
</p>

Alright guys, we have come to the end of this tutorial on CSS outline. Feel free to ask your questions in any area you don't understand properly.

Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.

You can follow us on twitter 
You can follow us on google+ 
You can also follow us on pinterest 


Links to previous tutorials on CSS : Css Introduction (Css tutorial) ,  Syntax (Css tutorial)  ,  Inclusion (Css tutorial) , Css Measurement Units (Css tutorial)  , Backgrounds (Css tutorial) , Fonts (Css  tutorial)  , Text (Css tutorial)  , Images (Css tutorial)  , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial)  , Css margin (Css tutorial)  , Css List (Css tutorial)  , Css padding (Css tutorial)  , Css cursor
Share:

0 comments:

Post a Comment