Style Guide in HTML
? Style Guide in HTML
A Style Guide in HTML is a document or page that defines and demonstrates the design standards for a website or project. It helps keep design consistent and maintainable.
What a Style Guide Typically Includes
Typography (fonts, sizes, weights)
Colors (primary, secondary, accents)
Buttons (styles, states)
Forms (input styles, labels)
Layouts (grids, spacing)
Icons and images
Examples of components
Simple Style Guide Example in HTML & CSS
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Basic Style Guide</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; max-width: 700px; margin: auto; } h1, h2 { color: #2c3e50; } .colors { display: flex; gap: 20px; margin-bottom: 30px; } .color-box { width: 100px; height: 100px; border-radius: 8px; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .primary { background-color: #2980b9; } .secondary { background-color: #27ae60; } .accent { background-color: #e67e22; } button { background-color: #2980b9; border: none; color: white; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; } button:hover { background-color: #1c5980; } </style></head><body> <h1>Project Style Guide</h1> <h2>Colors</h2> <div class="colors"> <div class="color-box primary">Primary</div> <div class="color-box secondary">Secondary</div> <div class="color-box accent">Accent</div> </div> <h2>Typography</h2> <p style="font-size: 1rem;">Body text example (16px)</p> <p style="font-size: 1.25rem; font-weight: bold;">Heading example (20px)</p> <h2>Buttons</h2> <button>Primary Button</button></body></html>Benefits of a Style Guide
Ensures visual consistency
Saves time for developers/designers
Easy onboarding of new team members
Want me to help you create a more detailed style guide with typography scale, grids, or components?
