CSS TUTORIAL
- Keyword Targeting
- Setting Up Your Website
- On-Page Optimization Methods
- Building Up Authority Status Through Content
- Off-Page SEO Backlink Generation
CSS Tutorial - On How to Edit a CSS
Template
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
Template Storage
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.
Know
Your CSS elements for customization of your template's look &
feel as per your liking
First open the CSS TopStyleLite editor application you get a blank screen like below:
Do a file open at
the top left
corner
Call the style.css
file from the
your-domain.com/support-files/ folder
like below:
(3) The last group of variables is for the special left navigation bar buttons. If your template is of a simple link menu then this menu will not be there in your CSS file, since the overall menu can take care of it.
Don't worry you can understand the above better once you look into the file. Just scroll down the CSS file and you will notice that I have demarcated the sections.
Now place the cursor on the first block called #container you get the below screen…..watch the right portion called style inspector, it becomes populated and the editable field getting highlighted in blue, once the cursor is rested on any of the attributes on the left.
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 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 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 leftnav
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
Search Our Site
Related Pages
