Website Builders Guide » Definitive Guide to CSS http://www.websitebuildersguide.com Website Builders Guide Mon, 18 Feb 2008 10:19:40 +0000 http://wordpress.org/?v=2.9 en hourly 1 FREE CSS Template http://www.websitebuildersguide.com/how-to-make-a-site/50/free-css-template/ http://www.websitebuildersguide.com/how-to-make-a-site/50/free-css-template/#comments Fri, 12 Oct 2007 10:44:07 +0000 admin http://www.wpblogbuilder.com/how-to-make-a-site/50/free-css-template/ FREE CSS Template for your website. Below are 2 FREE css templates and a css template to change the color of the web browsers scroll bar.

To use any of the style sheet examples just copy the green highlighted css code and paste it into a new text file and save it with the file extension .css.

Example mycss.css

CSS Style One

free css template

———————————–

To use this style please copy the code below.

BODY, TD {

background-color: Gray;

font-family: sans-serif;

}

A {

color: blue;

}

A:Hover {

color: red;

}

H1, H2, H3, H4 {

font-variant: small-caps;

background-color: black;

color: white;

padding: 4px;

width: 100%;

}

———————————–

CSS Style Two –

css template

To use this style please copy the code below.

BODY {

background-color : #EEEEEE;

color : #000000;

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

margin-left : 8%;

margin-right : 5%;

}

A:LINK, A:VISITED {

color : #000099;

text-decoration : none;

}

A:HOVER {

background-color : #FFFFFF;

color : #00009F;

text-decoration : none;

}

H1 {

color : #990000;

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

font-size : 200%;

margin-bottom : -1em;

margin-left : -5%;

}

H2 {

color : #990000;

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

font-size : 160%;

margin-left : -5%;

margin-top : 2.7em;

}

H3 {

color : #990000;

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

font-size : 140%;

margin-left : -5%;

margin-top : 2em;

}

H4 {

color : #990000;

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

font-size : 115%;

margin-left : -5%;

margin-top : 1.5em;

}

H5 {

color : #990000;

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

font-size : 100%;

font-weight : 900;

margin-top : 1.5em;

}

H6 {

color : #000000;

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

font-size : 100%;

font-style : italic;

font-weight : 800;

margin-bottom : -0.8em;

}

BLOCKQUOTE {

margin-left : 0;

}

CAPTION {

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

font-weight : 800;

}

TH {

background-color : #FFFFFF;

}

TD {

background-color : #F0F0F0;

}

FREE CSS Template Style Three – Adding color to your Scrollbar

cascading style sheet

———————————–

To use this style please copy the code below.

body {

scrollbar-3dlight-color : #999999;

scrollbar-arrow-color : #999999;

scrollbar-base-color : #666666;

scrollbar-darkshadow-color : Black;

scrollbar-face-color : #666666;

scrollbar-highlight-color : #999999;

scrollbar-shadow-color : #999999;

scrollbar-track-color : #8B8B8B;

}

If you want to change the color scheme to suit your website you can do this by changing the colours that start with # in the above code.

Example: #666666

]]> http://www.websitebuildersguide.com/how-to-make-a-site/50/free-css-template/feed/ 0 Linking your cascading style sheet to your Webpage http://www.websitebuildersguide.com/how-to-make-a-site/49/linking-your-cascading-style-sheet-to-your-webpage/ http://www.websitebuildersguide.com/how-to-make-a-site/49/linking-your-cascading-style-sheet-to-your-webpage/#comments Fri, 12 Oct 2007 10:41:01 +0000 admin http://www.wpblogbuilder.com/how-to-make-a-site/49/linking-your-cascading-style-sheet-to-your-webpage/ Linking your cascading style sheet to your Webpage is a fairly easy process. By now you would of hopefully finished designing your cascading style sheet. If you have not designed one yet it might be time to create your style sheet and then you can return here to learn how to link it to your webpages. Before processeding it’s important to make sure that your happy and satisfied with your style sheet.

Once everything is ok and your happy with your css file then your ready for the next step and that is to upload your cascading style sheet to your web hosting server.

Once your css file has been uploaded the next step is to add the following code into your webpages.

<html>
<head>
<title>Linking your cascading style sheet – </title>
<meta name=”generator” content=”Namo WebEditor v6.0″>
<link rel=”stylesheet” href=”http://www.websitebuidlersguide.com/ocean.css“>
</head>

Please make sure you replace the url path that is highlighted in bold to the url path of your cascading style sheet. All you need to do next is to add the link element to your webpage source and this needs to be added into every webpage that will have this effect applied to.

Once you have applied the link element to all of your webpages all you need to do next is to upload one webpage fully test it so you make sure everything works the way it’s supposed to then continue uploading the remainder of your web pages.

Remember to refresh your web browser when you are viewing your webpages with the new look and feel you have just applied by linking your cascading style sheet to your webpages.

]]> http://www.websitebuildersguide.com/how-to-make-a-site/49/linking-your-cascading-style-sheet-to-your-webpage/feed/ 0 Cascading Style Sheet Dependant Websites http://www.websitebuildersguide.com/how-to-make-a-site/48/cascading-style-sheet-dependant-websites/ http://www.websitebuildersguide.com/how-to-make-a-site/48/cascading-style-sheet-dependant-websites/#comments Fri, 12 Oct 2007 10:35:14 +0000 admin http://www.wpblogbuilder.com/how-to-make-a-site/48/cascading-style-sheet-dependant-websites/ Cascading Style Sheet Dependant Websites are starting to become visible throughout the Internet and there are a few things you need to be aware of. It’s important to remember if your building a website how a website is seen by your visitor is in the control of your website visitor’s browser.

What this means is that you can build one great looking website using cascading style sheets but once cascading style sheets are switched off on your visitors web browser then your website can
look  plain and simple.

Some website designers may be getting carried away by making there whole website reliant on cascading style sheets. Don’t take me wrong using cascading style sheets has benefits but I think it should not be abused and used only changing the font type and color, how hyperlinks are seen and so on.

Images and graphics you use for your website should be incorporated into your webpage’s as content because how you
have designed your webpage’s will not end up looking that way on your visitors web browser.

Let’s take a look at an examples.

 

Cascading Style Sheet Dependant Websites

The above webpage has been designed using a style sheet

css


Same webpage but with the style sheets disabled

As you can see above these are 2 identical content webpage’s but as soon as you turn of the cascading style sheets the pages look different. Some webpage’s are really bad where you can hardly read the content.

Solution for

Create a small image with your desired background color and link all of your webpage’s to it. If you need to change the background color all you need to do is alter the image file and everything else changes.

Apply the same methodology to your logo and other images that will be used through out your website.

You should only use cascading style sheets to change the font type and color and other minor changes that won’t effect the overall look and feel of your website,

By using this method your website will look 90% to what it should look like if the cascading style sheets feature in your
website visitors browser has been switched off.

]]> http://www.websitebuildersguide.com/how-to-make-a-site/48/cascading-style-sheet-dependant-websites/feed/ 0 Design and Create Your Own CSS http://www.websitebuildersguide.com/how-to-make-a-site/47/design-and-create-your-own-css/ http://www.websitebuildersguide.com/how-to-make-a-site/47/design-and-create-your-own-css/#comments Fri, 12 Oct 2007 10:31:00 +0000 admin http://www.wpblogbuilder.com/how-to-make-a-site/47/design-and-create-your-own-css/ Design and Create Your Own CSS - In this tutorial I will show you
how simple it is to create your own external css file by using some
proven methods.

Let’s get started in building our external style sheet.

The css file we will be creating will make our website look something
like the following snapshot.

 

The css code to create this file is:

————————————–

BODY, TD {

    background: navy;

    color : white;

    font-family :  Arial, sans-serif;

    font-size: 14px;

    text-align: justify;

}

H2 {

    font-size: 14pt;

    color: #87CEFA;

}

H3 {

    font-size: 13pt;

    color: #7FFFD4;

}

H4 {

    font-size: small;

    font-variant: small-caps;

    font-weight: bold;

    color : white;

    }

A {

    text-decoration: none;

    color: aqua;

}

A:Hover {

    text-decoration: underline;

    color: #32CD32;

}

HR {

    color: blue;

    height: 1pt;

}

————————————–

To use the above css code please open a new text file (Windows users can use Notepad) paste the code into your file and save the file as mycss.css not mycss.css.txt.

Break Down of CSS Meanings

BODY, TD {

    background: navy;

    color : white;

    font-family :  Arial, sans-serif;

    font-size: 14px;

    text-align: justify;

}

The above code formats the background color of your webpage and applies other formatting for Font Type to be used in the web pages, font size, font color and text alignment.

H2 {

    font-size: 14pt;

    color: #87CEFA;

}

The above code changes the formatting of a H2 element to a font size 14 and a specific color.

H3 {

    font-size: 13pt;

    color: #7FFFD4;

}

The above code changes the formatting of a H3 element to a font size 13 and a specific color.

H4 {

    font-size: small;

    font-variant: small-caps;

    font-weight: bold;

    color : white;

    }

The above code changes the formatting of a H4 element to a small font size, small caps, bold and white text.

A {

    text-decoration: none;

    color: aqua;

}

The above code changes the font color.

A:Hover {

    text-decoration: underline;

    color: #32CD32;

}

The above code changes the hyperlink when a mouse is moved over to it to show the link underlined and in a different color - source .

HR {

    color: blue;

    height: 1pt;

}

The above code changes the Horizontal line to blue with a set height. Once you link a css file to your webpage’s the look and feel in this example would be like the screen shot above. If you have 20 webpage’s to change the look and feel of all of the webpage’s is a matter of just updating the css file.

You can also use a simple free program that can help you to design and create your own css  style sheet.

]]> http://www.websitebuildersguide.com/how-to-make-a-site/47/design-and-create-your-own-css/feed/ 0 Definitive Guide to CSS http://www.websitebuildersguide.com/how-to-make-a-site/46/definitive-guide-to-css/ http://www.websitebuildersguide.com/how-to-make-a-site/46/definitive-guide-to-css/#comments Fri, 12 Oct 2007 10:24:52 +0000 admin http://www.wpblogbuilder.com/how-to-make-a-site/46/definitive-guide-to-css/ Definitive Guide to CSS – CSS stands for Cascading Style Sheets. CSS directs the web browser to display content by the rules that have been set up in a css file by using the html elements or in some cases by embedded cascading styles.

 

It’s easier to apply your cascading style in a css file because it make’s it much easier to manage your website’s look and feel. You really have no limits to applying css to your website which includes the ability to add css to your Tables and content.

Lets take a look at an example.

I have 2 Headings. One is a H1 heading and the other is a H2
heading. I would like to change the text to orange for the H1
heading and Green to the H2 heading so they look like the
following.

H1 Heading

H2 Heading

To create both above it’s a matter of just adding the following:

<html>
<head>
<title> – CSS stands for Cascading Style Sheets.</title>
<meta name=”generator” content=”Namo WebEditor v6.0″>
<style Type=”text/css”>
<!–
h1 { font-size: x-large; color: orange }
h2 { font-size: large; color: green }
–>
</style>
</head>

With this example anytime I use either a H1 or H2 element in my
webpage’s the colors and formatting change depending on the style
that has been setup and this is done by the web browser converting
H1 and H2 elements to the desired output. It make’s it really easy
to use an design and create your own css and apply all the formatting to each
one.

Why use css? By using css you’re able to manage the look and feel
of your website just by changing one css file.

Using the ID Attribute

The ID attribute is a handy attribute to use because you can apply
this css formatting to practically any part of your website just by
applying the style to the ID attribute and then applying it to your
content.

Let’s take a look at an example at the ID Attribute of the Definitive
Guide to CSS.

Lets say I want to have this sentence in the color blue.

I can do this two ways.

I can apply a color format to the sentence but if I need to apply this
style throughout my webpages in particular sentence it’s easier to
manage and change the content using a CSS ID Attribute.

The following code is what I have used to create the above format
which is highlighted in bold:

<html>
<head>
<title> – CSS stands for Cascading Style Sheets.</title>
<meta name=”generator” content=”Namo WebEditor v6.0″>
<style Type=”text/css”>
<!–
#Blue { color:rgb(0,102,204); }
–>
</style>
</head>

For the text to change color I applied the following code to my text:

<p ID=Blue>Lets say I want to have this sentence in the color blue.</p>

The name of the Id Attribute I used is Blue and you can use whatever
name you like it starts with # in the style type area.

Its highly advisable that you create an external css file and link your
webpages to it so that way you can easily make changes throughout
your website just by changing one file.

When designing your next style sheet think about if you need to use the ID Attribute in for parts for your content

]]> http://www.websitebuildersguide.com/how-to-make-a-site/46/definitive-guide-to-css/feed/ 0