including css files

BoyWander

04-19-2011, 06:09 AM

Well I have basically designed a 7 page website with user logins, without a .css file.

I have just been putting all the css right after the <div id="x"><style>#x {} and such.

But I have finally found a reason to make a css file to be included in my whole site, and it has to do with a background gradient color.

Here is the gradient code, it is in the <head>

<style type="text/css">
.css3gradient{width:100%;height:1200px;
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#ffb300);
background-image:-moz-linear-gradient(top, #ffffff 0%, #ffb300 60%);
background-image:linear-gradient(top, #ffffff 0%, #ffb300 60%);
background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(60%,#ffb300));}
</style>

And then I have a

<div id="wrapper">
<div class="css3gradient">

I want to be able to change the color in the gradient for the whole site at will, without having to go through each page - it will also save in bandwidth usage, not having to dowload that code for every time seen.

I tried using <link etc.> and putting the gradient code in a background.css file but it ended up chopping off the first 15% or so of my webpage, as well as the bottom 15%. And the color didn't show up.

What am I doing wrong and how can I do this correctly?

Thanks for all your help.

BW

oesxyl

04-19-2011, 08:32 AM

for example, the css file will look like this( no <style> or other html markup inside):

.css3gradient{width:100%;height:1200px;
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#ffb300);
background-image:-moz-linear-gradient(top, #ffffff 0%, #ffb300 60%);
background-image:linear-gradient(top, #ffffff 0%, #ffb300 60%);
background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(60%,#ffb300));}

in the head section of the page:

<link rel="stylesheet" type="text/css" href="css file name" />

would be better to have a link to your page to see what's wrong
best regards

BoyWander

04-19-2011, 07:13 PM

It worked.

I just didn't take out the <style> </style> like I should have. Duh!

Thanks a lot, man.

oesxyl

04-19-2011, 08:21 PM

It worked.

I just didn't take out the <style> </style> like I should have. Duh!

Thanks a lot, man.
you are welcome, :)

best regards

jckjones29

04-19-2011, 08:50 PM

Hi,
you can also use some type that is describe by myself.
you can must describe css using style.
<style type="text/css">
background-color:red;
</style>

BoyWander

04-19-2011, 10:32 PM

jckjones - the whole point of having a separate stylesheet is if you have the same styles for multiple elements, you can save the style in a separate .css file so that you can 1) use the same file for multiple elements 2)change those elements all at once instead of one by one 3)save in storage use 4)save on bandwidth? Not sure about that one.

oesxyl

04-19-2011, 10:43 PM