28 users online (1 members and 27 guests)  


  Results 1 to 10 of 10

Related

  1. CSS code help with external sheet    Forum: CSS Forum
    Replies: 3
  2. Replies: 0
  3. create a table along the width of the sheet    Forum: General Discussion
    Replies: 1
  4. basic css style sheet for print    Forum: CSS Forum
    Replies: 2
  5. inline style overuled by external sheet    Forum: CSS Forum
    Replies: 5
  1. #1
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652

    Style sheet shortcutting - possibilities?

    First of all, I'm too new to the .css process to know the vocabulary that well. I'm assuming that style sheets refers to the 'include' files one references from the .htm file that contains the coding IDs and CLASSes referenced with the HTML code.

    Question:

    Now that my master.css is getting over 50k in size, I'd like to discover if their are any short cutting techniques to make it smaller. For example, one of dozens of IDs has:

    #darialhv { font-family:arial; font-size:26px; color:#4682b4; text-decoratio
    #darial10hv { font-family:arial; font-size:10px; color:#4682b4; text-decoratio
    #darial12hv { font-family:arial; font-size:12px; color:#4682b4; text-decoratio
    #darial15hv { font-family:arial; font-size:15px; color:#4682b4; text-decoratio
    #darial18hv { font-family:arial; font-size:18px; color:#4682b4; text-decoratio
    #darial20hv { font-family:arial; font-size:20px; color:#4682b4; text-decoratio
    #darial25hv { font-family:arial; font-size:25px; color:#4682b4; text-decoratio
    #darial30hv { font-family:arial; font-size:30px; color:#4682b4; text-decoratio
    #darial40hv { font-family:arial; font-size:40px; color:#4682b4; text-decoratio
    #darial50hv { font-family:arial; font-size:50px; color:#4682b4; text-decoratio
    #darial60hv { font-family:arial; font-size:60px; color:#4682b4; text-decoratio


    (the right half didn't make the cut - assume it has text-decoration: none } for each)

    Since the only difference in each of those IDs is the text size, is there a way to short cut the attributes, such as embedding another ID within each ID that points to the commonalities, such as:

    dariallhv { font-family:arial;color:#4682b4;text-decoration: none }


    and

    darial10hv { id:dariallhv; font-size:10px; }
    ... (the rest from darial11hv ~ darial50hv here)
    darial60hv { id:dariallhv; font-size:60px; }


    ???

  2. #2
    Mikailus's Avatar
    Ugly Geezer

    Status
    Offline
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    135
    I'm no css expert here but can't you:

    define the font family and attributes you are using for the entire page once

    then use something like .textsize1, .textsize2 etc. for the various sizes?
    Last edited by Mikailus; 12-31-2002 at 05:41 PM.

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    This page has some common css shortcuts, including a useful one for font -

    http://css.somepeople.net/?page=shortcuts
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    We posted simultaneously - here's the shortcut tested successfully, so far:

    #dcomic60y { font:60px,Comic Sans MS,;color:#ffff00;text-decoration:none }

    instead of the longer

    #dcomic60y { font-family:'Comic Sans MS'; font-size:60px; color:#ffff00; text-decoration: none }

    Is the a way to specify that all of the IDs beginning with dcomic have the text-decoration: none status?

    Last edited by benzden; 12-31-2002 at 09:22 PM.

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    A shortcut rule to set all the font properties for a class?

    Code:
    .textsize1 {
    font: bold 12pt verdana, sans-serif;
    }
    you can add more (see the tutorial) but this is the essence. the extra font family is for clients that do not have the first-choice font installed. You can have loads of these -

    Code:
    .textsize1 {
    font: oblique 16em Impact, verdana, 'times new roman', sans-serif;
    }
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Here's a snippit of my master.css file:


    #dcomicm { font-family:'Comic Sans MS'; font-size:26px; color:#c71585; text
    #dcomic10m { font-family:'Comic Sans MS'; font-size:10px; color:#c71585; text
    #dcomic12m { font-family:'Comic Sans MS'; font-size:12px; color:#c71585; text
    #dcomic12m { font-family:'Comic Sans MS'; font-size:12px; color:#c71585; text
    #dcomic15m { font-family:'Comic Sans MS'; font-size:15px; color:#c71585; text
    #dcomic16m { font-family:'Comic Sans MS'; font-size:16px; color:#c71585; text
    #dcomic18m { font-family:'Comic Sans MS'; font-size:18px; color:#c71585; text
    #dcomic20m { font-family:'Comic Sans MS'; font-size:20px; color:#c71585; text
    #dcomic25m { font-family:'Comic Sans MS'; font-size:25px; color:#c71585; text
    #dcomic30m { font-family:'Comic Sans MS'; font-size:30px; color:#c71585; text
    #dcomic40m { font-family:'Comic Sans MS'; font-size:40px; color:#c71585; text
    #dcomic50m { font-family:'Comic Sans MS'; font-size:50px; color:#c71585; text
    #dcomic60m { font-family:'Comic Sans MS'; font-size:60px; color:#c71585; text

    #dcomicr { font-family:'Comic Sans MS'; font-size:26px; color:#ff0000; text
    #dcomic10r { font-family:'Comic Sans MS'; font-size:10px; color:#ff0000; text
    #dcomic12r { font-family:'Comic Sans MS'; font-size:12px; color:#ff0000; text
    #dcomic15r { font-family:'Comic Sans MS'; font-size:15px; color:#ff0000; text
    #dcomic16r { font-family:'Comic Sans MS'; font-size:16px; color:#ff0000; text
    #dcomic18r { font-family:'Comic Sans MS'; font-size:18px; color:#ff0000; text
    #dcomic20r { font-family:'Comic Sans MS'; font-size:20px; color:#ff0000; text
    #dcomic25r { font-family:'Comic Sans MS'; font-size:25px; color:#ff0000; text
    #dcomic30r { font-family:'Comic Sans MS'; font-size:30px; color:#ff0000; text
    #dcomic40r { font-family:'Comic Sans MS'; font-size:40px; color:#ff0000; text
    #dcomic50r { font-family:'Comic Sans MS'; font-size:50px; color:#ff0000; text
    #dcomic60r { font-family:'Comic Sans MS'; font-size:60px; color:#ff0000; text

    #dcomict { font-family:'Comic Sans MS'; font-size:26px; color:#743204; text
    #dcomic10t { font-family:'Comic Sans MS'; font-size:10px; color:#743204; text
    #dcomic12t { font-family:'Comic Sans MS'; font-size:12px; color:#743204; text
    #dcomic15t { font-family:'Comic Sans MS'; font-size:15px; color:#743204; text
    #dcomic16t { font-family:'Comic Sans MS'; font-size:16px; color:#743204; text
    #dcomic18t { font-family:'Comic Sans MS'; font-size:18px; color:#743204; text
    #dcomic20t { font-family:'Comic Sans MS'; font-size:20px; color:#743204; text
    #dcomic25t { font-family:'Comic Sans MS'; font-size:25px; color:#743204; text
    #dcomic30t { font-family:'Comic Sans MS'; font-size:30px; color:#743204; text
    #dcomic40t { font-family:'Comic Sans MS'; font-size:40px; color:#743204; text
    #dcomic50t { font-family:'Comic Sans MS'; font-size:50px; color:#743204; text
    #dcomic60t { font-family:'Comic Sans MS'; font-size:60px; color:#743204; text


    That's repeated xx times in the rest of the file for arial and verdana fonts for each size and a dozen colors - see what I mean about needing shortcutting?!

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    crumbs.

    Yours is a special case, as you have hundreds (!) of sites, and the styling has been added rather than built on these lines.

    It sounds like you have an id or class for every occasion in there, in which case theres not a lot you can do without a huge amount of restyling for the individual pages.

    I think a trick that may help you will involve the cascade to work for us instead of against us here.

    It depends a lot on the html tagging involved, but heres the theory -

    You have different font etc, fine. what if you defined the font once near the beginning of the page. and then used classes such as .bigger or .smaller ? You do not need to redefine the font-family for each and every instance, just define sizes instead.

    So your .bigger rule, eg -

    Code:
    .bigger {
    font: 16pt;
    }
    would make whatever font its already using to size 16pt. you may end up with 1k of stylesheet instead of 50k.

    Defining a font for the page would be as easy as defining a base font for your body tag -

    Code:
    body.arial {
    font: arial;
    }
    and then, your body tag -
    Code:
    <body class="arial">
    unfortunately, this is the part that involves a lot of re-writing.

    Let me know if this does not make sense, as it is ten-to-two on new years day, and I am a bit worse-for-wear....happy new year everybody!
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  8. #8
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Thanks for the help. Most of the codes will probably never be used in any of the 1000+ pages but are in the master.css file merely for the sake of consistency in case a use is ever found for them. Embedding exceptions to the style sheets within the HTML file is always possible (and preferred by me, since it can be reversed more easily) and appears to be what I'll continue doing.

    As an alternative to short-cutting, is there a way to call/link to another .css file from inside another when it's initially loaded? (Making those calls/links from inside the 1000+ .htm files would defeat the purpose of it all.)

    For example, I could call src=dcomic.css, src=darial.css and src=mendu.css for the FONT, color and size characteristics of the varying styles - each file being exactly the same except for the font face -- thereby allowing major changes to one with cloning and "search and replace" editing to the other two.

  9. #9
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Sorry, Benzden, I am not sure I am following you.

    You can link to multiple .css files, but not from within the .css file itself.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  10. #10
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Each of my 1000+ .htm files now has the call to the master.css file as the first item after the </TITLE> closing tag and before the one or more Javascript includes, for example:

    <LINK REL=StyleSheet HREF="master.css" TYPE="text/css" MEDIA=screen>


    I do have calls to other JavaScript .js files from those which are called themselves from the .htm files and was just wondering if the same was possible with .css files. From what you indicated, that's apparently not possible.

    C'est lavie.

    [ It goes without saying that having specific .css files for specific web sites within those 1000+ files would make more sense but that would also make my webmastering job a whole lot more complicated for having to remember which goes with which and having to update them all as separate entities. ]

    Thanks for all the help.