Css benfits
- Faster page loading
- Lowered hosting costs
- Redesigns are more efficient
- Redesigns are less expensive
- Visual consistency maintained throughout website(s)
- Better for SEO
- Accessibility
- Competitive edge (job security)
- Quick website-wide updates
- Easier for teams to maintain (and individuals)
- Increased usability
- More complex layouts and designs
- No spacer gifs
t�s a clear fact that technology will always march on ahead of us. Even if it may seem quite a long time span, 4 years is what it took the committees that are in charge with defining new CSS rules to develop the brand new CSS3. Now, the only problem may be adapting to the new versions especially since most web programmers/developers have got a real grip on the specs in CSS2, and most browsers have adopted most of its rules. Now, it�s true that there are some browsers that have got a bit ahead in this department and they have adopted some of the most interesting modes and styles in the new CSS3. Of course, we are talking about the popular Firefox and Opera.
CSS3 – What�s it all about?
First of all, you have to understand that CSS3 comes with large variety of changes and additions to the CSS core that we all have been used to. Now, it is clear that CSS3 has been in committee for several years (as we stated above � about 4 years) but the first drafts came out somewhere in 2001, and the people who where involved then in the committee announced everyone that they will not sweep a whole new version, but, instead they will be rolling out different new “modules” from time to time. What happened afterwards we all know or at least imagine � some of these recommendations have already received support by most web browsers, while others may take a long time before they will even be proposed.
Talking about browser support, it is a very known fact that Internet Explorer 6 has absolutely no support for CSS3. In other words, they have nothing in common. And regarding the new version of Internet Explorer � Internet Explorer 7, just a few of the basics are covered. But since Internet explorer is not the only browser (let me rephrase that for you � is that the only popular browser) on the market, then at least half of the problem is solved.
But, what does CSS3 bring us? And by us, I mean us programmers. I have written a small list of the most significant changes to the CSS core below:
- With CSS3 it will be a lot more easier to download fonts
- Whenever it comes to designing table columns you will see a higher flexibility but also a greater utility.
- Highly controllability for the user regarding color schemes. Of course, this may sound like it counters the idea where the designer has total control over the color schemes, but it is nothing like that.
- Dynamic control over any of object and its behavior.
CSS image menu
<a href=”<http://www.tutorial5.com”> <img src=”cssmenu1.jpg” border=”0″ alt=”Css images menu” style=”-moz-opacity:0.5;filter:alpha(opacity=50)” onmouseover=”this.style.MozOpacity=1; this.filters.alpha.opacity=100″ onmouseout=”this.style.MozOpacity=0.5; this.filters.alpha.opacity=50″ ></a>
Css cursor
<A HREF="#" style="cursor:crosshair">A Cross Link</A>
RollOver TD
<table width="100" height="200" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 100px; height: 50px;"> <a class="menu" href="http://www.domain.com">Link 1</a></td> </tr>
<table>
a.menu:link { text-decoration: none; color: black; display: block; width: 100%; height: 100%; background: red; }
Position centering
#centeredcontent { width: 100px; height: 100px; text-align: center; border: 1px solid #000; background-color: red; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -50px; /* Half the width of the DIV tag which is 50 pixels */ margin-top: -50px; /* Half the height of the DIV tag which is also 50 pixels */ }
Scrolable div
<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<tr><td style=”width:400px; height:100px;”> </td></tr>
<tr><td style=”width:400px; height:300px;”>
<div style=”width:100%; height:100%; overflow:auto;”>
</div>
</td>
</tr>
</table>
Scroll bars colour(IE only)
body { scrollbar-face-color: # HEX CODE; scrollbar-arrow-color: # HEX CODE; scrollbar-track-color: # HEX CODE; scrollbar-shadow-color: # HEX CODE; scrollbar-highlight-color: # HEX CODE; scrollbar-3dlight-color: # HEX CODE; scrollbar-darkshadow-color: # HEX CODE; }
Advanced list
li { background-repeat: no-repeat; background-position: 0 .4em; padding-left: 21px; } li.1 { background-image: url(1.gif); } li.2 { background-image: url(2.gif); }
<ul> <li class="1">Object 1</li> <li class="2">Object 2</li> <li class="3">Object 3</li> <li class="4">Object 4</li> <li class="5">Object 5</li> </ul>
First letter
<style type=”text/css”>
<!–
P: first-letter {font-size: 200%;}
/* The first letter within p tags will be
200% larger then the rest of the text within */
–>
</style> </head>
TIP: Permanent Scroll Bars
html { height: 100% } body { min-height: 101%; }
Preragraph background
p.red::selection {background: #ffb7b7;}
Image size
<img src="images/fruit.jpg" alt="fruit" class="expand" />
img.expand { width: 10em; }
CSS Centering
body
{
text-align: center; */ Centers in IE */
}
#container
{
margin: 0 auto; */Centers in FF */
}
<body>
<div id=”container”>
<!– Content Here –>
</div>
</body>
Globle set
* {margin:0; padding:0;}
This is global reset. Set margins and paddings to 0. Very useful.
Text shdow
#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}
/* Generic Selectors */
body {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID’s *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Css shorthand code
font: 1em/1.5em bold italic serif list-style: disc outside url(image.gif) margin: 2px 1px 3px 4px (top, right, bottom, left) margin: 5em 1em 3em (top, right and left, bottom) margin: 5% 1% (top and bottom, right and left) border: 1px black solid
Css default styles
table, tr, td
{
margin:0;
padding:0;
border:0;
border-collapse:collapse;
vertical-align:top;
}
form
{
padding:0;
margin:0;
}
img
{
border:none;
padding:0;
margin:0;
}
————————
.float_left
{
float:left;
}—
.float_right
{
float:right;
}
.clear
{
clear:both;
}
.col2_left
{
float:left;
width:45%;
}
.col2_right
{
float:right;
width:45%;
}
Removing the browser default settings
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}
Keep Your Pages In Standards Mode
The first thing you must have in your pages is a valid doctype.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
rounded corners without images
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
3. Tableless forms
form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
5. Gradient text effect
<h1><span></span>CSS Gradient Text</h1>
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>
6. Vertical centering with line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
<p>Content here</p>
7. Rounded corners with images
<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
CONTENT
<div class=”roundbottom”>
<img src=”bl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
CSS Drop Caps
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
12. Show firefox scrollbar, remove textarea scrollbar in IE
html{
overflow:-moz-scrollbars-vertical;
}
textarea{
overflow:auto;
}
List with bullet
<ul id="my_list">
<li>Some item</li>
<li>Some item</li>
</ul>
#my_list {
list-style:none;
padding:0;
margin:0;
}
#my_list {
list-style:none;
padding:0;
margin:0;
}
#my_list li {
padding: 0 0 0 10px;
margin:0;
}
#my_list li {
padding: 0 0 0 10px;
margin: 0;
background:url(images/my_bullet.jpg) no-repeat center left;
}
Group selectors
h1,h2,h3,h4,h5,h6 {font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;color:#333;margin:1em 0;}
h1 { font-size:2em; }h2 { font-size:1.6em; }
importing and hiding CSS
@import url("main.css");
@import "main.css";
Giving Internet Explorer what it needs
html>body p {/* declarations */}<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
Form
form action="#">
<fieldset>
<legend>This is my form</legend>
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</fieldset>
</form>
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
CSS Message Boxes for different message types
<div class="info">Info message</div> <div class="success">Successful operation message</div> <div class="warning">Warning message</div> <div class="error">Error message</div>
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; } .info, .success, .warning, .error, .validation { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; } .info { color: #00529B; background-color: #BDE5F8; background-image: url('info.png'); } .success { color: #4F8A10; background-color: #DFF2BF; background-image:url('success.png'); } .warning { color: #9F6000; background-color: #FEEFB3; background-image: url('warning.png'); } .error { color: #D8000C; background-color: #FFBABA; background-image: url('error.png'); }
.validation { color: #D63301; background-color: #FFCCBA; background-image: url('validation.png'); }
Pure Css Tooltip
<a href="#">Title <span>Tooltip</span></a> { z-index:10; } a:hover{ position:relative; z-index:100; } a span{ display:none; } a:hover span{ display:block; position:absolute; float:left; white-space:nowrap; top:-2.2em; left:.5em; background:#fffcd1; border:1px solid #444; color:#444; padding:1px 5px; z-index:10; }
Pure Css Image Gallery
<li> <a href="#"> <img src="images/02_1s.jpg" alt="gallery thumbnail" /> <span><img src="images/02_1.jpg" alt="gallery image" /></span> </a> </li>
ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ width:400px; height:375px; position:relative; background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%; } ul#gallery li{ float:left; display:inline; margin-top:300px; } ul#gallery a span{ display:none; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a:hover span{ position:absolute; width:400px; height:300px; float:left; top:0; left:0; display:block; }
Pure Css Image Resizer
<li> <a href="#"> <em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em> <span><img src="images/02_1m.jpg" alt="gallery image" /></span> </a> </li>
ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ margin:2em 0; } ul#gallery li{ float:left; display:inline; margin-right:5px; } ul#gallery a{ float:left; display:inline; position:relative; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a span{ display:none; } ul#gallery a:hover span{ float:left; display:block; cursor:pointer; } ul#gallery a:hover em{ display:none; } ul#gallery a img{ border:1px solid #999; padding:2px; background:#fff; } ul#gallery a:hover img{ border:1px solid #000; }
3D Button Effect
<a href="#" class="button"><span>Roll over here</span></a>
a.button{ float:left; font-size:110%; font-weight:bold; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; color:#333; width:auto; } a.button:hover{ border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #999; border-bottom:1px solid #999; color:#333; } a.button span{ background:#d4d0c8 url(images/bg_btn.gif) repeat-x; float:left; line-height:24px; height:24px; padding:0 10px; border-right:1px solid #777; border-bottom:1px solid #777; } a.button:hover span{ border:none; border-top:1px solid #777; border-left:1px solid #777; background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x; cursor:pointer; }
1. Vertical centering with line-height
line-height:24px;
When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.
2. Prevent oversized content to break fixed width floated layouts
#main{ overflow:hidden; }
When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.
3. Prevent line breaks in links
a{ white-space:nowrap; }
This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.
4. Always show Firefox scrollbar
html{ overflow:-moz-scrollbars-vertical; }
Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.
5. Centering block elements horizontally
margin:0 auto;
For all modern browser this line of css is enough to horizontally center a block level element.
6. Remove vertical textarea scrollbar in IE
textarea{ overflow:auto; }
Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.
7. Force page breaks when printing your document
h2{ page-break-before:always; }
With this line of code you can control places where you want your pages to break when printing a document.
8. Remove active link borders
a:active, a:focus{ outline:none; }
Originally found here, this will remove dotted outline from focused or active links.
A Killer Collection of Global CSS Reset Styles
* {padding: 0;margin: 0;}* {padding: 0;margin: 0;border: 0;}* {outline: 0;padding: 0;margin: 0;border: 0;}
Condensed Universal Reset
* {vertical-align: baseline;font-weight: inherit;font-family: inherit;font-style: inherit;font-size: 100%;border: 0 none;outline: 0;padding: 0;margin: 0;}
Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
Tableless forms
<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
Achieving 100% height
Making your site stretch to 100% height is slightly more complicated. Due to difference in the way browsers render css we will need to use a nifty CSS hack to achieve what we want. Here is what our code will look like with the next set of declarations added:
html, body {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}
.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
}
* html {.container:height:100%;}
CSS Circle 