| 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 |
| SYNTAX |
|---|
| Syntax |
| selector {property: value;} |
| External Style Sheet |
| <link rel="stylesheet" type="text/css" href="style.css" /> |
| Internal Style |
| <style type="text/css"> selector {property: value;} </style> |
| Inline Style |
| <tag style="property: value"> |
| GENERAL | |
|---|---|
| Class | String preceded by a period |
| ID | String preceded by a hash mark |
| div | Formats structure or block of text |
| span | Inline formatting |
| color | Foreground color |
| cursor | Appearance of the cursor |
| display |
block; inline; list-item; none
|
| overflow | How content overflowing its box is handled
visible, hidden, scroll, auto
|
| visibility |
visible, hidden
|
| FONT | |
|---|---|
| font-style |
Italic, normal
|
| font-variant |
normal, small-caps
|
| font-weight |
bold, normal, lighter, bolder, integer (100-900)
|
| font-size | Size of the font |
| font-family | Specific font(s) to be used |
| TEXT | |
|---|---|
| letter-spacing | Space between letters |
| line-height | Vertical distance between baselines |
| text-align | Horizontal alignment |
| text-decoration |
blink, line-through, none, overline, underline
|
| text-indent | First line indentation |
| text-transform |
capitalize, lowercase, uppercase
|
| vertical-align | Vertical alignment |
| word-spacing | Spacing between words |
| BOX MODEL | |
|---|---|
 |
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; |
| BORDER | |
|---|---|
| border-width | Width of the border |
| border-style |
dashed; dotted; double; groove; inset; outset; ridge; solid; none
|
| border-color | Color of the border |
| POSITION | |
|---|---|
| clear | Any floating elements around the element?
both, left, right, none
|
| float | Floats to a specified side
left, right, none
|
| left | The left position of an element
auto, length values (pt, in, cm, px)
|
| top | The top position of an element
auto, length values (pt, in, cm, px)
|
| position |
static, relative, absolute
|
| z-index | Element above or below overlapping elements?
auto, integer (higher numbers on top)
|
| BACKGROUND | |
|---|---|
| background-color | Background color |
| background-image | Background image |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y
|
| background-attachment | Background image scroll with the element?
scroll, fixed
|
| background-position |
(x y), top, center, bottom, left, right
|
| LIST | |
|---|---|
| list-style-type | Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
|
| list-style-position | Position of the bullet or number in a list
inside; outside
|
| list-style-image | Image to be used as the bullet in a list |
* The properties for each selector are in the order they should appear when using shorthand notation.
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.
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.| 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 |