Draw A Line Around An Element, Outside The Border Edge (Outline)

Outline
Draw a line around an element, outside the border edge (outline) (Does not work in IE)
<html>
<head>
<style type="text/css">
border: red solid thin;
outline: green dotted thick
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
Set the style of an outline (Does not work in IE)
<html>
<head>
{
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>
Set the color of an outline (Does not work in IE)
<html>
<head>
outline-style: solid;
outline-color: #00ff00
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
Set the width of an outline (Does not work in IE)
<html>
<head>
p.one
outline-width: thick
p.two
outline-width: 2px
</style>
</head>
<body>
<p class="one">Some text.</p>

<p class="two">Some text.</p>
</body>
</html>
Margin
All the margin properties in one declaration
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
Set the top margin of a text using a cm value
Set the top margin of a text using a percent value
<html>
<head>
p.topmargin
margin-top: 25%
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>
All the padding properties in one declaration
<html>
<head>
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
Set the left padding of a tablecell
</html>
<html>
<head>
td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a left padding. This is a tablecell with a left padding.
</td>
</tr>
</table>
</body>
</html>
Table
Set the layout of a table
<html>
<head>
table.one
table-layout: automatic
}
table.two
table-layout: fixed
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>
Show empty cells in a table
<html>
<head>
table
border-collapse: separate;
empty-cells: show
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
Collapse a table border
<html>
<head>
table.coll
border-collapse: collapse
table.sep
border-collapse: separate
</style>
</head>
<body>
<table class="coll" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="sep" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Set the space between table borders
<html>
<head>
table.one
border-spacing: 10px
table.two
border-spacing: 10px 50px
</style>
</head>
<body>
<table class="one" border="1">

<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
</body>
</html>
Set the position of the table caption
<html>
<head>
caption
caption-side:bottom
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Dimension
Set the height of an image using a pixel value
<html>
<head>
img.normal
height: auto
img.big
height: 160px
img.small
height: 30px
}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" />
<br />
<img class="big" src="logocss.gif" width="95" height="84" />
<br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
Set the width of an element using a pixel value
<html>
<head>
img
width: 200px
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
Set the maximum height of an element
<html>
<head>
max-height: 10px
</style>
</head>
<body>
<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>
Set the maximum width of an element using a pixel value
<html>
<head>
max-width: 600px
</style>
</head>
<body>
<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
</body>
</html>
Classification
How to display an element as an inline element
<html>
<head>
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
<div>And this div section is not displayed!</div>
</body>
</html>
How to display an element as a block element
<html>
<head>
span
display: block
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span>
<span>distance between two elements.</span>
</body>
</html>
A simple use of the float property
<html>
<head>
img
float:right
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is
that the image will float to the right in the paragraph.</p>
<p>
</p>
</body>
</html>
Let the first letter of a paragraph float to the left
<html>
<head>
span
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
</p>
<p>
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>
</body>
</html>
Cursor properties:
<html>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
</html>
Clear the sides of an element
<html>
<head>
img
float:left;
clear:both;
</style>
</body>
</html>
Positioning
How to show overflow in an element using scroll
<html>
<head>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given
width and height properties.</p>
<div>
You can use the overflow property when you want to have better control of the layout. Try to
change the overflow property to: visible, hidden, auto, or inherit and see what happens. The
default value is visible.
</div>
</body>
</html>
How to hide overflow in an element
<html>
<head>
div
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given
width and height properties.</p>
<div>
You can use the overflow property when you want to have better control of the layout. Try to
change the overflow property to: visible, scroll, auto, or inherit and see what happens. The
default value is visible.
</div>
</body>
</html>
How to show set the browser to automatically handle overflow
<html>
<head>
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
This is an
<img class="top" border="0"
src="logocss.gif" width="95" height="84" />
image inside a paragraph.
</p>
<p>
This is an
<img class="bottom" border="0"
src="logocss.gif" width="95" height="84" />
image inside a paragraph.
</p>
</body>
</html>
Vertical alignment of an image
Place an element "behind" another element
<html>
<head>
img.x
position:absolute;
left:0px;
top:0px;
z-index:-1
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
Place an element "behind" another element 2
<html>
<head>
img.x
position:absolute;
left:0px;
top:0px;
z-index:1
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>
Pseudo-classes
Add different colors to a hyperlink
<html>
<head>
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}

</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes

color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-

size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-

color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-

family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-

decoration</a></b></p>
</body>
</html>
Add other styles to hyperlinks
<html>
<head>
a:link {color: #FF0000}
a:visited {color: #00FF00}

a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective!!</p>
</body>
</html>

Draw A Line Around An Element, Outside The Border Edge (Outline)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Draw A Line Around An Element, Outside The Border Edge (Outline)

Uploaded by

Copyright:

Available Formats

Outline

border: red solid thin;

outline: green dotted thick

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}

<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="inset">An inset outline</p>

<p class="outset">An outset outline</p>

Set the color of an outline (Does not work in IE)

border: red solid thin;

border: red solid thin;

border: red solid thin;

<p class="one">Some text.</p>

All the margin properties in one declaration

p.margin {margin: 2cm 4cm 3cm 4cm}

<p>This is a paragraph with no specified margins</p>

<p class="margin">This is a paragraph with specified margins</p>

<p>This is a paragraph with no specified margins</p>

<p>This is a paragraph with no margin specified</p>

<p class="topmargin">This is a paragraph with a specified top margin</p>

All the padding properties in one declaration

td.test1 {padding: 1.5cm}

td.test2 {padding: 0.5cm 2.5cm}

This is a tablecell with equal padding on each side.

Set the left padding of a tablecell

Set the layout of a table

<table class="one" border="1" width="100%">

<table class="two" border="1" width="100%">

Show empty cells in a table

Collapse a table border

<table class="sep" border="1">

Set the space between table borders

border-spacing: 10px 50px

<table class="one" border="1">

<table class="two" border="1">

Set the position of the table caption

Set the height of an image using a pixel value

<img class="normal" src="logocss.gif" width="95" height="84" />

<img class="big" src="logocss.gif" width="95" height="84" />

<img class="small" src="logocss.gif" width="95" height="84" />

Set the width of an element using a pixel value

<img src="logocss.gif" width="95" height="84" />

Set the maximum height of an element

<p>This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<p>This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

div {display: none}

<p>A display property with a value of "inline" results in</p>

<p>no distance between two elements.</p>