Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.
Named colors and hex values in HTML
The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch.
| Name | Hexcode | |
|---|---|---|
| Aqua | #00FFFF | |
| Black | #000000 | |
| Blue | #0000FF | |
| Fuchsia | #FF00FF | |
| Gray | #808080 | |
| Green | #008000 | |
| Lime | #00FF00 | |
| Maroon | #800000 | |
| Navy | #000080 | |
| Olive | #808000 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| Silver | #C0C0C0 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Yellow | #FFFF00 |
Know your elements!
Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element.
| Element | Description |
|---|---|
| A | Use to create hyperlinks |
| Abbr | Use for abbreviations |
| address | Contact information |
| Area | Hyperlink in an image-map |
| article* | Provides section formatting for short expository items like articles, blogs, etc. |
| aside* | Slightly related piece of content for host page |
| audio * | Used to add audio for playback associated with web page |
| b | Bold text |
| base | Base URL |
| bdi* | Isolate text that might be formatted in a different direction from text around it |
| bdo | Use to specify the direction of text |
| blockquote | Block quotation |
| body | Document body |
| br | Line break |
| button | Creates a button. |
| canvas* | Use to define a page region in which drawing can occur |
| caption | Table title |
| cite | Cited title of a work |
| code | Code fragment |
| col | Column in a table |
| colgroup | Group of table columns |
| command* | Use to define user GUI elements |
| datalist* | Use to create a list of input elements for pull-down menus |
| dd | Description |
| del | Deleted text |
| details* | Provides additional information or controls to users on demand |
| dfn | Defining instance |
| div | Generic container |
| dl | Description list |
| dt | Term or name |
| em | Emphasis |
| embed * | Links to external application or interactive content |
| fieldset | Related form controls |
| figcaption* | Provide a caption for a figure element |
| figure* | Standalone flow content element; may be static or dynamic |
| footer* | Concluding information for a document section |
| form | Defines a user-submittable form |
| h1 – h6 | Headings |
| head | Container for metadata about the document, scripts, and styles |
| header* | Header for the document |
| hgroup* | Heading group |
| hr | Horizontal rule / thematic break |
| html | Root element |
| i | Italic text |
| iframe | Nested browsing content |
| img | Image |
| input | Input control |
| ins | Inserted text |
| kbd | User input |
| keygen* | User-accessible control to generate key pairs for security or encryption |
| label | Caption for a form control |
| legend | Explanatory caption |
| li | List item |
| link | Metadata for linking external documents |
| map | Define an image-map |
| mark* | Mark or highlight a run of text in one document, for reference in another document |
| menu | List of commands |
| meta | Metadata |
| meter* | Define a visual indicator for some type of measurement |
| nav* | Use to define a navigation bar or area in a web page |
| noscript | Define content to display in case the script can’t be run |
| object | External content |
| ol | Ordered list |
| optgroup | Define a group of options |
| output* | Some kind of output from script calculation or API call |
| p | Paragraph |
| param | Use to provide parameters to plugins |
| pre | Preformatted text |
| progress* | A visual meter for task completion (progress bar) |
| q | Quoted text |
| rp* | Use for putting parentheses around ruby annotations |
| rt* | Use to mark the text of a ruby annotation |
| ruby* | Use to annotate ideographic languages like Chinese or Japanese |
| s | Mark text as removed, with strike through formatting. |
| samp | Sample output |
| script | Embedded script |
| section* | Generic document or application section |
| select | Option selection form control |
| small | Small text |
| source* | Use to specify multiple sources for audio and video |
| span | A generic text wrapper |
| strong | Important text. Is usually formatted as bold |
| style | Presentation information, typically CSS |
| sub | Subscript text |
| summary* | Summary, legend, or caption for input details information |
| sup | Superscript text |
| table | Table |
| tbody | Group of table rows |
| td | Table cell |
| textarea | Text input area |
| tfoot | Table footer row group |
| th | Table header cell |
| thead | Table heading row group |
| time* | Value for representing date and/or time |
| title | Document title |
| tr | Table row |
| track* | Specify a supplementary media track |
| u | Underline |
| ul | Unordered list |
| var | Use to specify a mathematical or programming variable, or a placeholder |
| video * | Use to playback video content in web page |
| wbr * | Use to denote possible line break point for text flow |
* New in HTML5
CSS property reference
The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article A Quick Guide to the CSS Value Definition Syntax)
| Name | Values |
|---|---|
| animation | <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> |
| animation-delay | <time> |
| animation-direction | normal | alternate | reverse | alternate reverse |
| animation-duration | <time> |
| animation-fill-mode | none | forwards | backwards | both |
| animation-iteration-count | infinite | <number> |
| animation-name | none | <identifier> |
| animation-play-state | running | paused |
| animation-timing-function | <timingfunction> |
| backface-visibility | visible | hidden |
| background-attachment | scroll | fixed | inherit |
| background-clip | border-box | padding-box | content-box | inherit |
| background-color | <color> | inherit |
| background-image | <uri> | none | inherit |
| background-origin | border-box | padding-box | content-box | inherit |
| background-position | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit |
| background-size | <length> | <percentage> | auto | cover | contain |
| background | [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit |
| border-collapse | collapse | separate | inherit |
| border-color | [ <color> ]{1,4} | inherit |
| border-image | none | <image> |
| border-image-outset | [‘sides’ || ‘horizontal’ || ‘vertical’ || ‘top’ || ‘bottom’ || ‘right’ || ‘left’] | inherit |
| border-image-repeat | [‘type’ || ‘horizontal’ || ‘vertical’ || ‘stretch’ || ‘repeat’ || ’round’] | inherit |
| border-image-source | none | <image> |
| border-image-slice | [<number> | <percentage>]{1,4} && fill? |
| border-image-width | [ <length> | <percentage> | <number> | auto ]{1,4} |
| border-radius | [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? |
| border-spacing | <length> <length>? | inherit |
| border-style | <border-style>{1,4} | inherit |
| border-top border-right border-bottom border-left | [ <border-width> || <border-style> ||border-top-color ] | inherit |
| border-top-color border-right-color border-bottom-color border-left-color | <color> | inherit |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius | [ <length> | <percentage> ]{1,2} |
| border-top-style border-right-style border-bottom-style border-left-style | <border-style> | inherit |
| border-top-width border-right-width border-bottom-width border-left-width | <border-width> | inherit |
| border-width | <border-width>{1,4} | inherit |
| border | [ <border-width> || <border-style> ||border-top-color ] | inherit |
| bottom | <length> | <percentage> | auto | inherit |
| box-shadow | none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]# |
| break-after | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
| break-before | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
| caption-side | top | bottom | inherit |
| clear | none | left | right | both | inherit |
| clip | <shape> | auto | inherit |
| color | <color> | inherit |
| columns | <‘column-width’> || <‘column-count’> |
| column-count | <number> | auto |
| column-fill | auto | balance |
| column-gap | <length> | normal |
| column-rule | <‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’> |
| column-rule-color | <color> |
| column-rule-style | [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit |
| column-rule-width | <length> | [thin | medium | thick] |
| column-span | none | all | inherit |
| column-width | <length> | auto |
| content | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| counter-increment | [ <identifier> <integer>? ]+ | none | inherit |
| counter-reset | [ <identifier> <integer>? ]+ | none | inherit |
| cursor | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| direction | ltr | rtl | inherit |
| display | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| empty-cells | show | hide | inherit |
| float | left | right | none | inherit |
| font-family | [ [ <family-name> | <generic-family> ] [,<family-name>| <generic-family> ]* ] | inherit |
| font-size | <absolute-size> | <relative-size> | <length> |<percentage> | inherit |
| font-style | normal | italic | oblique | inherit |
| font-variant | normal | small-caps | inherit |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| font | [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| height | <length> | <percentage> | auto | inherit |
| @keyframes | [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* |
| left | <length> | <percentage> | auto | inherit |
| letter-spacing | normal | <length> | inherit |
| line-height | normal | <number> | <length> | <percentage>| inherit |
| list-style-image | <uri> | none | inherit |
| list-style-position | inside | outside | inherit |
| list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
| list-style | [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit |
| margin-right margin-left | <margin-width> | inherit |
| margin-top margin-bottom | <margin-width> | inherit |
| margin | <margin-width>{1,4} | inherit |
| max-height | <length> | <percentage> | none | inherit |
| max-width | <length> | <percentage> | none | inherit |
| min-height | <length> | <percentage> | inherit |
| min-width | <length> | <percentage> | inherit |
| opacity | <number> | inherit |
| orphans | <integer> | inherit |
| outline-color | <color> | invert | inherit |
| outline-style | <border-style> | inherit |
| outline-width | <border-width> | inherit |
| outline | [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit |
| overflow | visible | hidden | scroll | auto | inherit |
| overflow-wrap | normal | break-word | inherit |
| overflow-x | visible | hidden | scroll | auto | inherit |
| overflow-y | visible | hidden | scroll | auto | inherit |
| padding-top padding-right padding-bottom padding-left | <padding-width> | inherit |
| padding | <padding-width>{1,4} | inherit |
| page-break-after | auto | always | avoid | left | right | inherit |
| page-break-before | auto | always | avoid | left | right | inherit |
| page-break-inside | avoid | auto | inherit |
| perspective | none | <length> |
| perspective-origin | [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] |
| position | static | relative | absolute | fixed | inherit |
| quotes | [<string> <string>]+ | none | inherit |
| right | <length> | <percentage> | auto | inherit |
| table-layout | auto | fixed | inherit |
| text-align | left | right | center | justify | inherit |
| text-decoration | none | [ underline || overline || line-through || blink ] | inherit |
| text-indent | <length> | <percentage> | inherit |
| text-transform | capitalize | uppercase | lowercase | none |inherit |
| top | <length> | <percentage> | auto | inherit |
| transform | none | <transform-function>+ |
| transform-origin | [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? |
| transform-style | flat | preserve-3d |
| transition | [ none | <single-transition-property> ] || <time> || <timing-function> || <time> |
| transition-delay | <time> |
| transition-duration | <time> |
| transition-timing-function | <timing-function> |
| transition-property | none | <single-transition-property># [ ‘,’ <single-transition-property># ]* |
| unicode-bidi | normal | embed | bidi-override | inherit |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |<length> | inherit |
| visibility | visible | hidden | collapse | inherit |
| white-space | normal | pre | nowrap | pre-wrap | pre-line |inherit |
| widows | <integer> | inherit |
| width | <length> | <percentage> | auto | inherit |
| word-spacing | normal | <length> | inherit |
| z-index | auto | <integer> | inherit |
