Google HTML/CSS Style Guide

Formatting and style rules for HTML and CSS, including Sass and GSS working files.

Purpose

Improve collaboration, code quality,

consistency, and supporting infrastructure.

Applies to

Raw working files using HTML and CSS.

Core principle

Use a common vocabulary so readers can

focus on what code communicates.

Local style

When editing existing code, follow the

surrounding project style.

Overview

This guide defines formatting and style rules for HTML and CSS. It aims to improve collaboration and code quality and to

support infrastructure that works with consistently formatted source. The rules apply to raw, working files that use HTML

and CSS, including Sass and GSS files.

Tools are free to obfuscate, minify, or compile source as long as general code quality is maintained.

General rules at a glance

Rule

Standard

Why it matters

Protocol

Use HTTPS for embedded resources where possible.

Avoid mixed or insecure resource loading.

Indentation

Two spaces; no tabs or mixed indentation.

Makes hierarchy predictable and diffs cleaner.

Capitalization

Use lowercase for code, except strings.

Creates a uniform visual vocabulary.

Whitespace

Remove trailing whitespace.

Avoids unnecessary changes in diffs.

Encoding

UTF-8 without BOM.

Keeps source encoding consistent.

The first formatting decisions

Use two spaces for indentation and never tabs. Keep code lowercase unless string content requires otherwise. Remove

trailing whitespace. Use UTF-8 without a byte order mark, and declare UTF-8 in HTML with

  Fantastic 
Great 
 .example { color: blue; }

For embedded images, media, style sheets, and scripts, use HTTPS when the resource is available over HTTPS. Mark

action items with

TODO:

followed by the action.

Google HTML/CSS Style Guide

1. General style rules

Protocol

Always use HTTPS (

https:

) for images and other media files, style sheets, and scripts unless the respective resource is

not available over HTTPS.

/* Recommended */ @import 'https://fonts.googleapis.com/css?family=Open+Sans';

Indentation

Indent by two spaces at a time. Do not use tabs or mix tabs and spaces for indentation.

Capitalization

Use only lowercase for HTML element names, attributes, attribute values (except text/CDATA), CSS selectors,

properties, and property values. Strings are exempt.

  /* Recommended */ color: #e5e5e5;

Trailing whitespace

Remove trailing whitespace because it is unnecessary and can complicate diffs.

Encoding

Use UTF-8 without a BOM. Specify the encoding in HTML with

. CSS files assume UTF-8 and

do not need an encoding declaration.

Comments

Use comments where they explain what code covers, its purpose, or why a particular solution is used or preferred.

Action items

Mark todos and action items with

TODO

only. Append the action after a colon.

2. HTML style rules

Document type

Use

at the beginning of every HTML document to ensure no-quirks mode.

  Test

HTML validity

Use valid HTML where possible. HTML validity provides a measurable baseline for proper HTML usage and helps

identify technical requirements and constraints.

Semantics

Use HTML elements according to their purpose. Use heading elements for headings,

for paragraphs, and

for

anchors. Avoid using generic elements for semantics they were not designed to express.

 All recommendations

Multimedia fallback

Provide alternative content for multimedia. Images should have meaningful alternative text when appropriate; video and

audio should provide transcripts and captions when available. Decorative images may use an empty

alt

attribute.

Separation of concerns

Keep structure, presentation, and behavior separate. HTML should provide structure, CSS should provide presentation,

and scripts should provide behavior. Keep interaction between the three as small as practical.

Google HTML/CSS Style Guide

Entity references

Do not use entity references when UTF-8 can represent the character directly. Exceptions include characters with

special meaning in HTML, such as

and

, and control or invisible characters.

Optional tags

Omitting optional HTML tags is optional. It may reduce file size and improve scannability when applied consistently.

type attributes

Omit

type

attributes for CSS style sheets and JavaScript scripts because HTML5 supplies the appropriate defaults.

id attributes

Avoid unnecessary

attributes. Prefer classes for styling and data attributes for scripting. Where an ID is strictly

required, include a hyphen in its value, such as

user-profile

3. HTML formatting rules

General formatting

Put every block, list, or table element on a new line and indent child elements.

Space, the final frontier.
 Moe 
Larry 
Curly 

Line wrapping

Wrapping long HTML lines is optional. When it improves readability, indent continuation lines consistently so wrapped

attributes are distinguishable from child elements.

Quotation marks

Use double quotation marks around HTML attribute values.

 Sign in

4. CSS style rules

CSS validity

Use valid CSS where possible. Unless a validator limitation or required proprietary syntax prevents it, use valid CSS and

test it with appropriate validation tools.

Class naming

Use meaningful or generic class names. Prefer names that reflect the purpose of the element. Generic names are a

fallback for elements without a more specific meaning.

/* Recommended */ .gallery {} .login {} .video {} /* Generic */ .aux {} .alt {}

Class name style

Keep class names as short as possible while still communicating their purpose.

.nav {} .author {}

Class name delimiters

Separate words in class names with hyphens. Do not concatenate words or use underscores.

.video-id {} .ads-sample {}

Prefixes

For large projects or code embedded in other projects, an application-specific prefix is optional. Use a short, unique

identifier followed by a hyphen.

.adw-help {} /* AdWords */ .maia-note {} /* Maia */

Type selectors

Google HTML/CSS Style Guide

Avoid qualifying class names with type selectors unless necessary, such as for helper classes.

/* Recommended */ .example {} .error {}

ID selectors

Avoid ID selectors. Prefer class selectors because IDs must be unique across a page and are harder to compose across

components.

5. CSS value and declaration rules

Shorthand properties

Use shorthand properties where possible for efficiency and understandability.

border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

0 and units

Omit units after zero values unless a unit is required by the property or a compatibility constraint.

margin: 0; padding: 0; flex: 1 1 0px;

Leading zeroes

Always include a leading zero for values between -1 and 1.

font-size: 0.8em;

Hexadecimal notation

Use three-character hexadecimal notation where possible.

color: #ebc;

Important declarations

Avoid

!important

declarations. Prefer selector specificity and a predictable cascade.

Hacks

Avoid user-agent detection and CSS hacks. Treat workarounds as a last resort.

6. CSS formatting rules

Declaration order

Sort declarations consistently within a project. If no tooling enforces an order, alphabetical order is an optional

convention. Ignore vendor-specific prefixes for general sorting, while keeping multiple prefixes for the same property

sorted.

.example { background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px;

border-radius: 4px; color: black; }

Block content indentation

Indent all block content, including nested rules and declarations, to reflect hierarchy.

@media screen, projection { html { background: #fff; color: #444; } }

Declaration stops

End every declaration with a semicolon.

.test { display: block; height: 100px; }

Property name spacing

Use one space after a property name's colon and no space before it.

h3 { font-weight: bold; }

Declaration block separation

Google HTML/CSS Style Guide

Put the opening brace on the same line as the final selector, with one space before the brace.

Selector and declaration separation

Start a new line for each selector and declaration.

h1, h2, h3 { font-weight: normal; line-height: 1.2; }

Rule separation

Put a blank line between rules.

html { background: #fff; } body { margin: auto; width: 50%; }

CSS quotation marks

Use single quotation marks for attribute selectors and property values. Do not quote URI values inside

url()

. If

@charset

is used, it requires double quotation marks.

@import url(https://www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; }

7. CSS meta rules

Section comments

Grouping style-sheet sections with comments is optional. When used, separate logical sections with blank lines.

/* Header */ .adw-header {} /* Footer */ .adw-footer {} /* Gallery */ .adw-gallery {}

8. Practical review checklist

Use HTTPS for embedded resources where possible.

Indent with two spaces; never use tabs or mixed indentation.

Keep code lowercase except strings.

Remove trailing whitespace.

Use UTF-8 without a BOM.

Use TODO: for action items.

Start HTML documents with .

Use valid and semantic HTML.

Provide meaningful alternative content for multimedia.

Keep structure, presentation, and behavior separate.

Use double quotes for HTML attributes.

Prefer short, meaningful, hyphen-separated CSS class names.

Avoid unnecessary IDs and ID selectors.

Use CSS shorthand where practical.

Omit units after zero values unless required.

Include leading zeroes for fractional values.

Avoid !important and CSS hacks.

Use consistent declaration ordering.

End every CSS declaration with a semicolon.

Use consistent spacing around selectors, braces, properties, and values.

Separate CSS rules with blank lines.

Google HTML/CSS Style Guide

9. Parting words

Be consistent. When editing a file, look at the code around you and determine its existing style. Local style matters

because code that looks drastically different from its surroundings can interrupt a reader's rhythm.

The purpose of global style guidelines is to establish a common vocabulary so people can concentrate on what the code

communicates rather than how it is formatted.

Google HTML/CSS Style Guide

Prompt to Clone This Google HTML/CSS Style Guide

Apply this example's core structure, strategic pacing, and structural hierarchy directly to your own topic.

What are you generating today?