CSS Templates

Probably you wonder what is CSS or cascading stylesheets. Websites can make use of CSS to format webpages. Commonly a cascading stylesheet is just an ordinary file with extension .css, like the example you see below on this page. A webpage with extension .html can make use of such a .css file for formatting purposes.

I've built this site making use of a free template called 'Soho' which I downloaded from csstemplatesfree.org. There are many nice css-templates available on it. CSS is really making developing a website more fun and flexible. E.g. when I want to change the font of all webpages on my site, I just change one line of code in one of my css-files on the webserver. So when you've got basic website-building skills and understand the HTML (hypertext markup language) already, then you should learn about CSS.

How do I make a website

When you want to learn how to make a website you'll find a great introduction here.


CSS Example

Today, I wanted to create a webpage for an article about dependency injection that contained sections with sourcecode. You just can't paste sourcecode in a standard webpage, because then all the indentation gets lost and also you need a different font. I found the following CSS script that handles this properly and you directly see on this page how this stylesheet behaves. It creates a nice box around the sourcecode and puts a little scissor on the right-top of the box.

/* css/code.css */ #content pre, #content div.code-box-n, #content div.code-box { font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace; white-space: pre; width: 39.5em; line-height: 1.4em; margin: 1em 0; border: 1px dashed #aaa8a8; padding: 0.5em 0 0.3em 0.5em; font-size: 110%; color: #000; overflow: auto; } #content div.code-box { background: #fff url(/img/cut.gif) no-repeat top right; } #content div.code-box-n { width: 33em; padding-left: 0.3em; border: 1px solid; border-color: #666 #999; background-color: #fff; } #content div.code-box-n:hover { border-color: #c30; } #content div.code-box-n a { font-weight: normal; } #content div.code-box-n a:focus, #content div.code-box-n a:hover { border-bottom: 1px solid #c00; } /* home page -- server uptime */ #content div.uptime { white-space: pre; width: 36em; line-height: 1em; margin: 1em 0; border: 1px dotted #aaa8a8; padding: 4px 0 4px 7px; background-color: #fff; overflow: auto; } #content div.uptime code { font-size: 100%; color: #000; } /* css/code.css */

When you want to use this stylesheet, copy the code in the box above and grab the image of the scissor from my site on this location. Right-click on it and save it. I've put above css-script in the root css-folder and the scissor image in the root img-folder on the webserver. You should do the same thing in case you want to use it.

When you use it on a webpage you should do it more or less like below example. At first I forgot the line with <div id="content"> and it didn't work.

<html> <head> <title>Title of your webpage</title> <link rel="stylesheet" href="/css/code.css" /> </head> <body> <div id="content"> <div class="code-box"> Put your sourcecode here Put your sourcecode here Put your sourcecode here </div> </div> </body> </html>

Rapid CSS

Rapid CSS

With Blumentals Rapid CSS Editor you can quickly and easily create and edit cascading style sheets of any complexity.



CSS Example • CSS templates