The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    try to create a reduced test case here

    # July 30, 2012 at 10:25 am

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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