Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts

    including css files

    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>

    Code:
    <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

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    for example, the css file will look like this( no <style> or other html markup inside):

    Code:
    .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:
    Code:
    <link rel="stylesheet" type="text/css" href="css file name" />
    Edit: would be better to have a link to your page to see what's wrong

    best regards

  • Users who have thanked oesxyl for this post:

    BoyWander (04-19-2011)

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    It worked.

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

    Thanks a lot, man.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by BoyWander View Post
    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

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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.

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by BoyWander View Post
    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.
    about 4, yes, can be cached.

    best regards


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •