You can define custom CSS styling both in raw CSS format or via a publicly available link to the CSS style sheet.
VERY IMPORTANT – READ!!!
Studio Pret outputs in 2 formats – raw HTML (as a preview for you / a backup after publishing) and straight to the destination (eg: WordPress Site).
The raw HTML in previews and backups WILL have CSS styling from this module applied to it, usually via a ‘script’ or ‘link’ tag.
The output to your WordPress site will NOT have this CSS styling included. This is because your site will apply its own styling!
The Exception – Images
There is ONE exception to the above. The “HTML to Image” module will apply these styles regardless of the images final destination.
This is useful, for example, if you want to create an image of part of your page and offer it to your user for download. (Images are also great for SEO!). This way the images will retain the look of your site.
However, be careful as you cannot change these image styles later on if you have a site redesign!
How to Define Internal Styles
All the usual CSS formats work in this module. For example:
If you have an H2 heading that you need to color red then you can apply the element selector like so:
h2 { color: red; }
Alternatively you can assign a class to the element you’re after and write the CSS for it:
<h2 class=”red-style”>HEADING</h2>
Then add the custom CSS class:
.red-style { color: red; }
Advanced: If you need more control then you can also define styles by adding them directly in the HTML. Eg: Use a “<style>” tag.
Multiple External Style Sheets
If you have multiple CSS sheets to apply then you can have it all! Simply separate each one with a comma and our system will parse them out.
Watch Out ….
CSS order matters! If you specify a style within some HTML then it will override anything else that conflicts with it! The order of applied styling is:
- Remote style sheets
- Custom CSS styles
- Inline HTML styles (within individual modules)
Leave a Reply