Get a free trial // Grow your CSS skills // Land your dream job

inheritance in css

  • # March 17, 2012 at 2:11 pm

    I am in process of redesigning my first and only website I built about 2 years ago for company I work for about 4 years now with very limited (about 2 weeks) of knowledge of html and css. The reason getting to web was that I got bored after 15+ successful years in DB development and administration. Wanted to try something new and exciting. I thought that the transition would be easy, but it’s not.
    Only recently (past 3 or 4 month) I am getting serious about learning css and responsive (fluid) design.
    The most problem I am experiencing right now besides many others is inheritance. I can’t get my head around it quite yet and it worries me that my css will have lot of redundant code.
    Here’s my first problem from my fluid redesign I am currently working on.
    The transition attribute of this:

    a {color: #0066CC;text-decoration:none}
    a:visited {color:#FF00FF;}
    a:hover {color:#FF00FF;text-decoration:none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;}

    carries to this and works:

    h5 a{color: #00FFFF;
    margin: 5px 6px 3px;
    padding: 1px 16px;
    text-decoration: none;
    display: inline-block;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    h5 a:visited {color:#FF00FF;}
    h5 a:hover {color:#eee;background:#369}
    h5, h5 {color:#eee;background:#369;}

    but not to this:

    .nav a.u{background: #c1c519;color:#222;}
    .nav a.w{background: #369;color:#fff}
    .nav a.u, .nav a.w, .nav a.u:visited, .nav a.w:visited {
    padding:7px 0 6px;
    border:1px solid #ccc;
    border:1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 6px #999;
    -webkit-box-shadow: 2px 2px 6px #999;
    box-shadow: 2px 2px 6px #999;
    .nav a.u:hover, .nav a.w:hover {
    .nav, .nav, .nav, .nav {

    # July 30, 2012 at 9:29 am

    try to create a reduced test case here

    # July 30, 2012 at 10:25 am

    I have already taken care of it on my own since no one reply to it for a long time till you now.
    Thank you anyways.

    # July 30, 2012 at 10:34 am

    in case something you consider solved, edit 1st post, mark it as SOLVED
    next time so there you will have no redundant posts to asnwer

    # July 30, 2012 at 10:36 am

    Oh ok, thanx

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed