Custom HTML CSS Class

Question

Maybe i am doing this wrong but i have:

<td style="width: 15%; vertical-align: text-top; background:#666;">
<strong><div style="color:#FFF;">Description:</div></strong>
</td>

Is it possible to create a css <style> class, only one so i can do something like:

<td class="darkstyle">Description</td>

And the <div> would get applied as well or would it need to be:

<td class="darkstyle"><div>Description</div></td>

My problem with the class is that i can change the background or the foreground but not both and not for nested elements. Not sure what i'm doing wrong.

EDIT:

    .darkstyle
    {
        background: #666;
        color: #FFF;
    }

    <td colspan="4" class="darkstyle">
        <div>Description</div>
    </td>

Maybe i did it wrong, the background changes color but not the text color of the Description, this stays black :S

You can select multiple things and apply the same style to them, e.g. td, div { background: #666; }. Not sure if that's what you're looking for. — Jack Guy
– Jack Guy, Commented Feb 29, 2016 at 23:00
you should be able to change the background and foreground color. They are not mutually exclusive. You should be able to do .darkstyle {width: 15%; vertical-align: text-top; background:#666;color:#FFF;} — Cave Johnson
– Cave Johnson, Commented Feb 29, 2016 at 23:02
and the only html you need is <td class="darkstyle">Description</td> — Cave Johnson
– Cave Johnson, Commented Feb 29, 2016 at 23:03
developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/… ]||[ w3schools.com/cssref/css_selectors.asp ]||[ code.tutsplus.com/tutorials/… ]||[ sitepoint.com/web-foundations/css-selectors ]||[ — zer00ne
– zer00ne, Commented Feb 29, 2016 at 23:06
@Andrew what if the field is going to have code, html, special characters and other things. What would be best to use? <p>, <div>, <spam>, <td>, or? — codeCompiler77
– codeCompiler77, Commented Feb 29, 2016 at 23:15

Steeve Pitis · Accepted Answer · 2016-02-29 23:08:15Z

2

You want something like this ?

.darkstyle{
   width: 15%; 
   vertical-align: text-top; 
   background:#666;
   color: #FFF;
   font-weight: bold;
}

you can also access to the div like this :

.darkstyle{
   width: 15%; 
   vertical-align: text-top; 
   background:#666;
}

.darkstyle div{
   color: #FFF;
   font-weight: bold;
}

Not sure to understand, your question :p

answered Feb 29, 2016 at 23:08

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

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

1 Comment

codeCompiler77 Over a year ago

I am stupid haha, i already had the same thing as you. The reason it wasn't working is because i had the wrong path in my java executable, so the .html was never being updated. Smacks my head against the table, i was going crazy wondering why this wasn't working :S

omarjmh · Accepted Answer · 2016-02-29 23:05:59Z

So this question has to do with CSS specificity and inheritance. You can read more here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

But the general gist as follows (from the link above):

Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

Collectives™ on Stack Overflow

Custom HTML CSS Class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related