CODEWITHSUNDEEP
htmlcss
Edison
Edison

Reputation: 4291

Converting Inline style sheet to an external style sheet

I have following SyleSheet in my file.

CSS

<table style="font-family:Comic Sans MS;margin-left:auto;margin-right:auto;">
        <tr>
            <td colspan="2" style="width:1000px;height:30px;background-color:Gray;">
            </td>
        </tr>
        <tr>
            <td style="width:200px;height:600px;background-color:Lime;">
            </td>
            <td style="width:800px;height:600px;background-color:Maroon;">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width:1000px;height:30px;background-color:Olive;">
            </td>
        </tr>
    </table>

What I want is to make an independent style sheet of a table above so that On different table I can apply that style sheet.Cut long story short I wanna convert my inline style sheet to an external style sheet.

I tried but since there are same td's that need to be styled differently that confused me.I know that I can use a class attribute but if there is other possibility please tell me.

Upvotes: 1

Views: 268

Answers (1)

SW4
SW4

Reputation: 71230

The below should do it:

Demo Fiddle

table{
    font-family:Comic Sans MS;margin-left:auto;margin-right:auto;
}
tr:nth-child(1) td{
    width:1000px;height:30px;background-color:Gray;
}
tr:nth-child(2) td:first-child{
    width:200px;height:600px;background-color:Lime;
}
tr:nth-child(2) td:last-child{
    width:800px;height:600px;background-color:Maroon;
}
tr:nth-child(3) td{
    width:1000px;height:30px;background-color:Olive;
}

You can use nth-child, first-child and last-child

Upvotes: 2

Related Questions