SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    London, Ontario
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can I define & use constants in CSS?

    I'd like to be able to do something like the following in my stylesheet file, allowing me to define easily customizable colour schemes and beyond:

    ...
    define colr1="#FF0000"; // red
    define colr2="#0000FF"; // blue
    define size1="12pt";

    P.style1
    {
    color=colr1;
    font-size=size1;
    }
    P.style2
    {
    color=colr1;
    background-color=colr2;
    }
    ...

    is this possible?

  2. #2
    SitePoint Guru r2d2's Avatar
    Join Date
    Dec 2003
    Location
    In my van, fool!
    Posts
    646
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to parse your css file as PHP or ASP. This is a good thread about it.

  3. #3
    SitePoint Zealot CatsEyeDesigns's Avatar
    Join Date
    Dec 2003
    Location
    Florida
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, you can. That's one of the biggest reasons to use CSS. For example:

    <style type="text/css">
    body
    {
    color: black;
    font-size: 13px;
    }
    p
    {
    color: blue;
    }
    p.big-red
    {
    color: red;
    font-size: 20px;
    }
    </style>

    In that example, all text that's not wrapped in paragraph (<p>) tags would be black. All text within the <p> tags would be blue, unless you set the the class of that <p> to "big-red" (<p class="big-red">) in which case the text would be red and have a font size of 20 pixels. This is an ugly example but it should help you understand.

    Hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Jan 2004
    Location
    London, Ontario
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks r2d2, I guess that's as close as I'd get to my ideal, which would be to achieve this "natively".

    Ryan, what you suggest is not what I was seeking. Essentially, I want to be able to define my *own* constants, e.g.
    ...
    P
    {
    color : myblue;
    }
    ...

    where somewhere above I've defined the value of 'myblue' - can anyone tell me if the way css works renders this dream physically impossible without the use of server-side scripting?

    I suppose some of my reasons for wanting to do this can also be satisfied (albeit at the expense of scattered definitions) by grouping the common definitions together, e.g.

    H1, H2, H3
    {
    color: blue;
    }
    H1
    {
    font-size: large;
    }

    etc...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't do exactly what you want but as you've shown above you can group things together.

    You can also do things like this that may help to modularise your code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .red {color:red}
    .big {font-size:x-large}
    .blue {color:blue}
    .small {font-size:x-small}
    .greenbg {background:green}
    </style>
    </head>
    <body>
    <p class="big red">Big Red Writing</p>
    <p class="big blue">Big Blue Writing</p>
    <p class="small red">Small Red Writing</p>
    <p class="big blue greenbg">Big Blue Writing with a Green background</p>
    </body>
    </html>
    Hope that helps.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Jan 2004
    Location
    London, Ontario
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, that *almost* does what I want - can I now take those small and red class definitions and define another class that combines them?

    e.g.

    <style type="text/css">
    .red {color:red}
    .small {font-size-small}
    .errortext {red, small}
    </style>

    most likely I don't have the right syntax, but hopefully you get the idea...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Unfortunately, you can't do that, but it would be quite useful if you could.

    You'd need to define it like so:
    Code:
    <style type="text/css">
    .red, .errortext {color:red}
    .small, .errortext {font-size:x-small}
    </style>
    Which is not what you want I know . You'd have to resort to some sort of script etc as mentioned above. (You could probably do something similar with ie expressions but only IE understands them so it wouldn't be much use either.)

    Paul


Bookmarks

Posting Permissions

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