CODEWITHSUNDEEP
css
Rich O'Brien
Rich O'Brien

Reputation: 23

Simplifying CSS for headings

I have written some css to overwrite the default styling on a Joomla template but feel there is too much code.

I'm not new to CSS but I am a novice. I'm hear to learn and take criticism.

.scf-h2-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.8em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h3-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.4em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h4-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.2em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h5-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.0em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

Upvotes: 1

Views: 58

Answers (1)

steve
steve

Reputation: 2519

Without seeing the HTML I can only do some simple shortening, but this still eliminates a lot of duplication: 

.scf-h2-title,
.scf-h3-title,
.scf-h4-title,
.scf-h5-title
{
    background: #34495e;
    color: #fff;
    font-family: 'Vollkorn', 'Helvetica', arial, serif;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1;
    padding: 6px;
}

.scf-h3-title {
    font-size: 1.4em;
}

.scf-h4-title {
    font-size: 1.2em;
}

.scf-h5-title {
    font-size: 1.0em;
}

Upvotes: 5

Related Questions