Tag Archive > css

Free Css Templates

» 17 January 2010 » In Misc » No Comments

free css templatesI have decided to release many of the css templates for free, and have also removed the earlier need for registration to be able to download the free templates.
The reason for doing this, is that I’m tired of registrating at all the sites that offers something for download. Most of the sites just send out spam mails that I’m not interested in anyway, so I made myself a “fake” email address to receive all these registration and spam emails (sounds familiar?). So, from now on, all the css templates that is available for free, requires no registration in order to download.

Well, I’m happy about this, and I hope that you are too!

Still reading? Go download some css templates!

Continue reading...

Tags: , , , ,

Css Selectors Demo

» 23 December 2009 » In Css Articles » No Comments

Today we’ll take a look at one of the new features in css3, by using the selector. Css3 is packed with some new, great features, which simplifies the styling of lists. We’ll show you how to use Alternative row styling with pure css. This is something that you typically would have to use either javascript or programming (php,asp) to achieve earlier, but here you will see how to do this with just a few lines of css.

Be aware that not all browsers are yet supported to use css3. IE does not yet support this, but if you give it a try in Firefox, Opera or Safari, you’ll see how nice this plays!

This is the result:

css selector demo

As you can see, the even and odd is ehh..even and odd! The Every third line can be set to whatever you want. Take a look at the css:

/* Css3 selector demo by csstemplatesweb.com */
* { margin: 0; padding: 0; outline: 0; }
body { background-color: #2f3135; color: #fff; }
h1 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 40px 0; }
h2 { font-family: "Tahoma"; color: #ececec; font-weight: normal; margin:0 0 30px 30px; }
h3 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 10px 30px; }
img { border: none; }
#container { width: 960px; margin: 20px auto; }
ul { margin: 0 0 15px 60px; }
ul.odd li:nth-child(odd) { color: blue; margin-left: 15px; }
ul.even li:nth-child(even) { color: green; margin-left: 15px; }
ul.every3 li:nth-child(3n) { color: orange; margin-left: 15px; }
p {margin:20px 0 0 40px;}
a {color:#fff;}

The only thing you need to look at here, is the 4 lines starting with ul. It’s pretty self explaining :)

The html markup looks like this:


<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Css3 selectors</title>
    <link rel="Stylesheet" href="styles.css" />
<div id="container">
<h1>Css3 Selector demo</h1>
<h2>Alternate row styling</h2>
<ul class="even">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
<ul class="odd">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
<h3>Every third row</h3>
<ul class="every3">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
<li>A sample text here 5</li>
<li>A sample text here 6</li>
<p>For more tutorials, articles and css templates, please visit <a href="https://csstemplatesweb.com">csstemplatesweb.com</a></p>

That’s it! You can download the files below if you want to play with it. Please share this if you like it!

Download: Css3 Selectors demo  Css3 Selectors demo (975 bytes, 294 hits)

Continue reading...

Tags: , css3, , , , ,

Css3 rounded corners demonstration

» 30 April 2009 » In Css Articles » No Comments

Css3 is around the corner, well, at least for non IE users. The new beta of Firefox (3.5b4) has built in feature for support, which allows us to test some of the new features in css3.
Let’s start by looking at one of these features, which is rounded corners


As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:

<p class="roundedbox">The rounded box</p>

And the css code:

        background-color: #0066cc; 
        color: #fff; 
        line-height: 20px; 
        width: 120px; 
        padding: 10px; 
        border-radius: 10px;
        -webkit-border-radius: 10px; 
        -moz-border-radius: 10px;

It’s only the 2 last lines in the css code that applies the rounded corners effect. The decleration of this css3 code will be border-radius, as seen in line number 3 from the bottom. But until this is in place, we need to use the 2 lines to tell the browsers to use prefixes. The first: -webkit- is for Safari, and the last one: -moz- is for Firefox.

Continue reading...

Tags: , css3, web 2.0, ,

Transparent images using css

» 28 April 2009 » In Css Articles » No Comments

It is very easy to make an image transparent, by using opacity, using only 1 line in your css. In this example, I’ll set the opacity to 40%. This is the html code:

<img src="#" width="150" height="150" alt="image" class="transparent" />

You can see that we call for the class “transparent”, in the css class transparent, we have the following code:

.transparent{ opacity:0.4;filter:alpha(opacity=40) }

This is all that it takes to show a tranparent image in css. You can also use the same code for transparency on text. Note that Firefox uses the property opacity:value for transparency, IE uses filter:alpha(opacity=value). This works in all modern browsers.
Here you can see a screenshot, one with the opacity set, and one without the opacity:
In CSS3, the syntax for transparency/opacity will be “opacity:value”.

Continue reading...

Tags: , css3, , opacity, transparent, ,

CSS3 two column layout

» 23 April 2009 » In Css Articles » 3 Comments

It looks promosing with the new CSS3, many new features is on it’s way. Today, we took a look on how to make a 2 column list layout, using CSS3 properties.
The result, viewed in Firefox 3:



As you can see, the column is split in 2. This is done by using the following css code:

body {
font-size: 62.5%; 
padding: 30px;
ol {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
margin-bottom: 1.5em;
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;

A width is defined and the column-count and column-gap properties automatically split up the space and position the list elements. Note that the prefixes -webkit- and -moz- are used here. In the long run, these will be dropped, but for now, they are required to make these properties work in Firefox, Safari and Google Chrome.

The html code is pretty straight forward:

<h1>Testing two column list layout with CSS3</h1>
  <ol class="twoColumnList">
    <li>Testing CSS3</li>
    <li>Looks like Firefox has the best support</li>
    <li>Chrome is also good</li>
    <li>IE, well...it's still IE</li>
    <li>Nam magna enim</li>
    <li>Accumsan eu</li>
    <li>Blandit sed</li>
    <li>Blandit a eros</li>
    <li>Quisque facilisis</li>
    <li>Try it out yourself</li>
  <p>Check out more stuff on <a href="https://csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>

Try it out for yourself, good luck!

Continue reading...

Tags: , css3, web 2.0, ,

Reset css

» 20 November 2008 » In Css Articles » No Comments

Are you tired of pulling your hair when you test your new, amazing website in different browsers? Maybe the div’s is not where you want them to be, the font-size is different etc. There is hope!

The purpose of css reset / stylesheet reset is to neutralize the areas where the different browsers is inconsistent, e.g margin, line-height, padding and so on. When using a css reset, all the styles that are reset in the stylesheet is reset to “zero”, giving all the browsers the same starting point.

Applying the css reset is simple. Luckily there are many examples of reset stylesheets on the web. I like to use . All you have to do to apply the css reset from Yahoo, is to include the following line in your html file, before you link to your own stylesheet:

="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">

If you want more information on using this css reset style, visit the

Continue reading...

Tags: , css reset,

How to style external links with css

» 17 July 2008 » In Css Articles » 1 Comment

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.

Link icons

Continue reading...

Tags: , external links,

Pure css tooltip

» 17 July 2008 » In Css Articles » 2 Comments

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

a span{
a:hover span{
border:1px solid #444;
padding:1px 5px;

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!

Continue reading...

Tags: , css tooltip, , tooltip

Do you want to sell templates?

» 20 February 2008 » In Affiliate » No Comments

If you’re a webdesigner, why not sell your templates at CssTemplatesWeb? It’s easy!
You don’t even know how to code (x)html. Just send your layout that you’ve made in Photoshop as a .PSD file, and I will make the necessary steps to code it to a valid css template, or send the finished template. Either way, you’ll make money!

What’s in it for me?

Money, fun and learning.

  • If you send a finished coded web template, including all images, css, htm and psd files, you’ll get 70% of the selling price at CssTemplatesWeb
  • If you send the layout as a psd file only, you’ll get 50% of the selling price of the finished coded web template sold at CssTemplatesWeb

What type of templates?

There’s no limitation on what type of templates that is put out for sale on CssTemplatesWeb. Here’s a list of the most common types of templates:

  • xhtml/css based templates, with psd file included
  • WordPress themes
  • Zen Cart themes
  • Flash templates
  • Photoshop files (buttons, logos etc.)
  • And so on..


The price for xhtml/css templates will be $9. The other types of templates is up to you to decide the selling price. But the price can not be more than $50. This is because we want to have a price guarantee for all our customers.


All payment is done with Paypal. This is a secure payment provider, offering options to pay with Visa, Mastercard, AMEX and Discover. Customers do not have to create Paypal account to pay. If you want to sell your templates, you have to create a Paypal account, because your payment will be done with Paypal.


Are you ready to submit? Then go ahead! Submit Form

Continue reading...

Tags: Affiliate, , flash templates, Reseller, sell templates, wordpress themes, , zen cart themes

What is xhtml

» 19 February 2008 » In Xhtml Articles » No Comments

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is aimed to replace HTML
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.

XHTML is compatible with HTML 4.01, and all new browsers have support for XHTML.


We have reached a point where many pages on the WWW contain “bad” HTML, the following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:

?View Code HTML

This is bad HTML


XML is a markup language where everything has to be marked up correctly, which results in “well-formed” documents.

XML was designed to describe data and HTML was designed to display data.

Today’s market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a “bad” markup language.

Therefore – by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future – XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write “well-formed” documents now, that work in all browsers and that are backward browser compatible

Continue reading...

Tags: , , strict, transitional, w3c,