 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome again to KTL's HTML and CSS tutorial. Today we will study lesson-31.
In our previous lesson we studied about CSS margin properties.
Today we will study CSS Outline properties.
CSS Outline property
CSS Outline property is used to draw an outline to the border. It is a line drawn outside the line of border. By displaying outline to a border of an element that element gets highlighted in the web page.
We will display an outline in our web page. Open a new Notepad file. Copy all code of lesson-30 in this file. We will write code to display outline for the border of header. To do this insert the following code.
outline: 0.3vw solid green;
 |
| Figure 31-1. CSS outline property |
Save this file as "Lesson-31" and "Lesson-31.html". Click on the figure shown above for PDF file of source code. Double click on HTML document and see the output.
 |
| Figure 31-2. CSS Outline property |
We can see an outline around the border of header. Click on figure 31-2. You can see border, padding, margin, and outline in this web page.
Remember: CSS border property and CSS outline property have similar syntax. It is as follows:
outline: width style color;
CSS outline-width property, CSS outline-style property, CSS outline-color property
We can specify individual properties for width, style, and color. For example,
outline-color: green; or outline-style: dashed;
Note that we can specify color using name of the color, rgb value, hex value and so on.
Style can have values solid, dashed, dotted and so on.
For mentioning width absolute or relative measurements can be used. We can also specify thin, medium, and/or thick for width.
Important Points:
1. CSS outline property is used to display outline for a border.
2. Like CSS border property, in CSS outline property we can specify width, style and color.
3. We can also use separate properties for outline-width, outline-style, and outline-color.
Lesson-30 Lesson-32
