AMP for Email Supported CSS
Important: this documentation is not applicable to your currently selected format stories!
This document outlines the CSS features currently supported inside AMP emails.
Applying CSS
Internal stylesheet
When using an internal stylesheet, the CSS is specified inside a single
<style amp-custom> tag located in the <head> tag of the email.
Inline styles
In addition to an internal stylesheet, inline styles can be specified on any
element using the style attribute.
External stylesheet
External stylesheets are not supported in AMP for Email.
Using <link rel="stylesheet" href="..."> is not allowed anywhere in the email.
Supported CSS selectors
Simple selectors
- Type selector
elementname - Class selector
.classname - ID selector
#idname - Universal selector
* - Attribute selector
[attr=value]
Combinators
- Adjacent sibling combinator
A + B - General sibling combinator
A ~ B - Child combinator
A > B - Descendant combinator
A B
Pseudo-classes
:active:checked:default:disabled:empty:enabled:first-child:first-of-type:focus:focus-within:hover:in-range:indeterminate:invalid:last-child:last-of-type:last-of-type:not:nth-child:nth-last-child:nth-last-of-type:nth-of-type:only-child:only-of-type:optional:out-of-range:read-only:read-write:required:valid
Supported CSS properties
-moz-appearance-webkit-appearance-webkit-tap-highlight-coloralign-contentalign-itemsalign-selfappearanceazimuthbackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-colorclearcolorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscounter-incrementcounter-resetcursordirectiondisplayelevationempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variation-settingsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowsheighthyphensimage-orientationimage-resolutioninline-sizeisolationjustify-contentjustify-itemsjustify-selfleftletter-spacingline-breakline-heightlist-stylelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthmix-blend-modeobject-fitobject-positionoffset-distanceopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-yoverflow-wrappaddingpadding-bottompadding-leftpadding-rightpadding-toppausepause-afterpause-beforeperspectiveperspective-originpitchpitch-rangeplace-itemspositionquotesresizerichnessrightrow-gapspeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestresstable-layouttext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-shadowtext-transformtext-underline-positiontoptransformtransform-boxtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilityvoice-familywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Additional restrictions
The following CSS properties have additional restrictions:
| Property | Restrictions |
|---|---|
cursor |
The only allowed values are pointer and initial. |
filter |
url() is not allowed. |
transition |
Only opacity, transform, visibility and offset-distance can be animated. |
visibility |
The only allowed values are hidden, visible and initial. |
z-index |
Only values between -100 and 100 are allowed. |
At-rules
The only at-rule
currently supported is @media. See Media features for more
information.
Custom fonts (@font-face)
Custom fonts are not supported in AMP for Email.
Media features
List of media features
supported for conditionally applying rules via @media queries.
device-widthmax-device-widthmin-device-width
hoverorientationpointerresolutionmax-resolutionmin-resolution
widthmax-widthmin-width