CSS : Html Tags ex 1
ruby Example
<html>
<head>
<title>ruby element example</title>
</head>
<body>
<ruby>
<span style="font-family:Verdana; font-size:14pt">This is the base text.</span>
<rt>
<span style="font-family:Times New Roman; font-size: 8pt; color:red">
This is the ruby text
</span>
</ruby>
</body>
</html>Create Console window like style to display code
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Phrase elements</title> <style type="text/css"> samp { background: #000; border: 3px groove #ccc; color: #ccc; display: block; padding: 5px; width: 300px; } </style> </head> <body> <p><samp>This is a test. This is a test. <br /> Content-type: text/html<br /> <h1>Hello World</h1></samp></p> </body> </html>
samp Example
<html>
<head>
<title>samp element example</title>
</head>
<body>
<p>
<font size="5">
<samp style="fontweight:normal">
Java Language
</samp>
</font>
</p>
</body>
</html>font size for Subscript and Superscript
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> sub { vertical-align: -0.5em; font-size: 0.75em; } sup { vertical-align: 0.5em; font-size: 0.75em; } * .large { font-size: 32px; } sub { font-size: 0.9em; } sup { font-size: 0.9em; } </style> </head> <body> <p class="large">A<sub>1</sub> B<sup>2</sup>C<sup>E</sup></p> </body> </html>
Changing ordered list markers to upper-roman
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Changing ordered list markers</title> <style type="text/css"> body { line-height: 1.5em; } ol { list-style-type: upper-roman; } </style> </head> <body> <ol> <li>Combine.</li> <li>Gradually.</li> <li>Place.</li> <li>Transfer.</li> <li>divide.</li> </ol> </body> </html>
Using tbody to wrap table body
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Auto width on tables</title> <style type='text/css'> table { width: auto; background: black; color: white; } </style> </head> <body> <table> <tbody> <tr> <td>How will this table react to auto width?</td> </tr> </tbody> </table> </body> </html>
table header text-align: left;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> th { height: 50px; font-weight: bold; text-align: left; background-color: #cccccc; } </style> </head> <body> <table> <caption>Font properties</caption> <tr> <th>Property</th> <th>Purpose</th> </tr> <tr> <td class="code">font-family</td> <td>Specifies the font used.</td> </tr> <tr> <td class="code">font-size</td> <td>Specifies the size of the font used.</td> </tr> <tr> <td class="code">font-style</td> <td>Specifies whether the font should be normal, italic, or oblique.</td> </tr> <tr> <td class="code">font-weight</td> <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td> </tr> </table> </body> </html>
th text-shadow: #ccc -2px 2px -2px;
<html> <head> <title></title> <style type="text/css"> table { border-collapse: collapse; width: 100%; border: 1px solid #666; } th { padding: .5em 0 .5em 7px; text-align: left; border-top: 1px solid #666; border-bottom: 1px solid #666; text-shadow: #ccc -2px 2px -2px; } </style> </head> <body> <table> <tr> <th colspan="4"> Table 1. </th> </tr> <tr class="secondrow"> <th> </th> <th> Estimate </th> <th> Lower Bound </th> <th> Upper Bound </th> </tr> <tr> <td>Total population</td> <td>272,091</td> <td>****</td> <td>****</td> </tr> <tr> <td colspan="4">Sex</td> </tr> <tr> <td>Male</td> <td>129,179</td> <td>127,670</td> <td>131,908</td> </tr> <tr> <td>Female</td> <td>142,302</td> <td>140,183</td> <td>144,421</td> </tr> </table </body> </html>
th text-align: left;
<html> <head> <meta name="Description" content="Information architecture, Web Design, Web Standards." /> <meta name="Keywords" content="your, keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="Erwin Aligam - ealigam@gmail.com" /> <meta name="Robots" content="index,follow" /> <style type='text/css'> /* start - table */ table { border-collapse: collapse; margin: 10px; } th strong { color: #fff; } th { background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x; height: 29px; padding-left: 12px; padding-right: 12px; text-align: left; border-left: 1px solid #f4f4f4; border-bottom: solid 2px #fff; color: #333; } tr { height: 30px; } td { padding-left: 11px; padding-right: 11px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } td.first,th.first { border-left: 0px; } tr.row-a { background: #F8F8F8; } tr.row-b { background: #EFEFEF; } /* end - table */ </style> <title>Marketplace</title> </head> <body> <!-- wrap starts here --> <div id="wrap"> <h3>Table Styling</h3> <table> <tr> <th class="first">post date</th> <th>title</th> <th>description</th> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Augue non nibh</a></td> <td><a href="index.html">Lobortis commodo metus vestibulum</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Fusce ut diam bibendum</a></td> <td><a href="index.html">Purus in eget odio in sapien</a></td> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Maecenas et ipsum</a></td> <td><a href="index.html">Adipiscing blandit quisque eros</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Sed vestibulum blandit</a></td> <td><a href="index.html">Cras lobortis commodo metus lorem</a></td> </tr> </table> </div> </body> </html>
Anchor text-decoration: none;
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> #header { width: 892px; height: 268px; background-image: url(images/header_bg.jpg); background-position: top left; background-repeat: no-repeat } #menu { float: left; margin: 63px 0 0 25px; } #menu li { display: inline; list-style-type: none; line-height: 35px; } #menu li a { background-color: blue; background-position: top left; background-repeat: no-repeat; height: 35px; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: red; text-decoration: none; text-align: center } </style> </head> <body> <ul id="menu"> <li><a href="index.html" class="but1_active">Home page</a></li> <li><a href="index2.html" class="but2">Articles</a></li> <li><a href="index2.html" class="but3">Latest Websites</a></li> <li><a href="index2.html" class="but4">Submit</a></li> <li><a href="index2.html" class="but5">Contacts</a></li> </ul> </body> </html>
a {text-decoration: none;}
<html> <head> <title>Link Style Changes</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> a {text-decoration: none;} a:hover {color: red; text-decoration: underline;} </style> </head> <body> <div class="head">Link Style Changes</div> <div class="content"> <a href="#">Link to this page</a> <a href="https://guercifzone-ar.blogspot.com/">Test Link to guercifzone!</a> </div> </body> </html>
b {outline: #ff0000 8px dashed;}
<html> <head> <title>CSS Example</title> <style type='text/css'> p {width:120px;} b {outline: #ff0000 8px dashed;} </style> </head> <body> <p>Inside this paragraph the word in <b>bold</b> is going to have an outline.</p> </body> </html>
b margin:23px;
<html> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
b padding:2px;
<html> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
b border:solid 2px #999999;
<html> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
Cite: font style and color, background color
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><strong>, <em> and Other Phrase Elements</title> <style type="text/css" media="screen"> #divID cite { font-style: italic; font-weight: bold; color: red; background-color: #ddd; } </style> </head> <body> <div id="divID"> this is a test. <cite>this is a test. </cite>. </div> </body> </html>
font, color, background for dt
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .bios dt { font-weight: bold; } .bios dd { margin: 0; padding: 0; } .bios dl:target { background-color: #999999; border: 1px solid black; padding: 1em; font-weight: bold; line-height: 1.5; } .bios dl:target dt { font-style: italic; color: white; font-size: 1.5em; background-color: #cccccc; margin-right: 20px; } .bios dl:target dd { margin-right: 20px; background-color: #cccccc; padding: 0 1em 1em 1em; } .bios dl:not(:target) { border: none; padding: 0; font-size: .8em; } </style> </head> <body> <div class="bios"> <dl> <dt>A</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd> </dl> <dl id="jessica"> <dt>B</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd> </dl> <dl id="trueman"> <dt>C</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd></dl> <dl id="mark"> <dt>D</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd></dl> </div> </body> </html>
a img width: 300px; border: 0; display: block;
<html> <head> <title></title> <style> a img { width: 300px; border: 0; display: block; } </style> </head> <body> <a href=""><img src="/logo.png" /></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p> </body> </html>
Set border to '6px double #666' for an image
<html> <head> <title></title> <style type="text/css"> img { width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block; } a:link { display:block; } a:hover img { border-style: solid; background: #999; } </style> </head> <body> <a href="https://guercifzone-ar.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg80gzljSF4d4k8WWXtvDQBkunYqml5_y6EELktUvDbecUaWsu3yQu_dKmAznyoMGtrSW-7t4ajkRv4EUOWBdhg0q0905sGOOcUJcKo2v0q2ylfoPXDeaKR9US_GsCUKdfzIJyh_Ea67CgswRmBnbGCfjHP5dK4sYCHwwmsg03cHExvTJfSNKzHUwzFu_o/s1024/Profit%20from%20advertising.png" alt="Face" /></a> </body> </html>
Remove border from an image
<html> <head> <title></title> <style type="text/css"> a img { width: 300px; border: 0; display: block; } </style> </head> <body> <a href=""><img src=/logo.png" /></a> </body> </html>
CSS Image Border
<html> <head> <title>CSS Image Border</title> <style type="text/css"> body{ margin-left: .50in; margin-top: .50in; color: white } img{ border-color: white; border-style: inset; border-width: thick; } </style> </head> <body> <img src="yourlink/logo.png" alt="Java" height="300" width="240" /> </body> </html>
img width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <style type="text/css"> img { width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block; } a:link { display:block; } a:hover img { border-style: solid; background: #999; } </style> </head> <body> <a href="http://www.yourdomainname.com"><img src="http://www.your doman name.com/style/logo.png" alt="Face"/></a> </body> </html>
ins color: forestgreen;
<html> <head> <title>Direct Child Selectors</title> <style type='text/css'> body { font-face: sans-serif; } del { color: crimson; } ins { color: forestgreen; } </style> </head> <body> <h1><ins>Direct Child</ins> <del>Descendant</del> Selectors</h1> </body> </html>
LI padding: .3em 0
<html> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <ul> <li>V</li> <li>S</li> <li>T</li> <li>P</li> </ul> </body> </html>
ol, ul {margin-left: 0; padding-left: 2.5em;}
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="all"> ol, ul {background: #787;} .one {margin-left: 0; padding-left: 2.5em;} .two {margin-left: 1.5em; padding-left: 1em;} .three {padding-left: 0; margin-left: 2.5em;} </style> </head> <body> <ol class="one"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> <ol class="two"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> <ol class="three"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> </body> </html>
li padding: .3em 0 1em 40px;
<html> <head> <title></title> <style type="text/css"> ul { margin-left: 40px; padding-left: 0px; list-style: none; } li { padding: .3em 0 1em 40px; font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; background: url(search_32.gif) no-repeat; } </style> </head> <body> <p>Consectetuer adipiscing elit: <ul> <li>Vivamus purus enim</li> <li>Sollicitudin vitae</li> <li>Tincidunt sit amet</li> <li>Pretium vel, libero</li> </ul> <p>Sed sed nisi. Morbi gravida, odio at aliquam lobortis, urna massa vehicula mi, et posuere tortor elit eget est. Nulla ligula. Etiam pulvinar. Quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est. Nulla felis dolor, tempor non, posuere ut, ornare ac, eros. Cras in metus. Sed rutrum lectus ut nibh. Pellentesque ipsum.</p> </body> </html>
Using padding to control the list item indent
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul { list-style-type: square; list-style-position: outside; width: 33em; padding: 0.5em; border: 1px solid black; margin: 0.75em 0 0 1.5em; } ul.one { padding-left: 0; } ul.two { padding-left: 1em; } ul.three { padding-left: 1.5em; } li { padding: 0; margin: 0; border: 1px dashed black; } </style> </head> <body> <ul class="one"> <li>Li Europan lingues es membres del sam familie.</li> </ul> <ul class="two"> <li>Li Europan lingues es membres del sam familie.</li> </ul> <ul class="three"> <li>Li Europan lingues es membres del sam familie.</li> </ul> </body> </html>
First-child Selector
<html> <head> <title>Chapter 2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> body { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; } ul { color:black; } li.unusual { color: red; } </style> </head> <body> <ul> <li class="unusual">Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul> </body> </html>
li:first-child color: red;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Chapter 2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> body { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; } ul { color:black; } li:first-child { color: red; } </style> </head> <body> <ul> <li>Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul> </body> </html>
p:after {content: "You need to register to read the full article."; color:#ff0000;}
<html> <head> <title>CSS Example</title> <style type='text/css'> h1 {font-size:18pt;} p {font-size:12pt;} p.abstract:after {content: "You need to register to read the full article."; color:#ff0000;} </style> </head> <body> <h1>Beginning Web Programming</h1> <p class="abstract">This book teaches you how to write HTML. </p> </body> </html>
p.price:after {content: " Postage and packaging included"}
<html> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> p.price:after {content: " Postage and packaging included"} </style> </head> <body> <h2>Gold Carriage Clock</h2> <p class="description">Description.</p> <p class="price">$29.99</p> </body> </html>
Right-aligned content
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #r { position: static; text-align: right; background: purple; } </style> </head> <body> <div class="parent"> <p id="r">Right-aligned content</p> </div> </body> </html>
Horizontally and Vertically Center-aligned static Content
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #c { position: static; text-align: center; line-height: 48px; background: gold; } </style> </head> <body> <div class="parent"> <p id="c">Horizontally and Vertically Center-aligned Content</p> </div> </body> </html>
Left-aligned static content
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #l { position: static; text-align: left; background: pink; } </style> </head> <body> <div class="parent"> <p id="l">Left-aligned content</p> </div> </body> </html>
vertical alignment for sub super
<html>
<head>
<title></title>
<style type='text/css'>
p {
font-size: 16px;
}
span {
font-size: 0.8em;
}
p#sub span {
vertical-align: sub;
}
p#super span {
vertical-align: super;
}
</style>
</head>
<body>
<p id='sub'>
This is normal text. <span>This is subscript text.</span> This is normal text.
</p>
<p id='super'>
This is normal text. <span>This is superscript text.</span> This is normal text.
</p>
</body>
</html>CSS rowspan test
<head> <title>CSS rowspan test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .tablewrapper { position: relative; } .table { display: table; } .row { display: table-row; } .cell { border: 1px solid red; display: table-cell; } .cell.empty { border: none; width: 100px; } .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; } </style> </head> <body> <div class="tablewrapper"> <div class="table"> <div class="row"> <div class="cell"> Top left </div> <div class="rowspanned cell"> Center </div> <div class="cell"> Top right </div> </div> <div class="row"> <div class="cell"> Bottom left </div> <div class="empty cell"></div> <div class="cell"> Bottom right </div> </div> </div> </div> </body> </html>
Spanning rows
<html> <head> <title>Spanning rows</title> </head> <body> <table border="1"> <caption>Spanning rows using the rowspan attribute</caption> <tr> <td bgcolor="#efefef" width="100" height="100"> </td> <td bgcolor="#999999" width="100" height="100"> </td> <td rowspan="3" bgcolor="#000000" width="100" height="100"> </td> </tr> <tr> <td bgcolor="#efefef" height="100"> </td> <td rowspan="2" bgcolor="#999999"> </td> </tr> <tr> <td bgcolor="#efefef" height="100"> </td> </tr> </table> </body> </html>
Add dotted bottom line to abbr and acronym
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><strong>, <em> and Other Phrase Elements</title> <style type="text/css" media="screen"> body { font-family: verdana, sans-serif; font-size: 12px; } div { margin-bottom: 30px; } #divID abbr, acronym { border-bottom: 1px dotted; cursor: help; } </style> </head> <body> <div id="divID"> <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML. </div> </body> </html>
a:visited color:#006699;
<html> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> a:link { color:#003399; text-deccoration:none;} a:visited { color:#006699; text-decoration:none;} </style> </head> <body> <p> <a href="http://www.google.com">www.google.com</a><br /> <a href="http://www.wrox.com">www.wrox.com</a> </p> </body> </html>
text-decoration: underline for visited anchor
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> #copyright { width: 1000px; text-align: center; float: left; padding: 104px 0 0 0; } #copyright span { padding: 0 57px; } #copyright a { color: #574621; text-decoration: underline } #copyright a:visited { text-decoration: underline } #copyright a:hover { text-decoration: none } </style> </head> <body> <div id="copyright"> <span>Copyright © Your Company</span> <span>© Design by <a href="" target="_blank">Best Free Templates</a></span> </div> </body> </html>
a:visited font-weight: bold; text-decoration: line-through; color: black;
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a:link { font-weight: bold; text-decoration: none; color: red; } a:visited { font-weight: bold; text-decoration: line-through; color: black; } </style> </head> <body> <p>Consectetuer adipiscing elit: <ul> <li><a href=" ">Vivamus purus enim</a></li> <li><a href=" ">Sollicitudin vitae</a></li> <li><a href=" ">Tincidunt sit amet</a></li> <li><a href=" ">Pretium vel, libero</a></li> </ul> <p>Sed sed nisi. Morbi gravida, odio at aliquam lobortis, urna massa vehicula mi, et posuere tortor elit eget est. Nulla ligula. Etiam pulvinar. Quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est. Nulla felis dolor, tempor non, posuere ut, ornare ac, eros. Cras in metus. Sed rutrum lectus ut nibh. Pellentesque ipsum.</p> </body> </html>
a:visited text-decoration:none;}
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> a:link { color:#003399; text-deccoration:none;} a:visited { color:#006699; text-decoration:none;} </style> </head> <body> <p> <a href="http://www.google.com">www.google.com</a><br /> <a href="http://www.wrox.com">www.wrox.com</a> </p> </body> </html>
Add margin, padding and set color for DD
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID dd { margin-left: 15px; padding-left: 15px; color: #999; background: url(img/dd_arrow.gif) no-repeat 0 2px; } </style> </head> <body> <div id="divID"> <dl> <dt>CSS</dt> <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd> <dt>XHTML</dt> <dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd> <dt>XML</dt> <dd>A simple, very flexible text format derived from SGML.</dd> </dl> </div> </body> </html>
Right aligned list item
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul.rtl { direction: rtl; } .t {text-align:left;} .listouter { width:150px; } </style> </head> <body> <ul class="rtl"> <li>Hello</li> <li>Hello hello</li> <li>Hello Hi</li> <li>Hello Hello</li> <li>Hello HI</li> <li>Hello Hello</li> <li>Hello Hi</li> <li>Hello</li> </ul> </div> </body> </html>
direction: rtl
<html> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px; } .ltr { direction: ltr; } .rtl { direction: rtl; } </style> </head> <body> <h1>direction</h1> <p class="ltr">This text should flow left to right.</p> <p class="rtl">This text should flow right to left.</p> </body> </html>