Mick O
Mick O

Reputation: 13

Can I define (override) a class using a style attribute?

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

Answers (3)

TypeIA
TypeIA

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

Paulo Lima
Paulo Lima

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

CRABOLO
CRABOLO

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

Related Questions