How to Use CSS Outline Offset Property
How to Use CSS Outline Offset Property
This Blog You Will Learn
ஃ How to Use CSS Outline Offset Property
ஃ Syntax :
ஃ structure diagram examples
ஃ Example
ஃ Output
How to Use CSS Outline Offset Property
CSS outline-offset property is use to control the space between element.border and outline is line drawn around an element similar to border
✅Syntax :
selector {
outline-offset: length;
}
ஃ structure diagram examples
How to Use CSS Outline Offset Property
Example
<!DOCTYPE html>
<html>
<head>
<style>
.pro {
width: 250px;
padding: 20px;
margin: 40px;
border: 3px solid red;
outline: 4px solid blue;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>CSS Outline Offset Property</h2>
<div class="pro">
<P>CSS Outline Offset Property.</P>
<p>https://webdesigningtheory.blogspot.com/</p>
</div>
</body>
</html>
How to Use CSS Outline Offset Property
Explain Program
<!DOCTYPE html>
<html>
<head>
<style>
<!Doctype html> → browser this is an HTML document
<html> → Root element of the webpage
<head> → Contains metadata and CSS style
<style> → Internal CSS is written
Step 2]
CSS Section
<style>.pro { width: 250px; padding: 20px; margin: 40px; border: 3px solid red; outline: 4px solid blue; outline-offset: 15px;} </style>
<style>
.pro {
width: 250px;
padding: 20px;
margin: 40px;
border: 3px solid red;
outline: 4px solid blue;
outline-offset: 15px;
}
</style>
width: 250px;
- Set the width of the div to 250 pixels.
padding: 20px;
- Add 20px of space inside the div between content and border.
margin: 40px;
- Add 40px space outside div separating from other element.
border: 3px solid blue;
- Add outline around the div.
- Border color red line around the element.
outline-offset: 15px;
- Move the outline 15px border.
- Space between border and outline.
Step 3]
closing the Tag </style> </head>
</style> </head>
Step 4]
<body> section (HTML Structure)
<body>
<h2>CSS Outline Offset Property</h2>
<div class="pro">
<P>CSS Outline Offset Property.</P>
<p>https://webdesigningtheory.blogspot.com/</p>
</div>
<div> tag element with class .pro is created.
<div> tag inside there two <p> tag paragraphs with some text.
Step 5]
closing the Tag
</body> </html>
How to Use CSS Outline Offset Property
Output
Related Post :-
CSS Attribute Selector Explained
CSS Class Selector Explain
CSS Element Selector Explained
Post a Comment