Grow your CSS skills. Land your dream job.

Useful CSS tips

  • # April 11, 2008 at 4:33 pm

    Thought we could start a thread about some useful CSS tips and techniques, so we can learn from each other :lol:

    Here’s my contribution. For the longest time, I never knew that you can actually assign two (or more) classes to the same element. This is useful when you have multiple elements that share a lot of properties, but aren’t exactly identical. Put the common properties in one class, then use the second class for the properties that differ. For example:

    HTML:

    Code:
    Title
    Subtitle

    CSS:

    Code:
    .title {color: #000; font-family: verdana; font-weight: bold;}
    .large {font-size: 24px;}
    .small {font-size: 16px;}
    # April 11, 2008 at 6:39 pm

    …or use h1 and h2 (at least in that example).

    EDIT: I suppose my point is that using it for titling things is silly when you could just use some css like

    Code:
    h1 {font-family:arial}
    h2 {font-family:lucida sans unicode}
    header h1, header h2 {color:#000;}
    content h1, content h2 {color:#cc0000;}

    but I am not sure if that is normal or if I am being unsemantic or something.

    A better use of multiple class selectors would probably be more easily exemplified with conditional body statements, similar to those used in modular web pages that achieve page-specific navigation appearances.

    # April 11, 2008 at 6:53 pm

    Recently I saw this somewhere, also very usefull:

    Code:
    • Home
    • About
    • Contact
    # April 11, 2008 at 11:17 pm
    "Towers" wrote:
    …or use h1 and h2 (at least in that example).

    Oh I know, it was just a quick example to show it could be done. Probably not the best one :lol:

    # April 11, 2008 at 11:23 pm

    Here’s a cool way to send different values to IE6 and Firefox for the same property:

    Quote:
    div {
    height: 200px !important;
    height: 150px;
    }

    By default, the second height property would take effect because it comes later in the stylesheet, but Firefox sees !important and gives the first height value precedence. IE6 incorrectly ignores !important and uses the second value.

    IE6 does actually recognize !important, but just not in this context. For example, if you had "height: 200px; !important" in an external stylesheet, it would override "height: 150px;" in an internal or inline style.

    # April 12, 2008 at 7:22 am

    This tip isn’t actually CSS but JavaScript and relates to separating web layers effectively.
    Consider content hidden and displayed via JavaScript something like:

    Code:
    Show

    .hidden {display:none}

    The problem occurs when Javascript is unavailable, the content will never be able to display.

    To circumvent the issue add this straight after the page title in the HTML and not in a separate file:

    Code:

    It adds a class of .hasJS to the html tag but only if JavaScript is available.

    Now change the .hidden declaration to:

    Code:
    .hasJS .hidden {display:none}

    Now the content will only be hidden if both JavaScript and CSS are available.
    An important accessibility consideration.
    Because it’s hidden as the page is built so there’s no flash of hidden content as JavaScript affects page elements.

    regards

    mike foskett

    dag
    # April 13, 2008 at 5:20 pm
    "daGUY" wrote:
    Here’s a cool way to send different values to IE6 and Firefox for the same property:

    Hi daGUY.
    For IE6, I use the following hack; is very similar to yours …

    Code:
    div {
    height: 200px !important;
    height/**/: 150px;
    }
    # April 13, 2008 at 5:48 pm
    "dag" wrote:
    "daGUY" wrote:
    Here’s a cool way to send different values to IE6 and Firefox for the same property:

    Hi daGUY.
    For IE6, I use the following hack; is very similar to yours …

    Code:
    div {
    height: 200px !important;
    height/**/: 150px;
    }

    That works too. You could also do something like:

    Code:
    height: 200px;
    _height: 150px;

    IE ignores the underscore and sets the height to 150px; Firefox and other browsers interpret "_height" as an unknown property and ignore it.

    All of these methods work, but I like the first one the best (the one I posted above using !important) because it also validates.

    # April 15, 2008 at 2:56 pm

    I just came by this today. It’s css print framework You don’t have to use it completely, but you could learn a lot from it.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".