CSS - CSS Outline Width
Learn css - css tutorial - CSS Outline Width - css examples - css programs
Outline Width - Definition and Usage
- The outline width property is used to apply the width of the outline of an element.
- Line that is drawn around elements, outside the border edge.
- CSS outline is a border around the border.
- Outlines are different when compared to borders in following ways.
- Outline is always the same on all sides.
- We cannot specify different values for every sides of an element.
Outline Property :
- There are three different types of properties in CSS outline they are:
- outline-width
- outline-style
- outline-color
Outline Width :
- The outline width property determines the width of the outline to be added to the container. Its value should be in length (px, pt etc.,) or one of the qualities like thin, medium, or thick.
html sample code - css in html
Tryit<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="outline-width: thin; outline-style: solid;">
<b>Welcome To Wikitechy.com</b>
</p>
<br />
<p style="outline-width: thick; outline-style: solid;">
<b>Where You Can Learn All The Technologies.</b>
</p>
<br />
<p style="outline-width:2px; outline-style: solid;">
<b>Best E-Learning Website In The World.</b>
</p>
</body>
</html>click below button to copy the code. By - css tutorial - team
Code Explanation - stylesheet css
- Applying the outline width property for <p> tag stating that the width of the outline around the <p> contents is thin.
- Similarly, we are applying outline width : thick for a <p> element which will have an outline around its text that looks thicker and stronger than the first outline.
- Here we also directly fix the outline width property value using measurement units like px, pt and % etc.
Note : Using Inline CSS we are applying a specific styles to a particular element.
Code Output - online css course
- Here, the paragraph text Welcome To wikitechy.com will have a thin outline around it which is displayed in the browser window.
- The Paragraph Where You Can Learn All the Technologies will have a thick outline width since we specified outline-width: thick in CSS.
- Similarly, outline around the text Best E-Learning Website in the World. is specified in 3px (pixels) as shown in the output.
This page provides a detailed information on introduction to css , css sheet , css for html , introduction to html and css , css with html , css style code , html css generator , css4 tutorial , css source , css html javascript , basic css tutorial , html with css example , html css basics , css style sheet example , best css tutorial , basics of css , css home page , html css online editor , css layout tutorial , html and css test.