Passing a parameter to a CSS class from web page

Question

Problem statement is, I have 2-3 web pages; and I want to have different body colors on this pages but keeping the class name unique to "myBody".

I looked for many blogs and authors but did not find any suitable answer to achieve this from a traditional CSS approaches.

Please suggest if it is possible to have a single CSS class accepting a parameter from a web page which will decide what body color should be applied using the same CSS with different parameters"

    .myBody(@color)
     {
     background-color: @color;
     font-size: 11px;
     color: Black;
     border: 1px solid;

     }

The answer may be tricky for some folks but I really want to see if I can achieve this using CSS only.

You can split your .myBody class in different CSS classes and let each your bodies to use two (the general one and one specific) — Claudio
– Claudio, Commented Apr 15, 2015 at 16:58
You'll have to use another class and add rules like .myBody.red { background-color: red; } — Pointy
– Pointy, Commented Apr 15, 2015 at 16:58
In the future you'll be able to add a separate attribute to your <body> tag and then access that in the CSS rule via the attr() operator, but that's not supported widely (if at all) today. — Pointy
– Pointy, Commented Apr 15, 2015 at 17:00
@Pointy is that in any w3 draft where I can read about it? I find disappointing that attr() can only be used in content so far, and was wondering if/when there are plans to extend it to the rest of properties — Alvaro Montoro
– Alvaro Montoro, Commented Apr 15, 2015 at 18:12
@AlvaroMontoro it's a CSS3 thing. CSS2 only allows attr() on the content property. — Pointy
– Pointy, Commented Apr 15, 2015 at 18:26

Community · Accepted Answer · 2017-05-23 10:24:19Z

5

You should split them up into different classes like this.

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
 }
 .background_red
 {
     background: red;
 }
 .background_green
 {
     background: green;
 }

Then use them like this

<div class="mybody background_red"></div>

<div class="mybody background_green"></div>

You also have the ability to overwrite css like this:

.myBody
{
    background:red;
}
.overwrite_background
{
    background:green;
}

<div class="myBody"></div>
<div class="myBody overwrite_background"></div>

The first div would have a background of red where the second one would have a background of green.

Here is another post you should look at. This reference a couple of options you have to handle this situation. How to pass parameters to css classes

Another option is to use Sass. Sass allows you to use a programming language to create your css. This is wonderful for changing things over a mass on the fly. If you use the same color in multiple places, or if you want to have a different configuration for each site and still carry the same css just different colors.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Apr 15, 2015 at 17:01

Sari Rahal

1,9653 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sari Rahal Over a year ago

Here is another post you should look at. This reference a couple of options you have to handle this situation. stackoverflow.com/questions/17893823/…

Kaps Over a year ago

more precisely if I have strict instructions to use only one class name for body tag as below: On Page1: <body class='myBody' > ....</body> and on Page2: <body class='myBody' > ....</body> ; Now in both the cases I have only one option to either pass a parameter from pages it self or to have any other possible solutions. Please suggest some thing related to this constraint as well.

Kaps Over a year ago

Thanks for the link Sari Rahal, but it is again the writing the multiple CSS classes in my CSS file. And also I am not using any server side programming language. There are 3 -4 tricks on the link, could you please suggest which one suites for this problem statement?

Sari Rahal Over a year ago

IT depends on your knowledge. If you are strong in JS I would suggest that one might be your best bet. If you're not, your next step would be the <style> with the php in-bedded into it. These options are dirty, but they will work. I still stand by my original answer as the best choice. You can even overwrite some css. I will add it to my answer for you.

lonesomeday · Accepted Answer · 2015-04-15 17:16:58Z

0

No, you can't do this with one class definition. There is no concept of parameters and function calls in CSS.

On the other hand, you can just about do this with minimal code duplication, but it's probably a bad idea. You say that you want to assume that there is only one classname in the class attribute. This is pretty silly, because it totally misunderstands what the class attribute is for, but we'll roll with it anyway.

We'll start by defining our classes with just the background colour:

.mybody-red {
  background-color: red;
}
.mybody-blue {
  background-color: blue;
}
.mybody-green {
  background-color: green;
}

Then we'll define code for all the mybody-* classes with the attribute starts-with selector:

div[class^="mybody-"] {
  font-size: 11px;
  color: Black;
  border: 1px solid;
}

This is, however, a silly idea, not least because it means that you are not separating markup from styling, and for myriad other reasons.

answered Apr 15, 2015 at 17:16

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

1 Comment

Kaps Over a year ago

Thanks @lonesomeday! I have accepted that the question is silly with this constraints. I just read about passing mixins to your LESS css definition. Let me explore for this solution if it provides me the solutions. And again thanks all for your valuable suggestions. #less needs to be checked here.

cssGEEK · Accepted Answer · 2015-04-15 17:32:17Z

0

Maybe you can give a unique id in each page and keep the same class.What i mean is

file1.html
<html>
<body id="file1">
<div class"myBody"></div>
</body>
</html>

  file2.html
<html>
<body id="file2">
<div class"myBody"></div>
</body>
</html>

       file3.html
<html>
<body id="file3">
<div class"myBody"></div>
</body>
</html>

You have 3 different files.Each file has a body tag with a unique id and a div tag with the class you want Now the css part:

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
}/*common class for all files*/

#file1 .myBody{
background:green;
}

#file2 .myBody{
background:red;
}
  #file3 .myBody{
background:grey;
}

This works fine if you have 2-3 pages.If you have more it will be a hard code to maintain

edited Apr 15, 2015 at 17:32

answered Apr 15, 2015 at 17:21

cssGEEK

1,0142 gold badges17 silver badges38 bronze badges

3 Comments

Kyle Falconer Over a year ago

This works when you have one or two exemptions, but gets difficult to maintain with many pages, and also bloats your CSS.

Kaps Over a year ago

What if I would have n numbers of pages; I dont want to write more an more classes instead just want to have a way through which an explicit parameter can be passed to a class definition.

cssGEEK Over a year ago

You are right.In case you have 2-3 web pages it is okay but not for many pages

user1978550 · Accepted Answer · 2015-04-15 18:55:20Z

0

As an alternate option, since you intend to pass the color via the page, why not just set the style as an inline property using PHP? While it's better to put most of your css in a separate file, sometimes it just makes sense to travel down the hierarchy of acceptable CSS placements.

I'm not sure where you're getting the color from specifically, but there's nothing wrong with setting an inline style if that's the most efficient way to do it.

Example:

<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
    YOUR TEXT
</div>

answered Apr 15, 2015 at 18:55

user1978550

1 Comment

Kaps Over a year ago

Thanks for this suggestions; but I want to provide more extensibility and managebility to my code. So I would not go with this INLINE styling solution.

Collectives™ on Stack Overflow

Passing a parameter to a CSS class from web page

4 Answers 4

4 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related