function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ratheven SivarajahRatheven Sivarajah 

How do you write css on a visual force-Page.

Hey I am new to visualforce. I am coding through VScode. I am able to get the particular data and show it on my sandbox and It looks fine when I put lightningStyleSheet="true". When I put the page in a site the css changes. Is this because there is a wrapper over my page that is influencing the css. If so how would I find out? Is there a way to overpower that css? How do you write css in a apex page, do you create a different style page and connect? A lot of question I know, Thanks for the help. 

This is the code:
<apex:page controller="TestQuote"  lightningStylesheets="true" showHeader="false" sidebar="false" applyBodyTag="false" applyHtmlTag="false"  >
<apex:form  >
<apex:pageBlock >
<apex:pageBlockSection >
    <apex:pageBlockSectionItem >
    <apex:outputLabel value="Quote Request Name:" for="name" ></apex:outputLabel>
    <apex:outputField value="{!result.Quote_Request__r.name}" />
    </apex:pageBlockSectionItem>  
</apex:pageBlockSection>    
</apex:pageBlock>
</apex:form>
</apex:page>
  
Best Answer chosen by Ratheven Sivarajah
Shri RajShri Raj
To write CSS for a Visualforce page, you have several options:
Inline CSS: You can use the style attribute within HTML tags to apply CSS styles directly. For example:
<apex:outputLabel value="Quote Request Name:" for="name" style="font-size: 14px; color: #333;"></apex:outputLabel>
External CSS file: You can create a separate .css file and link it to your Visualforce page using the <apex:stylesheet> tag. For example:
<apex:stylesheet value="{!URLFOR($Resource.MyCSS, 'MyCSS.css')}" />
Apex CSS classes: You can define CSS styles in your Apex class using the <style> tag. For example:
<style type="text/css"> .quote-request-label { font-size: 14px; color: #333; } </style>
And then apply the class to your label using the styleClass attribute:
<apex:outputLabel value="Quote Request Name:" for="name" styleClass="quote-request-label"></apex:outputLabel>
To determine if the site wrapper is influencing the CSS, you can inspect the elements using the browser's developer tools to see what styles are being applied to your elements and from where. To overpower the site wrapper's CSS, you can add higher specificity to your own styles, or use !important to force your styles to take priority.

Below is an example for your code 
<apex:page controller="TestQuote" lightningStylesheets="true" showHeader="false" sidebar="false" applyBodyTag="false" applyHtmlTag="false" >
apex:form
apex:style
/* Define your CSS styles here */
.custom-label {
font-weight: bold;
}
.custom-field {
margin-left: 10px;
}
</apex:style>
apex:pageBlock
apex:pageBlockSection
apex:pageBlockSectionItem
<apex:outputLabel value="Quote Request Name:" for="name" styleClass="custom-label"/>
<apex:outputField value="{!result.Quote_Request__r.name}" styleClass="custom-field"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

All Answers

Shri RajShri Raj
To write CSS for a Visualforce page, you have several options:
Inline CSS: You can use the style attribute within HTML tags to apply CSS styles directly. For example:
<apex:outputLabel value="Quote Request Name:" for="name" style="font-size: 14px; color: #333;"></apex:outputLabel>
External CSS file: You can create a separate .css file and link it to your Visualforce page using the <apex:stylesheet> tag. For example:
<apex:stylesheet value="{!URLFOR($Resource.MyCSS, 'MyCSS.css')}" />
Apex CSS classes: You can define CSS styles in your Apex class using the <style> tag. For example:
<style type="text/css"> .quote-request-label { font-size: 14px; color: #333; } </style>
And then apply the class to your label using the styleClass attribute:
<apex:outputLabel value="Quote Request Name:" for="name" styleClass="quote-request-label"></apex:outputLabel>
To determine if the site wrapper is influencing the CSS, you can inspect the elements using the browser's developer tools to see what styles are being applied to your elements and from where. To overpower the site wrapper's CSS, you can add higher specificity to your own styles, or use !important to force your styles to take priority.

Below is an example for your code 
<apex:page controller="TestQuote" lightningStylesheets="true" showHeader="false" sidebar="false" applyBodyTag="false" applyHtmlTag="false" >
apex:form
apex:style
/* Define your CSS styles here */
.custom-label {
font-weight: bold;
}
.custom-field {
margin-left: 10px;
}
</apex:style>
apex:pageBlock
apex:pageBlockSection
apex:pageBlockSectionItem
<apex:outputLabel value="Quote Request Name:" for="name" styleClass="custom-label"/>
<apex:outputField value="{!result.Quote_Request__r.name}" styleClass="custom-field"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 
This was selected as the best answer
Roberto MitchelRoberto Mitchel
I would like to suggest you that you can write css on visual force page. First of all Specify false for the showHeader attribute on the <apex:page> tag and then use <apex:stylesheet> tag or include your own HTML in visual force page and make standardStylesheets false. Example: In this step create custom CSS file and put all styling in this file. (https://www.upsers.app)
 
Ratheven SivarajahRatheven Sivarajah
Thank you so much 
Shri Raj and Roberto Mitchel I really appreciate it.