CSS Syntax Referrence
Header Links
Import JavaScript: <script type="text/javascript" src="/js/jquery.js"></script> FavIcon link: <link rel="shortcut icon" href="/images/favicon.ico"> CSS Simple: <link rel="stylesheet" type="text/css" href="style.css"> CSS Browser Preferred: <link rel="stylesheet" href="/assets/css/base.css?ver=10" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="/assets/css/homepage.css?ver=3" type="text/css" media="screen" charset="utf-8"> <!--[if IE ]> <link rel="stylesheet" href="/assets/css/homepage_IE_6.css?ver=2" type="text/css" media="screen" charset="utf-8"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/assets/css/homepage_IE_7.css?ver=2" type="text/css" media="screen" charset="utf-8"> <![endif]-->
- or -
<style type="text/css" media="screen">
@import url("layout.css");
</style>
Embed Styles in <head>
<style type="text/css">
<!--
.nav {color:#666666; font-family:arial; font-size:12px; font-style:nortmal;}
.nav a {color:#666666; font-family:arial; font-size:12px; font-style:underline;}
.nav a:hover {color:#999999; font-family:arial; font-size:12px; font-style:underline;}
.title {font-family:Arial; font-size:28px; color:#660033; font-weight:bold;}
.subTitle {font-family:Arial; font-size:20px; color:#990033; font-weight:bold;"}
-->
</style>
Print Spaces
<span style="mso-spacerun: yes"> </span>
Use image for list bullet
HTML
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> |
CSS
#navlist {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#navlist li {
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
|
Translucency
CSS — Compliance: IE6, Safari 3, Opera 9 (Mac), Firefox 2.0, others not tested
<style type="text/css">
div.bg-trans
{
border:5px solid #000000;
/* FF2 & Opera Hack */
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);
/* Safari and FF3 support CSS3 syntax already */
background:rgba(0,0,0,0.8);
}
</style>
<!--[if IE]><style type="text/css">
/* For Your IEs Only */
div.bg-trans
{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#DD000000,endColorstr=#DD000000);
zoom:1;
}
</style><![endif]-->
<img src="../portfolio/photography/003.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="../portfolio/photography/004.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />