CODEWITHSUNDEEP
css
apple
apple

Reputation: 35

(CSS) How to Shorten CSS code

How do I shorten this code without compromising their function?

.taster a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

.contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

I would appreciate it if you could help me out with this one.

Upvotes: 0

Views: 2180

Answers (3)

lante
lante

Reputation: 7346

Join matching styles for different selectors with a ,

.taster a:link, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover, .contact a:hover, a:active {
    font-size: 120%;
    color: #000000;
}

Or if you want it even smaller, try with a minifier.

Upvotes: 5

Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

.taster a:link, .taster a:visited, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , .taster a:active, .contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

or you can add it different (or one more) class for example "link" (for the first) and "hover" (for the second)

.link a:hover , a:active {
    font-size: 120%;
    color: #000000;
}    
.hover a:link, a:visited{
    text-decoration: none; 
    color: #FFFFFF;
}

Upvotes: 1

Alin
Alin

Reputation: 1228

This is all:

.taster a:link, 
.taster a:visited,
.contact a:link, 
.contact a:visited {
  text-decoration: none; 
  color: #FFFFFF;
}

.taster a:hover, 
.taster a:active,
.contact a:hover,
.contact a:active {
  font-size: 120%;
  color: #000000;
}

Upvotes: 2

Related Questions