Razor: What would the CSS look like?

StockLevel has three values,
stockLevelNone, stockLevelLow, stockLevelHigh

used thusly in a Razor file:

<div class="stockLevel stockLevelNone">
<span>Number Of Units In Stock: @Model.UnitsInStock</span>
</div>

Each of the three values would have a different style / color.

How do I code this in CSS?
newbiewebSr. Software EngineerAsked:
Who is Participating?
 
CKY092Commented:
That's your HTML markup, not your CSS. If you want to put your CSS in the same file as your HTML, it would look like this:
<style type='text/css'>
.stockLevelNone{
    color: #990000;
}
.stockLevelLow{
    color: #009900;
}
.stockLevelHigh{
    color: #000099;
}
</style>

<div class="stockLevel stockLevelNone">

Open in new window

I'm assuming the stockLevelNone class that you have in that div will change dynamically based on database results.
0
 
CKY092Commented:
Obviously you could change the colors to whatever you want, but this is how you would change the color based on class.
.stockLevelNone{
    color: #990000;
}
.stockLevelLow{
    color: #009900;
}
.stockLevelHigh{
    color: #000099;
}

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
So, the dot is optional?

<div class="stockLevel stockLevelNone">
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
CKY092Commented:
No, when writing CSS code, the dot references a class. A pound(#) would reference an id.
0
 
newbiewebSr. Software EngineerAuthor Commented:
What is this, then:

<div class="stockLevel stockLevelNone">
 
0
 
newbiewebSr. Software EngineerAuthor Commented:
No, I see that one is CSS and the other is the HTML markup. I am just confused what these are:

<div class="stockLevel stockLevelNone">

I thought there would need to be some association between the class named "stockLevel" and the ones named ".stockLevelNone", etc.

I stil do not see it.
0
 
CKY092Commented:
No, the classes are independent of each other.
http://jsfiddle.net/boisebrewer/LnKdK/
If you look at that example, you'll see that although one class name contains all the charachters of another class name, it does not inherit it's properties. Hope that makes sense.
0
 
newbiewebSr. Software EngineerAuthor Commented:
Are they each classes, and by appending them with a space between, adding them both in?
0
 
newbiewebSr. Software EngineerAuthor Commented:
Is it like multiple inheritance?
0
 
CKY092Commented:
Yes, stockLevel and stockLevelNone are two different classes. In the example I posted above, you can see how there styles are defined separately.
0
 
newbiewebSr. Software EngineerAuthor Commented:
I just never saw stockLevel defined, which is what confused me.
0
 
CKY092Commented:
No, not in the circumstance you are working on. An example of a class using multiple definitions is like this: http://jsfiddle.net/boisebrewer/YeaDw/
0
 
newbiewebSr. Software EngineerAuthor Commented:
In your example, test was defined three times and each attribute supplemented the others. Right?

Why are both stockLevel and stockLevelNone used unless they also supplemented the other? Maybe I used the term multiple inheritance incorrectly.
0
 
CKY092Commented:
stockLevel could be used for another purpose. It's hard to say without seeing all the code, but in reference to CSS, those two classes are independent of each other.
0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks for sticking with me :)
0
 
CKY092Commented:
No problem. Happy to help. Keeps me learning.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.