body {
font-family: "Open Sans", sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 2em;
background-color: #ffffff;
color: #333333;
}1 Using Custom CSS in Quarto
Quarto allows you to customize the look and feel of your HTML outputs by incorporating custom CSS. By defining your styles in a separate .css file, you can tweak various elements like colors, fonts, spacing, and layout to match your preferences or brand guidelines. Using CSS gives you precise control over the styling of every HTML element generated in your document.
How to create a custom CSS file
You can use the menu options within R Studio to create a CSS file like this:
This will open up a CSS file in R Studio. Note that the file does not have a name at this point (reminding you that it hasn’t been saved).
Once you have saved the file you’ll see it appear in your working directory.
Now you need to include an instruction in your YAML that instructs quarto to look at the CSS file when considering the formatting of your rendered document.
2 Customizing styles
You can define styles for a wide range of elements in your Quarto HTML document, such as:
Headings and Paragraphs: Change fonts, sizes, colors, etc.
Code Blocks: Customize the appearance of code, including background and text colors.
Tables: Modify the look of tables for better readability.
Images and Figures: Adjust sizes, borders, and positioning.
Links, Lists, Buttons: Customize interactions, colors, etc.
You can cut and paste code from this document and change the values in the parameters that you are interested. It should look something like this:
You don’t need to know how to do HTML coding. All you need to be able to do is copy and past the code (from below) that relate to the aspect of the style you’re interested an change the parameters to whatever you like.
3 Usage Tips
-
Selective Styling
Use specific class names to target elements
Avoid overly broad selectors
Test changes incrementally
-
Organization
Group related styles together
Use comments to separate sections
Keep a consistent naming convention
-
Troubleshooting
Use browser developer tools to inspect elements
Check selector specificity
Test across different screen sizes
-
Best Practices
Minimize use of !important
Use CSS variables for consistent colors/values
Consider accessibility (contrast, text size)
4 Sample CSS
You can cut and paste the code that you want to include in your CSS file from any of the section below:
4.1 Document style
4.2 Headings
h1 {
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 0.5em;
border-bottom: 2px solid #eee;
padding-bottom: 0.2em;
}
h2 {
color: #34495e;
font-size: 2em;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
h3 {
color: #465d71;
font-size: 1.5em;
margin-top: 1.2em;
}4.3 Links
a {
color: #2980b9;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
a:hover {
border-bottom-color: #2980b9;
} 4.4 Paragraphs and spacing
p {
margin-bottom: 1.5em;
text-align: justify;
}4.5 Lists
ul, ol {
padding-left: 1.5em;
margin-bottom: 1.5em;
}
li {
margin-bottom: 0.5em;
}4.6 Document style
4.7 Code blocks
/* Code blocks */
pre {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 1em;
margin: 1em 0;
overflow-x: auto;
}
/* Inline code */
code {
background-color: #f8f9fa;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
color: #e83e8c;
}
/* Code cell output */
.cell-output {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 1em;
margin-top: 0.5em;
}
/* Syntax highlighting customization */
.sourceCode .kw { color: #007bff; } /* Keywords */
.sourceCode .st { color: #28a745; } /* Strings */
.sourceCode .dv { color: #dc3545; } /* Decimal values */
.sourceCode .co { color: #6c757d; } /* Comments */
.sourceCode .fu { color: #fd7e14; } /* Functions */4.8 Tables
/* Table styling */
table {
width: 100%;
margin-bottom: 1em;
border-collapse: collapse;
border-spacing: 0;
}
th {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
padding: 0.75em;
text-align: left;
}
td {
padding: 0.75em;
border-bottom: 1px solid #dee2e6;
}
/* Striped tables */
tr:nth-child(even) {
background-color: #f8f9fa;
}
/* Hover effect */
tr:hover {
background-color: #f2f2f2;
}
/* Responsive tables */
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}4.9 Table of content
/* TOC container */
.quarto-toc {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 1em;
margin: 1em 0;
}
/* TOC title */
.quarto-toc-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0.5em;
color: #2c3e50;
}
/* TOC links */
.quarto-toc a {
color: #495057;
text-decoration: none;
display: block;
padding: 0.2em 0;
}
.quarto-toc a:hover {
color: #007bff;
background-color: #f1f1f1;
}
/* TOC nesting levels */
.quarto-toc ul {
list-style-type: none;
padding-left: 1em;
}
.quarto-toc > ul {
padding-left: 0;
}4.10 Figures and images
/* Figure containers */
figure {
margin: 2em 0;
text-align: center;
}
/* Images */
img {
max-width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Figure captions */
figcaption {
color: #666;
font-style: italic;
font-size: 0.9em;
margin-top: 0.5em;
}4.12 Callout boxes
/* Custom callouts */
.callout {
border-left: 5px solid #007bff;
background-color: #f8f9fa;
padding: 1em;
margin: 1em 0;
}
.callout-note {
border-left-color: #17a2b8;
}
.callout-warning {
border-left-color: #ffc107;
}
.callout-important {
border-left-color: #dc3545;
}
.callout-tip {
border-left-color: #28a745;
}4.13 Responsive design
/* Responsive breakpoints */
@media screen and (max-width: 768px) {
body {
padding: 1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
pre {
font-size: 0.9em;
}
}
@media screen and (max-width: 480px) {
body {
padding: 0.5em;
}
h1 {
font-size: 1.8em;
}
.quarto-toc {
display: none;
}
}