Cheat Sheet

Beginning HTML5 & CSS3 For Dummies

From Beginning HTML5 and CSS3 For Dummies by Ed Tittel, Chris Minnick

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” at www.dummies.com/extras/beginninghtml5css3.)

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
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com