Same dimension but different color

HTML & CSS
1

I have couple of boxes on my page, which is same height and width. but of different colors. so i was wondering if there is anyway i can color them indiviuals insteaf of writting css again and again just mentioning of background-color. Here is a example

2

HI,

Just create the standard class for the box and then use extra classes as modifiers.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box {
	width:280px;
	height:280px;
	background:#333;
	margin:10px;
}
.box-2 {background:#f6f;}
.box-3 {background:red;}
</style>
</head>

<body>
<div class="box"> </div>
<div class="box box-2"> </div>
<div class="box box-3"> </div>
</body>
</html>

In that way you don’t repeat unnecessary rules

1 Like
3

yea, that was my thought, then i thought. It might be redundant. Thanks @PaulOB your always a ninja of CSS

4

@PaulOB something like that, i have a rule

.body-text p > strong{
    display: block;
}

However, this rule is for <strong> tag right after

, but its even applying for <strong> instead a

. How can i make specify, so it only apply just tags next to

and ignore anyother

Edi: I believe instead of p>strong, i should have p+strong?

5

I’d need to see the html you are using but the child combinator (>) will select children and the adjacent selector (+) will select siblings.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p + strong{background:red}
p > strong{background:blue}

</style>
</head>

<body>
<p>Test </p>
<strong>red</strong>
<p>Test <strong>Blue</strong> </p>

</body>
</html>
1 Like
6

On a side note, about your OP.

if there is a semantic reason why the colors are different, you could structure it this way.

.ReasonForGrayBox, .ReasonForPinkBox{  
	width:280px;
	height:280px;
	margin:10px;
}
.ReasonForGrayBox { 	background:#333;}
.ReasonForPinknBox { 	background:#f6f;}

My tip is based on thinking of future maintenance needs. Paul’s opt in method is PERFECTLY FINE, but does , necessitate that the mark be altered if you choose to change the presentation. for example if your box went from pink to green. It’s also more indicative of what the styles MEAN.

Hope that helps

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.