• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 499
  • Last Modified:

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?
0
newbieweb
Asked:
newbieweb
  • 8
  • 8
7 Solutions
 
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
 
newbiewebAuthor Commented:
So, the dot is optional?

<div class="stockLevel stockLevelNone">
0
 
CKY092Commented:
No, when writing CSS code, the dot references a class. A pound(#) would reference an id.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
newbiewebAuthor Commented:
What is this, then:

<div class="stockLevel stockLevelNone">
 
0
 
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
 
newbiewebAuthor 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
 
newbiewebAuthor Commented:
Are they each classes, and by appending them with a space between, adding them both in?
0
 
newbiewebAuthor 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
 
newbiewebAuthor 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
 
newbiewebAuthor 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
 
newbiewebAuthor Commented:
Thanks for sticking with me :)
0
 
CKY092Commented:
No problem. Happy to help. Keeps me learning.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now