Problem with using CSS

Question

I am trying to include a simple css components as in below,

<apex:stylesheet value="https://www.w3schools.com/w3css/4/w3.css"/>
    <apex:form >
        <div class="w3-panel w3-leftbar w3-sand w3-medium w3-serif">
            <p>Do not change the Column Header</p>
        </div>
    </apex:form>

This is working fine, but sidebar and header fonts become very larger.. Whats the reason for this?

Answer 1

I looked at the issue and looks like your css isn't scoped to apply just for your content.

You can do the following things

a. turn off standard stylesheets completely by disabling your header and sidebar for your page using

  <apex:page standardStylesheets="false" showHeader="false" sidebar="false" >
  ...
  </apex:page>

b. improve your stylesheet to scope to your div

Stylesheet
.mycustom { font-size: 15px; }
.mycustom .w3-panel {... }

<!-- VF would have something like -->
<apex:page>
    <div class="mycustom">
       <apex:form >
           <div class="w3-panel w3-leftbar w3-sand w3-medium w3-serif">
               <p>Do not change the Column Header</p>
           </div>
        </apex:form>
    </div>
</apex:page>

I would suggest b.

FYI: Upon inspecting the css I observed that the font size of body was being set to 15px, which probably caused the zoom issue. w3.css is setting a different font size from salesforce standard.