Grow your CSS skills. Land your dream job.

inheritance in css

  • # March 17, 2012 at 2:11 pm

    Hello,
    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 a.active, h5 a.active:hover {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 {
    display:block;
    padding:7px 0 6px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    border:1px solid #ccc;
    font-size:14px;font-size:1.4rem;
    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 {
    color:#fff;
    background:#333
    }
    .nav a.u.active, .nav a.w.active, .nav a.u.active:hover, .nav a.w.active:hover {
    color:#fff;
    background:#333;
    }

    # July 30, 2012 at 9:29 am

    @jurotek
    try to create a reduced test case here

    http://codepen.io/pen/

    # 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

    ok
    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.

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