CSS Properties: Examples

Uncle Jim's CSS-P Tutorials: CSS-P Style Properties

This is a continuation in a series of articles by Jim Stiles.

This is a collection various style properties you can assign to each element, object or property.

BackGround Styles
<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style>	<style type="text/css"> body { background-image: url("images/blu.gif") } </style>	<style type="text/css"> body { background-image: url("images/blu.gif"); background-repeat: repeat-y } </style>
<style type="text/css"> body { background-image: url("images/blu.gif"); background-repeat: repeat-x } </style>	<style type="text/css"> body { background-image: url("/images/smiley.gif"); background-repeat: no-repeat; background-position: center center } </style> <!-- Note: Netscape 4 does not support the "background-position" property. -->	<style type="text/css"> body { background-image: url("/images/smiley.gif"); background-repeat: no-repeat; background-attachment: fixed } </style> <!-- Note: Netscape 4 does not support the "background-attachment" property. -->

Text Styles
Set the text color: <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style>	Secify spacing between characters: <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> <!-- Note: Netscape 4 does not support the "letter-spacing" property. -->	Text alignment: <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style>
Text decoration: <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </style>	Indent text: <style type="text/css"> p {text-indent: 1cm} </style>	Control letters: <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase">This is some text in a paragraph</p> <p class="lowercase">This is some text in a paragraph</p> <p class="capitalize">This is some text in a paragraph</p>

FONT STYLES
Set text font: <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>This is header 3</h3><p> This is a paragraph</p> <p class="sansserif">This is a paragraph</p>	Set text size: <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p>	Set text style: <style type="text/css"> h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p>
Set font variant: <style type="text/css"> p.normal {font-variant: normal} p.small {font-variant: small-caps} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="small">This is a paragraph</p> <!-- Note: Netscape 4 does not support the "font-variant" property. -->	Set boldness: <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="thick">This is a paragraph</p> <p class="thicker">This is a paragraph</p>	Set all properties: <style type="text/css"> p { font: italic small-caps 900 12px arial } </style> </head> <body> <p>This is a paragraph</p>

Border Styles
Set all four borders: <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <!-- The "border-style" property is not recognized by Netscape 4. --> <!-- Netscape 6 supports all border styles. --> <!-- Internet Explorer 5.5 supports all border styles. Internet Explorer 4.0 - 5.0 do not support the "dotted" and "dashed" values --> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p>	Set different borders on each side: <style type="text/css"> p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.groovedouble {border-style: groove double} p.three {border-style: solid double groove} </style> </head> <body> <!-- Note: Netscape 4 does not support the "border-style" property. Use the "border" property to set the borders in Netscape. --> <p class="soliddouble">Some text</p> <p class="doublesolid">Some text</p> <p class="groovedouble">Some text</p> <p class="three">Some text</p>	Set the color of the four borders <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one"><b>Note:</b> The "border-color" property is not recognized in Internet Explorer if it is used alone. Use the "border-style" property to set the borders first in Internet Explorer.</p> <p class="two">Some text</p> <p class="three"><b>Note:</b> Netscape 4 does not support the "border-color" property. Use the "border" property to set the borders and colors in Netscape.</p> <p class="four">Some text</p>
Set bottom border width <style type="text/css"> p { border-style: solid; border-bottom-width: 15px } </style> </head> <body> <p>The "border-bottom-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style" property to set the borders first with Internet Explorer.</p>	Set all border widths <style type="text/css"> p.one { border-style: solid; border-width: 5px } p.two { border-style: solid; border-width: 5px 10px } p.three { border-style: solid; border-width: 5px 10px 1px } p.four { border-style: solid; border-width: 5px 10px 1px medium } </style> </head> <body> <p class="one">The "border-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style" property to set the borders first in Internet Explorer.</p> <p class="two">Some text</p> <p class="three">Some text</p> <p class="four">Some text</p>	Set all border properties <style type="text/css"> p { border: medium double rgb(250,0,255) } </style> </head> <body> <p>Some text</p>

Margin Styles
Setting the Left Margin <style type="text/css"> p.margin {margin-left: 2cm} </style> </head> <body> <p class="margin">This is a paragraph with a left margin</p>	Setting the Right Margin <style type="text/css"> p.margin {margin-right: 5cm} </style>	Setting the Top Margin <style type="text/css"> p.margin {margin-top: 5cm} </style>
Setting the Bottom Margin <style type="text/css"> p.margin {margin-bottom: 80px} </style>	Setting All Margins <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 4cm} </style>

Padding Styles

Setting the Padding

Increase line spacing

Image Styles
Align images vertically <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="/images/alert.gif"width="115" height="30"> image inside a paragraph.</p>	Placing elements behind other elements <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <p><b>Note:</b> Netscape 4 does not support the "z-index" property.</p> <h1>This is a Heading</h1><img class="x" src="/images/alert.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p>

Link Styles

Hyperlink Colors

Other Link Styles

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>
Mouse over the links to see them change layout.
<a class="one" href="default.asp" target="_blank">This link changes color</a>
<a class="two" href="default.asp" target="_blank">This link changes font-size</a>
<a class="three" href="default.asp" target="_blank">This link changes background-color</a>
<a class="four" href="default.asp" target="_blank">This link changes font-family</a>
<a class="five" href="default.asp" target="_blank">This link changes text-decoration</a>

pseudo-element Styles
Enlarge first letter of paragraph <style type="text/css"> div:first-letter { color: #ff0000; font-size:xx-large } </style> </head> <body> <p><b>Note:</b> Netscape 4 does not support the "first-letter" property.</p> <p><b>Note:</b> Internet Explorer 5.5 supports the "first-letter" property.</p> <div>You can use the first-letter pseudo-element to add special style to the first letter of a text. </div>	First Line styles <style type="text/css"> div:first-line { color: #ff0000; font-variant: small-caps } </style> </head> <body> <p><b>Note:</b> Netscape 4 does not support the "first-line" property.</p> <p><b>Note:</b> Internet Explorer 5.5 supports the "first-line" property.</p> <div>You can use the first-line pseudo-element to add special style to the first line of a text.</div>	Highlight paragraph: <p align="justify"><span style="background-color:white; color:black; font-family:arial; font-size:10pt; font-weight:700;" onmouseover="this.style.background='black'; this.style.color='white'" onmouseout="this.style.background='white'; this.style.color='black'">Internet Explorer users pass you cursor over this text to see the text color and its background color change.</span></p>

More coming soon

The next section contains answers to the most commonly asked questions about CSS

<<< Previous | HOME | Next >>>