CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

Create another color of my HTML circle with the least amount of code

I've put together some HTML + CSS code to have a grey circle with a number inside of it. If I wanted to create another color of the circle (say orange), what would be the easiest way to do it. I would want to leave the original code in place because I'm still using grey circles.

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/5f4kuLk5/6/

Here's my HTML

<div class="circle">
    <span class="number">1</span>
</div>

Here's my CSS:

.circle {
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
    background: #616161;
    margin: 0 auto;
}

.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.4em;
    color: #ffffff;
}

Upvotes: 0

Views: 146

Answers (2)

Vineet Mishra
Vineet Mishra

Reputation: 100

Mark background as !important.

Upvotes: 0

Turnip
Turnip

Reputation: 36652

Add a class to your second element and use that to override the main circle styles with a different background colour:

.circle {
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
    background: #616161;
    margin: 0 auto;
}

.circle.orange {
    background: orange;
}

.circle.red {
    background: red;
}

.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.4em;
    color: #ffffff;
}
<div class="circle">
    <span class="number">1</span>
</div>

<div class="circle orange">
    <span class="number">2</span>
</div>

<div class="circle red">
    <span class="number">3</span>
</div>

Upvotes: 5

Related Questions