How do I create a class hierarcy in CSS for MVC4 Razor?

Question

I am learning how to create classes in CSS with MVC4 and Razor. I want to create a class for a table that is displayed on my home page with special markup classes for td elements with strikethrough, and some td elements bolded. I do not know how to create a class that belongs to another class. I feel that by making sub classes in my table class, I can keep more organized and clean CSS code.

I have a few questions.

• How do I create a new table class that inherits from the base table?

• Should I put new classes in a separate CSS file?

• If answer to previous question is yes, then what do I need to do for Razor and MVC4 to see the new file?

• How do I create a td element under that new table and cause it to inherit from the base td of the base table?

see code below

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-right: 0.4em;
}
    th:first-child{
        margin-left:0px;
    }
    th:last-child{
        margin-right:0px;
    }
    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

Answer 1

To address your questions:

How do I create a new table class that inherits from the base table?

If you do not have a css file that resets all style rules every element inherits from the browser default file. If you define style-rules for the table element table {....} and create another style rule .foo {} the css-rules for table.foo are composed by the default style, the defined style for the element and the specific style. You can test this out with the chrome developer tools and inspect element.

Should I put new classes in a separate CSS file?

No, unless you have a very good reason. Just to clarify - rule of thumb put all style rules in one file. But not each rule in a new seperate file.

How do I create a td element under that new table and cause it to inherit from the base td of the base table?

See above td {background-color: red} td.bgBlue {background-color: blue} and the html <td class="bgBLue"> But there are other ways. I would recommend you read a tutorial about the basic rules of css and inheritance of style rules.

Update

I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded. For strikethrough ( css 2.1 or css 3 ) you can use text-decoration which seems to be not supported very well . Although it may be that the browser compability table is outdated because it worked in both browser i tested (IE11 and chrome31).

.isBold { font-weight: bold;}           
.isStrikethrough {text-decoration:line-through; }

and the html

<table>
    <tr><td class="isBold">bold</td></tr>
    <tr><td class="isStrikethrough">one</td></tr>
</table>

There may be hacks for older browsers by using for example <del>your text</del> and overlaying a transparent image.