The document.style function allows you to add CSS styles to your page by injecting CSS into your document’s <head> section. It can handle both external CSS file references and direct CSS code.
Include external CSS file:
{{ document.style("CSS file of code") }}Parameters:
CSS file of code: URL path to the CSS file or CSS code to be embedded.
Behavior
- When provided with a URL or file path, creates a
<link>tag to include the external CSS file - When provided with CSS code, creates a
<style>tag containing the provided styles - Automatically injects the resulting tags into the document’s
<head>section
Example:
{# Add Bootstrap CSS #}
{{ document.style("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") }}{# Add local CSS file #}
{{ document.style("/templates/custom/styles.css") }}Add inline CSS
{{ document.style("CSS styles") }}Example:
{{ document.style("
.custom-class {
color: #333;
font-size: 16px;
padding: 10px;
}
.header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
") }}Integration
Works seamlessly in both WordPress and Joomla environments, handling proper integration with the respective CMS’s asset management systems.
Best Practices
- Use external CSS files for larger stylesheets to benefit from browser caching
- Reserve inline styles for small, page-specific customizations
- Consider load order when adding multiple style declarations
- Use relative paths for local files when possible
- Ensure file paths are correct relative to your site’s root directory
Important Notes
- The extension automatically handles proper HTML encoding
- Styles are added in the order they are declared
- Duplicate style inclusions are typically handled by the browser
- Works in front-end contexts only.
Leave a Reply
You must be logged in to post a comment.