Scribd
Upload
124 views

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

The document provides examples of using CSS to style various HTML elements. It includes examples of setting outlines, margins, paddings, table properties, dimensions, element classification and positioning. Key CSS properties demonstrated include outline, margin, padding, table-layout, empty-cells, border-collapse, border-spacing, caption-side, height, width, max-height, max-width, display, float, and cursor.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC or read online on Scribd
124 views

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

The document provides examples of using CSS to style various HTML elements. It includes examples of setting outlines, margins, paddings, table properties, dimensions, element classification and positioning. Key CSS properties demonstrated include outline, margin, padding, table-layout, empty-cells, border-collapse, border-spacing, caption-side, height, width, max-height, max-width, display, float, and cursor.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC or read online on Scribd
You are on page 1/ 34

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>

<style type="text/css">

{
border: red solid thin;

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>

<style type="text/css">

border: red solid thin;

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>

<style type="text/css">

p.one

border: red solid thin;

outline-style: solid;

outline-width: thick

p.two

border: red solid thin;

outline-style: solid;

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>

<style type="text/css">

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>
<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

table.one

border-collapse: separate;

border-spacing: 10px

table.two

border-collapse: separate;

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>


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

</body>

</html>
Set the maximum width of an element using a pixel value

<html>

<head>

<style type="text/css">

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.

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

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

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.

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.

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.

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

</p>

</body>

</html>

Let the first letter of a paragraph float to the left

<html>

<head>

<style type="text/css">

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.

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.

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>

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>

<style type="text/css">

img

float:left;

clear:both;

</style>

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

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

</body>

</html>

Positioning

How to show overflow in an element using scroll

<html>

<head>

<style type="text/css">

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>

<style type="text/css">
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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

<style type="text/css">

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>

You might also like