Reputation: 13
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
Upvotes: 1
Views: 1907
Reputation: 17250
I think what the OP is trying to achieve is not having to repeat the style=""
attribute for every single <span>
in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass
:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style>
tag in the HTML itself, or in its own CSS file linked in.
Upvotes: 2
Reputation: 1238
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
Upvotes: 0
Reputation: 8793
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
Upvotes: 1