An outline is a visual style that is applied to the perimeter of an HTML element, similar to a border. However, unlike a border, an outline does not take up any space in the layout of the page and is drawn outside of the border of an element.
The purpose of an outline is to provide a visual indication of the focus or selected state of an element, which is especially useful for interactive elements such as links and form controls. Outlines can be customized with various properties, including color, style, and width.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="main">
<div id="advert">
<h1>Advert</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</div>
</div>
</body>
</html>
Our usual simple html code.
body {
background: lightgrey;
}
.main {
background: lightgreen;
width: 800px;
margin: auto;
outline-style: solid;
outline-width: 10px;
outline-color: red;
}
#advert {
border-style: solid;
border-width: 20px;
border-color: blue;
background: lightblue;
margin: auto;
width: 500px;
padding: 5px 10px 25px 50px;
margin-bottom: 5px;
outline-style: dashed;
outline-width: 5px;
outline-color: yellow;
}
.content {
border-style: solid;
border-width: 20px;
border-color: red;
background: yellow;
margin: auto;
width: 500px;
padding: 5px 10px 25px 50px;
}
This CSS code applies various styles to an HTML element with the ID of "advert":
outline-style: dashed;: Sets the style of the element's outline to "dashed".outline-width: 5px;: Sets the width of the element's outline to 5 pixels.outline-color: yellow;: Sets the color of the element's outline to yellow.
No comments:
Post a Comment