Making CSS stick for element.style

  • Resolved marikane

    (@marikane)


    6 years, 12 months ago

    Working on a site I DID NOT build, the font style wants to change from Cabin to Calibri in one particular block of text.

    I used Developer tools to add Custom CSS to the top paragraph that begins, “Please note..” and I successfully changed the font using:

    .departure_section {
    clear: left;
    font-family: cabin;

    The paragraph below it that begins, “For example..” seems ruled by a different class. I tried using:

    element.style {
    font-family: cabin !important;
    }

    …as Dev Tools showed, but after saving that in Custom CSS, it’s impossible to make the change stick! Please let me know if you have a fix I can use.

    Thanks much!
    Mari

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Replace “element.style” with actual class of the element/node. For example if I had following tag: <span id=”dep-section”>…</span> I’d define style as #dep-section {display:block;} etc. or if I had <span class=”dep-section”></span> I’d define its style as .dep-section{font-size:2em;} for example.
    Hope this helps.

    Moderator bcworkz

    (@bcworkz)

    When you see element.style in the CSS inspector, the related style appears in the HTML element’s style attribute. Like asadmalikdotpk indicates, it’s not a valid selector in itself. In the case of conflicting CSS rules, the one with the most specific selector takes precedence. element.style is the most specific rule that can be applied, so there is usually no way to override it other than by altering the HTML itself. The only reason the first paragraph could be overridden is there is an inner strong element which allows for a more specific rule to be created. Since the next paragraph has no inner element, the only way to change the style is to either add an inner element (another span is enough) or to alter the current span element’s style attribute.

    You’ll need to identify the original source of the HTML. If it’s not part of the page’s content (seen on the page editor admin screen), it may be hardcoded on the template itself. It could also be a custom field, it depends on how the theme had set up this page.

    Thread Starter marikane

    (@marikane)

    Thanks guys. I will try what you suggest and see what happens. I know at the very least, I can go through each page and edit in Text View, but blechh!

    Cheers and happy Friday!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making CSS stick for element.style’ is closed to new replies.