Some examples are from
http://www.w3schools.com/css/css_examples.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
</style>
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p><span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="https://sites.google.com/site/k8omsbob/368stjoeheadwaters_5756.jpg"><img src="https://sites.google.com/site/k8omsbob/tn_368stjoeheadwaters_5756.jpg?attredirects=0&d=1
" alt="St. Joe Headwaters" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<img src="https://sites.google.com/site/k8omsbob/open-image-in-new-page/ducks.jpg?attredirects=0&d=1" alt="Ducks" width="110" height="90" />
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="https://sites.google.com/site/k8omsbob/photos-and-other-images/photo-gallery/flea_market.jpg"><img src="https://sites.google.com/site/k8omsbob/photos-and-other-images/photo-gallery/flea_market.jpg?attredirects=0&d=1" alt="Flea Market" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
DETAILS TAG <!DOCTYPE html> <html> <body> <details> <summary>Copyright 1999-2014.</summary> <p> - by K8OMS. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of K8OMS.</p> </details> <p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p> </p> </body> </html> |
