The below CSS Tutorial is about how to make a website with CSS template, how to edit a CSS template and customize the look and feel, edit the graphics and make it suitable for the desired look you want for your CSS based website.

Before you go through the detailed tutorial. Please download our basic free 3 (three) column CSS template and the CSS editor.

Download the Free 3 Column CSS Template..

Download the Free version of the CSS Editor. - (Find the free lite 

version at the bottom of the page)

Some more resources from where you can download professional FREE CSS templates. Edit these the way you want and make your website look like pro.

www.freecsstemplates.org

www.free-css-templates.com

www.free-css.com

www.freecsstemplates.com

Some more excellent CSS template resources under premium category which are NOT FREE

DreamTemplate

Template Kingdom

CSS Tutorial - Overview of CSS

For example say you have built 100 pages for your website and you want to change the background color. If this website is CSS based then by changing one single color code you can have the change effected for all the 100 pages.

For those DIY users who might be interested to experiment and learn. Want to be on their own, this CSS tutorial can be very handy for them.

Do a file open at the top left corner

 

Call the style.css file from the your-domain.com/support-files/ folder 
like below:

 

 

GROUP – (1) – Overall template look and feel.

 

CONTAINER

#container {

width: 950px;

margin-right: auto;

margin-left: auto;

background-color: transparent; (Note:The menu names varies from template to template)

 

 

 

The options are Percentage, Length and auto. For fixed templates normally I use the length option…when you click on it you get another small screen as below, just put the desired width you’d like to have. After putting the value save the file.

 

But ideally for 3 columns this is a good width for most of the modern resolution computers and this does well with the popular browsers like Internet Explorer or Firefox. However, I’ve not tested on others like Safari.

 

 

The next important menu is background color. My template comes with a matching background color which I felt looked good to my eyes and matched with the top nav bar and the side nav bar. But it doesn’t stop you from changing the color as you like. Experiment and choose the color as per your choice.

 

How do you do that? Click on the containeràbackground color option and at the right side click the drop down and select the color. I normally choose from the Choose Color option at the top it opens up the full color schema. Drag the side cursor and choose the desired one. Save the file.

 

How will the changes you made will look like? The other sample index file ‘index-look-and-feel.html’ supplied with this package comes handy now. Select the file, right click and open with Internet Explorer or Firefox (I suggest use both) to preview. 

Keep it like that until you are done with all your adjustments…if you need to change again do the change as I explained above the CSS file by the CSS editor, save comeback and refresh this index-look-and-feel.html from the browser again. 

You can spot the changes you made. Continue until you are satisfied with the changes. Tip: It is preferable to test in both Internet Explorer and Firefox browsers.

 

 

 

OK, do you want to add a background image to your whole website look & feel? It is simple. Keep the cursor at the end of the menu code like below. Where I have indicated in the below screen with the ‘piping’….and press enter. When you press enter you get another pop up menu box to choose from. See the next image.

 
 

Select the background image option …..then move to the right side selecting the same background image option, it will prompt you to select an image. Remember this image must be there pre-stored in your ‘image-files’ folder. You can also write the image patch like ../image-files/name-of-your-image.jpg …..it must start with two dots(..) but the image file can be gif also, not necessarily jpg only.

 

Normally if you choose this background image option you would also like to have this image all over your website background. In such case you need to do the same operation as above and select another one menu called ‘background-repeat’ (seen above), after you select this position the cursor over and at the right side ‘style inspector’ select this menu and in the drop down choose the ‘repeat’ option.

 

The other two margin options leave as it is. These are to keep your website automatically positioned at the center of the screen.

 

Next menu “HEADER”

#header {

height: 200px;

width: 950px;

margin-left: auto;

margin-right: auto;

background-image: url(../image-files/header.jpg);

background-repeat: repeat-x;

}

I presume that you’re getting comfortable with the codes. OK, about the header menu, you can get a couple of options to make the look and feel of your header.

 

Header Option 1:

As you can see the above menu, the height pertains to the height of the header image, you can change the height as per your liking…BUT remember that your image height also should not be less than that….in case your image height is more either adjust this size to fit that or simply set this height so your image will show only up to this height.

 

Coming to the width I have set this to 950px in order to match the rest of the body. What I also did is put in an option that in the case you do not get the header image of 950px then it will fill up the balance portion with the mirror image from the left side. This is defined background-repeat: repeat-x; as you can see above. Repeat x means x-axis and you can also have the width multiple/repeat as repeat-y.

 

Header Option 2:

Do you want more flexibility with your header image? Do you want several pictures or one picture at the side with your logo and the rest something else or simply a background color? Do you want a nice slide show with some pictures of your niche/theme?

 

I can provide you with this option in the premium version. Just take the time to mail me at contact@how2makeawebsite.com with your inquiry for a detailed analysis. I assure you’ll get a great value for your money.

 

I can also provide you with professional header graphics with your logo matching your theme or incorporating your pictures, fully customized as per your liking. I assure you the price you make you smile.

 

Each of these above options will be discussed in details in Step 4 (Includes).

 

Refer to the below screen or open the ‘index-look-and-feel.html’ file on the desktop by right clicking the file open with Internet Explorer or Firefox. Refer to the text written in the file to help you understand more these menu options. Keep this file open so that you can check your changes.

 

Don’t forget to save the CSS file after each change you make. Comeback and refresh the html file and find the changes.

 

 

 

Next menu “content”

 

#content {

width: 500px;

padding: 10px 10px;

margin-right: auto;

margin-left: auto;

 

Nothing much to instruct here, as you can understand that the content potion is 500px with side padding and centering. If you want to change the content width you can but be careful while increasing the width you must maintain the parity with all the other variables like container width, left-nav and sidebar width.

 

Next menu “laftnav”

 

This is the characteristics of the left nav column.

#leftnav {

        float: left;

        width: 160px;

        height: auto;

        background-color: #ffe166;

        padding: 5px;

 

As you can see the parameters are self explanatory. You may change the left nav portion width but remember to change the button width also in the other left nav special group variables also.

 

Look at the screen below which will resemble your Look&feel.index.html file when displayed in a browser. Open the file and read the useful information provided in each of the sections. Come back to your CSS editor and change what ever you would like.

 

I provide here the menu options of those which will be relevant for you.

 

This comes in handy for a simple link menu and if you would like to have some links below your nav bar. Change any variable. ‘ul’ denotes the underline menu….These are not required normally. So you may ignore for the time.

 

#leftnav ul

{

        margin-left: 0;

        padding-left: 0;

        list-style-type: none;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

}

 

#leftnav a

{

        display: block;

        width: 130px;

        padding-top: 3px;

        padding-right: 3px;

        padding-bottom: 3px;

        padding-left: 3px;

        border-bottom-width: medium;

}

 

 

#leftnav a:link, .navlist a:visited

{

        color: blue;

        text-decoration: underline;

        font-weight: bold;

}

 

#leftnav a:visited

{

        color: orange;

        text-decoration: underline;

        font-weight: bold;

}

 

When the mouse/cursor is moved above the links this color will blink

 

#leftnav a:hover

{

        text-decoration: none;

        color: #0000ff;

}

 

This will be required – This menu is for your right side column…play around with the width and background color if you want.

 

#sidebar {

        padding: 10px;

        float: right;

        width: 130px;

        background-color: #ffe166;

        height: auto;

}

 

Footer Menu

 

#footer {

        background-color: #ffe166;

        padding: 10px;

        clear: both;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 12px;

        font-weight: bold;

}

 

Headline Texts (Biggest, Bigger, Big)

 

h1 {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 22px;

        font-weight: bold;

        color: #1A2373;

        line-height: 24px;

}

h2 {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 17px;

        font-weight: bold;

        color: #2F77F1;

        line-height: 20px;

}

h3 {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 14px;

        font-weight: bolder;

        color: #000000;

        line-height: 20px;

}

 

Body/Content Paragraph Property

p {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 12px;

        line-height: 11pt;

        margin-top: 3px;

        margin-right: 0;

        margin-bottom: 3px;

        margin-left: 0;

        padding-bottom: 9px;

}

Content/Body Link Properties – For links which appearing on your 
content portion – You can play around to test

a {

        color: #E82525;

        font-weight: bold;

        text-decoration: underline;

}

a:visited {

        color: #E82525;

        text-decoration: underline;

        font-weight : bold;

}

a:hover {

        color: #901BBE;

        text-decoration: none;

}

 

Do not change anything here.

 

.box1 {

        background:#ffffff;

        color: #000;

        border:1px solid #00ffff;

        width: 400px;

        height: 165px;

        padding-top: 5;

        padding-right: 6px;

        padding-bottom: 0;

        padding-left: 6px;

        line-height: 16px;

}

This comes in the footer area

 

.smalltext {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 10px;

        padding: 3px 0;

        margin: 3px 0;

        line-height: 12pt

}

 

BELOW MENU ARE FOR THE LEFT NAV BAR BUTTONS

 

Additional menu for left nav body….not covered with the top nav body option so that you have better control and understanding

 

.urbangreymenu{

width: 160px; /*width of menu*/

}

.urbangreymenu .headerbar{/*the leftnav menu heading

font: bold 13px Verdana;

color: white;

background: #606060

margin-bottom: 0; /*bottom spacing between header and rest of 
content*/

text-transform: uppercase;

padding: 7px 0 7px 11px; /*31px is left indentation of header text*/

}

.urbangreymenu ul{

list-style-type: none;

margin: 0;

padding: 0;

margin-bottom: 0; /*bottom spacing between each UL and rest of content*/

}

.urbangreymenu ul li{

padding-bottom: 2px; /*bottom spacing between menu items*/

}

.urbangreymenu ul li a{

font: normal 12px Arial;

color: black;

background: #E9E9E9;

display: block;

padding: 0px 0;

line-height: 17px;

padding-left: 8px; /*link text is indented 8px*/

text-decoration: none;

}

.urbangreymenu ul li a:visited{

color: black;

}

.urbangreymenu ul li a:hover{ /*hover state CSS*/

color: white;

background: black;

}

THIS PART OF THE CSS PERTAINS TO THE CONTROL OF THE TOP 
NAV BAR

 

.bevelmenu{ /*the top nav whole background control*/

        font: bold 13px arial;

        padding: 6px 0;

        margin: 0;

        width: auto;

        background-color: #FFEDA6;

        float: none;

        text-align: center; /*set value to "right" or “left” for example to align menu to the right or left of page*/

}

.bevelmenu li{

list-style: none;

display: inline;

}

.bevelmenu li a{*/this is how the tab will look*/

padding: 3px 0.5em;

text-decoration: none;

color: white;

background-color: #ff6600;

border: 2px solid #ffffff;

}

  

.bevelmenu li a:hover{*/how the hover will look*/

color: white;

background-color: #000000;

border-style: outset;

}

 

Here ends the CSS menu options and editing…….this is not something that is very difficult, but you do need some hands on practice to get the complete feel.

Need help to tune your CSS Template?

Please specify your order requirement in the below quotation form.