CSS OUT LINES
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".The outline properties specify the style, color, and width of an outline.
However, the outline property is different from the border property:
1.An outline does not take up space.
2.Outlines do not have to be rectangular.
3.Outline is always the same on all sides; you cannot specify different values for different sides of the element.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
Outline-properties:
a.outline-width : It is used to set the width of the outline.
b.outline-style: It is used to set the line style for the outline.
c. outline-color: It is used to set the color of the outline.
d. outline : It is used to set all the above three properties in a single statement.
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. A width of zero pixels means no outline.
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: Outline 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.
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 properties.
The outline Property:
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
Example:28
<html><head>
<title> CSS outline-width Property</title></head>
<body>
<p style="outline-width:thin; outline-style:solid; border:1px solid red;">
This text is having thin outline. </p> <br />
<p style="outline-width:thick; outline-style:solid; border:1px solid red;">
This text is having thick outline. </p> <br />
<p style="outline-width:5px; outline-style:solid; border:1px solid red;">
This text is having 5x outline. </p>
</body> </html>
Example:29
<html><head><style>
p {border:1px solid blue;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style></head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
</body></html>
Example:30
<html><head>
<title>Practice CSS outline-color Property</title></head>
<body>
<p style="outline-width:thin; outline-style:solid;
outline-color:red">
This text is having thin solid red outline.</p> <br />
<p style="outline-width:thick;outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline. </p><br />
<p style="outline-width:5px;outline-style:dotted;
outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline. </p>
</body></html>
CSS Margins
The CSS margin properties define the space around elements.
There are following four properties to set an element margin.
1.margin :A shorthand property for setting the margin properties in one declaration.
2.margin-bottom: It specifies the bottom margin of an element. It can have a value in length, % or auto.
3.margin-top: It specifies the top margin of an element. It can have a value in length, % or auto.
4.margin-left: It specifies the left margin of an element.
5.margin-right: It specifies the right margin of an element.
Example:31
<html><head><title> CSS margin Property</title></head>
<body>
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px </p>
<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p>
<p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>
</body></html>
Example:32
<html>
<head><title>Practice CSS margin-bottom Property</title></head>
<body>
<p style="margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin </p>
<p style="margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p> </body></html>
Example:33
<html>
<head><title>Practice CSS margin-top Property</title></head>
<body>
<p style="margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin </p>
<p style="margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body></html>
No comments:
Post a Comment