CSS
Here are 10 amazing ways to boost your website design, using only
HTML and CSS (no JavaScript):
-
Transparency
Hover your mouse over the second image below to toggle between transparent and normal mode.
By default, the image is set to appear transparent. With mouseover, the image appears as it normally would. Both transparency and mouseover effects are easy to achieve with just a few lines of CSS:
<style>
img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
</style>
… so the complete code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
</style>
</head>
<body>
<img alt=”kiwi” src=”kiwi.jpg”/>
</body>
</html>
Here’s an example of the same kiwi image with transparency, placed in a div that contains an abstract background image:
-
The @media rule for print and hand-held devices
The @media rule lets you specify how a web page looks on a computer screen versus how it looks when printed. For example, let’s say you want all paragraphs on your web page to display in black Arial font when seen on a computer screen, but you prefer gray Times font when the web page is printed.
Your style should look like this:
<style>
@media screen {p {font-family:arial, sans-serif; color:black;}}
@media print {p {font-family:times,serif; color:gray;}}
</style>
The style above tells your web page that it needs to appear a certain way on screen, and another way on paper. But what if you want the font to be bold, both on screen and in print?
You can target multiple media types like this:
<style>
@media screen,print {p {font-style:bold;}}
</style>
* Other types of media you can target with CSS:Media Type: Used For: all all media type devices aural speech & sound synthesizers braille braille tactile feedback devices embossed paged braille printers handheld small or handheld devices print printers projection projected presentations, like slides screen computer screens tty media using a fixed-pitch character grid, like teletypes & terminals tv television-type devices
-
Centering with the auto margin and text-align properties
The align=”center” attribute and the <center></center> attribute are both old and outdated. Sure, sometimes “old is gold”, but not in this case. If you’ve used either of these methods to center something on every page of your fifty page website….imagine updating those fifty pages when you suddenly decide you prefer a left alignment instead.
The preferred CSS technique for centering block-level elements (in this case, a div) is:
div {margin-left:auto; margin-right:auto;}
But if you’re one of the FEW people who care about IE5, then you might want to use an alternate method, since auto margins are not supported by IE5:
body {text-align:center;}
div.content {text-align:left;}
This method successfully centers the div with all the content, without disrupting the elements inside the div.
body(content div)
The text in this div is aligned left, even
though the div itself is centered.The moral of the story – Both CSS center-align methods mentioned above are useful so use whichever suits the circumstance at hand. Quit using the align=”left” and <center></center> attributes. Hop on the CSS bandwagon. The CSS versions are much superior when it comes to updating a website, and they’re W3C standards compliant.
-
Multiple classes, side by side
You can assign an element as many classes as you’d like, separating each class with a space. For instance:
<style>
.winter {width:100px; height:100px}
.summer {border:1px dashed black}
.spring {background-color:orange}
</style>
<div class=”winter summer spring”></div>
And the result…
-
Overlapping Elements with absolute positioning and z-index
CSS allows you to choose the positioning of elements on your website. By default, all elements use relative positioning, even if you don’t specify this in your stylesheet:
position:relative
If you want to overlap an element, you must change its default positioning from relative to absolute, like so:
position:absolute
Use z-index to specify which elements overlap the others. A style of z-index:1 puts an element at the bottom, then z-index:2 in front of it, and so on. Remember, the element with the highest z-index will be closest to you when looking at the screen.
Check out the example below to see absolute positioning and z-index in action:
and the code…<style>
.container {width:100%; height:380px; background-color:black}
.blue, .green, .yellow
{position:absolute; width:150px; height:150px; border:2px dashed red;}
.blue {background-color:blue; z-index:1; margin:60px 0 0 60px}
.green {background-color:green; z-index:3; margin:60px 0 0 300px}
.yellow {background-color:yellow; z-index:2; margin:160px 0 0 180px}
</style>
<div class=”container”>
<div class=”blue”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>
-
Swapping an image upon mouseover
In addition to applying the hover effect on text links, it’s nice to be able to use it for images.
For instance, hover your mouse over the image below to see the image swap take place.
How can you achieve this? I’m sure there are many ways out there. One way is to use the hover style combined with the background-image style. Here are the images and code for the panda-bird example:<style>
.imagebox, a {width:264px; height:180px;}
.imagebox {background-image:url(bird.jpg)}
.imagebox a {display:block; background-image:url(panda.jpg)}
.imagebox a:hover {background-image:none}
</style>
<div class=”imagebox”>
<a href=”#”></a>
</div>
-
Placing elements side by side using floats
Divs are easy to use since they’re block elements that don’t share their horizontal space with any other element. That’s great if you’re designing downward, but what if you want to place a bunch of divs side by side? A lot of people resort to using tables to lay out their content, since tables give you the freedom to populate rows and columns…pretty easy huh? Well, you can achieve the same task by using CSS. Are tables bad? Not really…but tables can’t be placed in a stylesheet, so updating 50 pages full of tables could get a little cumbersome.
Here’s what CSS can do, without the use of tables:
…try it yourself:<style>
.hi {float:left; margin:0 20px 20px 0; background-color:gray; width:130px; height:80px;}
.bye {clear:both; width:430px; height:150px; background-color:black;}
</style>
<div class=”hi”> <div class="hi"> <div class="hi"> <div class="bye">
-
Table border, cellpadding, and cellspacing
When using tables, almost everything is style-able with CSS….but then there’s those annoying but oh-so-necessary cellpadding and cellspacing properties that we’re forced to put directly in the table tags.
Surprise surprise…..CSS has a cellpadding and cellspacing equivalent!
Before you discovered the CSS method, you probably did this:
<table border=”1″ cellspacing=”4″ cellpadding=”5″></table>
The CSS equivalent to the above is this:
<style>
table, td {border-color:gray; border-style: solid;}
table {border-spacing:4px; border-width: 0 0 1px 1px; border-collapse: collapse;}
td {padding:5px; border:1px solid gray; border-width: 1px 1px 0 0;}
</style>
…and the result:
isn’t this really cool? css is awesome!
The thing I like about the CSS solution is that the border is crisp and clean, one pixel all around. If you prefer the slightly heavier appearance that you get from putting border=”1″ directly in the table tag, then tweak your style so that it looks like this:<style>
table, table td {border-color:gray; border:1px solid gray}
table {border-spacing:4px; }
table td {padding:5px; }
</style>
…which will make your table appear like this:
isn’t this really cool? css is awesome. In case you’re wondering, most browsers use a default of cellspacing=”2″ and cellpadding=”1″, so if you don’t style your tables, that’s what will be used.
And for those of you who want their tables to have cellpadding=”0″ and cellspacing=”0″, simple use this style:
<style>
table {border-collapse: collapse;}
th, td {padding: 0;}
</style>
…which will yield the following:
isn’t this really cool? css is awesome.
-
Custom bullets for unordered lists
CSS allows you to personalize the bullets in unordered lists, and this really helps them “fit in” with the theme of your website. We’re going to create a grocery list using this green check mark with a slight drop shadow:
Our HTML looks like this:
Grocery list:
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Flour</li>
<li>Sugar</li>
</ul>
…and here is the resulting list:
Grocery list:
• Eggs
• Milk
• Bread
• Flour
• Sugar
To implement our green check mark, we add the following style:<style>
ul li {list-style-image:url(greencheck.gif)}
</style>
…and now our list looks like this:
Grocery list:- Eggs
- Milk
- Bread
- Flour
- Sugar
Now, in many browsers (I’m using Firefox), the check mark appears above the list alignment. In older versions of Internet Explorer (such as IE6), it shows up slightly below the list alignment. Unfortunately, using list-style-image doesn’t give us much flexibility when it comes to alignment. For a more flexible solution, I replaced the list-style-image attribute with a simple background-image, so my new style looks like this:
<style>
ul li {list-style-type:none; background:#fff url(greencheck.gif) no-repeat 0 0; margin-left:-40px; padding:3px 0 0 35px; height:25px}
</style>
…which creates a far more precise alignment:
Grocery list:
- Eggs
- Milk
- Bread
- Flour
- Sugar
-
Tooltips that replace the “title” attribute in HTML links
The title attribute is added to a link in HTML, and makes a small yellow popup appear with the text you assign to the title.
Example:
<a href=”#” title=”Lorem ipsum dolor sit amet…”>
mouseover me to see a title attribute</a>
…results in the following:
mouseover me to see a title attribute
It works just fine, but you can’t style it. A CSS tooltip can achieve the same effect as the title attribute, with a lot of styling flexibility:
mouseover me to see the CSS tooltip!You can use a tooltip to provide people with information about a link before they click on it.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
If you prefer the CSS tooltip over the HTML title attribute, then here’s how to get it:<style>
div {width:275px; background-color:purple; padding:20px; border:1px dotted gray; color:#cbadcb}
a {text-decoration:none; color:yellow; font-weight:bold}
a:hover {color:orange; background:purple; } /*background color required for IE6*/
a.tip span {display:none; padding:10px; margin-left:8px; width:200px;}
a.tip:hover span {display:inline; position:absolute; background-color:#312f2f; border:1px solid black; color:#CFCFCF; font-weight:normal; font-size:9pt; margin:25px 0 0 -250px; opacity:0.9;filter:alpha(opacity=90)}
</style>
<div>
<a class=”tip” href=”#”>mouseover me to see the tooltip appear!<span>You can use a tooltip to provide people with information about a link before they click on it.</span></a>. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Wow, we need someone like you on our development team! We can all code but don’t know crap about CSS. I have to stop using tables for everything and use the power of the div with CSS!
I want to thank the blogger very much not only for this post but also for his all previous efforts. I found stylisticweb.com to be very interesting. I will be coming back to stylisticweb.com for more information.
I didn’t understand the concluding part of your article, could you please explain it more?
Youngie, are you referring to #10…the section about tooltips? If so, then basically, what I was saying is that many people simply prefer to use the “HTML title attribute” which functions as a VERY basic tooltip (mouseover the red text in #10 to see how the title attribute works)…
But the CSS tooltip demo is for people who wish for something beyond the basic HTML title attribute…since CSS allows you to control the color, size, transparency, etc. of your tooltip.
The HTML title attribute comes as-is and you cannot change the appearance. So the last part of the article provides the code for the CSS tooltip, for people who wish to use it on their websites.
Hope that answers your question.
I am not going to be original this time, so all I am going to say that your blog rocks, sad that I don’t have suck a writing skills