CSS Starter Template: Basic Setup for Site-wide Fonts and Backgrounds
📝 Usage
This template demonstrates the CSS code for setting the global font and background for the entire site. The background color is light blue (#e0f7fa), and the font is Arial with a font size of 18px.
📘 Explanation
The code below sets the global font, background color, and font size in the `body` tag. This ensures a consistent design applied across all pages of the website.
🔹 Partial Code (Font and Background Setup)
/* Global font and background setup */
body {
font-family: 'Arial', sans-serif; /* Font */
background-color: #e0f7fa; /* Background color */
color: #333; /* Text color */
font-size: 18px; /* Font size */
line-height: 1.6; /* Line height */
margin: 0;
padding: 0;
}
💻 Full Working Code (Font and Background Setup)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font and Background Setup Demo</title>
<style>
/* Global font and background setup */
body {
font-family: 'Arial', sans-serif; /* Font */
background-color: #e0f7fa; /* Background color */
color: #333; /* Text color */
font-size: 18px; /* Font size */
line-height: 1.6; /* Line height */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Global Font and Background Setup</h2>
<p>This page sets the global font and background for the entire site. The font is Arial, and the background color is #e0f7fa (light blue).</p>
</body>
</html>
🔲 Sample of Font and Background
Click the buttons below to switch between different background colors and fonts.
🧩 Application and Utilization
By standardizing the font and background across the site, you can enhance the user experience and maintain a consistent brand image. Specifically, with the font-family property, you can specify multiple fonts like 'Arial', sans-serif to ensure that a fallback font is applied in case the primary font is unavailable.
📌 Tips for Choosing Background Colors
Choosing a light background color, like #e0f7fa, helps reduce eye strain during long reading sessions. Also, make sure to maintain a contrast ratio of at least 4.5:1 (WCAG AA standard) between the background and text colors. You can easily check this using online tools.
⚙️ Responsive Design Tips
To ensure the text is legible on mobile devices, adjust the font size using @media queries. For example: @media (max-width: 768px) { body { font-size: 16px; } } makes the text easier to read on smaller screens.
For dark mode support, you can use @media (prefers-color-scheme: dark) to reverse the background and text colors. For example: background-color: #1a1a1a; color: #f0f0f0; can be used for dark mode styles.
For better manageability, especially on larger sites, consider using CSS variables (e.g., --main-bg-color) to centralize control of design elements like background color and text color.