inheritance in css

[jurotek]

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;

}

[Author]

Posts