Scribd
Upload
46 views119 pages

HTM by Alphabet

The document defines HTML tags and their descriptions. Some key tags include: <html> defines an HTML document, <head> contains metadata, <title> defines the document title, <body> defines the document body. Formatting tags include <b> for bold, <i> for italics, <blockquote> for quotations, and <p> for paragraphs. Comments are defined with <!--...-->.

Uploaded by

Sylvester Nyam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views119 pages

HTM by Alphabet

The document defines HTML tags and their descriptions. Some key tags include: <html> defines an HTML document, <head> contains metadata, <title> defines the document title, <body> defines the document body. Formatting tags include <b> for bold, <i> for italics, <blockquote> for quotations, and <p> for paragraphs. Comments are defined with <!--...-->.

Uploaded by

Sylvester Nyam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 119

Tag Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Not supported in HTML5. Use <embed> or <object> instead.


Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page content

<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a document

<bdi> Isolates a part of text that might be formatted in a different direction from other text
outside it

<bdo> Overrides the current text direction


<big> Not supported in HTML5. Use CSS instead.
Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

<data> Adds a machine-readable translation of a given content

<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list

<del> Defines text that has been deleted from a document

<details> Defines additional details that the user can view or hide

<dfn> Specifies a term that is going to be defined within the content


<dialog> Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed> Defines a container for an external application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the document


<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a document and an external resource (most used to link
to style sheets)

<main> Specifies the main content of a document

<map> Defines an image map

<mark> Defines marked/highlighted text

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a gauge)

<nav> Defines navigation links


<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-side scripts

<object> Defines a container for an external application

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<picture> Defines a container for multiple image resources

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<script> Defines a client-side script


<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements (<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text

<svg> Defines a container for SVG graphics

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should be hidden when the page loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table


<thead> Groups the header content in a table

<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled differently from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

Basic HTML
Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment

Formatting
Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a document/article

<b> Defines bold text

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document

<dfn> Specifies a term that is going to be defined within the content

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<mark> Defines marked/highlighted text

<meter> Defines a scalar measurement within a known range (a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation


<rp> Defines what to show in browsers that do not support ruby annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<template> Defines a container for content that should be hidden when the page loads

<time> Defines a specific time (or datetime)

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled differently from normal text

<var> Defines a variable

<wbr> Defines a possible line-break

Forms and Input


Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Frames
Tag Description

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<noframes> Not supported in HTML5.


Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame

Images
Tag Description

<img> Defines an image

<map> Defines a client-side image map

<area> Defines an area inside an image map

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<picture> Defines a container for multiple image resources

<svg> Defines a container for SVG graphics

Audio / Video
Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements (<video>, <audio> and <picture>)

<track> Defines text tracks for media elements (<video> and <audio>)

<video> Defines a video or movie

Links
Tag Description
<a> Defines a hyperlink

<link> Defines the relationship between a document and an external resource (most used to link to style
sheets)

<nav> Defines navigation links

Lists
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

Tables
Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table


<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

Styles and Semantics


Tag Description

<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

<header> Defines a header for a document or section

<footer> Defines a footer for a document or section

<main> Specifies the main content of a document

<section> Defines a section in a document

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<dialog> Defines a dialog box or window


<summary> Defines a visible heading for a <details> element

<data> Adds a machine-readable translation of a given content

Meta Info
Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a document

Programming
Tag Description

<script> Defines a client-side script

<noscript> Defines an alternate content for users that do not support client-side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.


Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object

HTML Attribute Reference


The table below lists all HTML attributes and what elements they can be used within:

Attribute Belongs to Description

accept <input> Specifies the types of files that the server accepts (only for
type="file")

accept- <form> Specifies the character encodings that are to be used for
charset the form submission

accesskey Global Attributes Specifies a shortcut key to activate/focus an element

action <form> Specifies where to send the form-data when a form is


submitted

align Not supported in HTML 5. Specifies the alignment according to surrounding


elements. Use CSS instead

alt <area>, <img>, <input> Specifies an alternate text when the original element fails
to display

async <script> Specifies that the script is executed asynchronously (only


for external scripts)

autocomplete <form>, <input> Specifies whether the <form> or the <input> element
should have autocomplete enabled

autofocus <button>, <input>, <select>, <textarea> Specifies that the element should automatically get focus
when the page loads

autoplay <audio>, <video> Specifies that the audio/video will start playing as soon as
it is ready

bgcolor Not supported in HTML 5. Specifies the background color of an element. Use CSS
instead
border Not supported in HTML 5. Specifies the width of the border of an element. Use CSS
instead

charset <meta>, <script> Specifies the character encoding

checked <input> Specifies that an <input> element should be pre-selected


when the page loads (for type="checkbox" or
type="radio")

cite <blockquote>, <del>, <ins>, <q> Specifies a URL which explains the quote/deleted/inserted
text

class Global Attributes Specifies one or more classnames for an element (refers to
a class in a style sheet)

color Not supported in HTML 5. Specifies the text color of an element. Use CSS instead

cols <textarea> Specifies the visible width of a text area

colspan <td>, <th> Specifies the number of columns a table cell should span

content <meta> Gives the value associated with the http-equiv or name
attribute

contentedita Global Attributes Specifies whether the content of an element is editable or


ble not

controls <audio>, <video> Specifies that audio/video controls should be displayed


(such as a play/pause button etc)

coords <area> Specifies the coordinates of the area

data <object> Specifies the URL of the resource to be used by the object

data-* Global Attributes Used to store custom data private to the page or
application
datetime <del>, <ins>, <time> Specifies the date and time

default <track> Specifies that the track is to be enabled if the user's


preferences do not indicate that another track would be
more appropriate

defer <script> Specifies that the script is executed when the page has
finished parsing (only for external scripts)

dir Global Attributes Specifies the text direction for the content in an element

dirname <input>, <textarea> Specifies that the text direction will be submitted

disabled <button>, <fieldset>, <input>, Specifies that the specified element/group of elements
<optgroup>, <option>, <select>, <textarea> should be disabled

download <a>, <area> Specifies that the target will be downloaded when a user
clicks on the hyperlink

draggable Global Attributes Specifies whether an element is draggable or not

enctype <form> Specifies how the form-data should be encoded when


submitting it to the server (only for method="post")

for <label>, <output> Specifies which form element(s) a label/calculation is


bound to

form <button>, <fieldset>, <input>, Specifies the name of the form the element belongs to
<label>, <meter>, <object>, <output>, <select>, <textar
ea>

formaction <button>, <input> Specifies where to send the form-data when a form is
submitted. Only for type="submit"

headers <td>, <th> Specifies one or more headers cells a cell is related to

height <canvas>, <embed>, <iframe>, <img>, <input>, <object> Specifies the height of the element
, <video>

hidden Global Attributes Specifies that an element is not yet, or is no longer,


relevant

high <meter> Specifies the range that is considered to be a high value

href <a>, <area>, <base>, <link> Specifies the URL of the page the link goes to

hreflang <a>, <area>, <link> Specifies the language of the linked document

http-equiv <meta> Provides an HTTP header for the information/value of the


content attribute

id Global Attributes Specifies a unique id for an element

ismap <img> Specifies an image as a server-side image map

kind <track> Specifies the kind of text track

label <track>, <option>, <optgroup> Specifies the title of the text track

lang Global Attributes Specifies the language of the element's content

list <input> Refers to a <datalist> element that contains pre-defined


options for an <input> element

loop <audio>, <video> Specifies that the audio/video will start over again, every
time it is finished

low <meter> Specifies the range that is considered to be a low value

max <input>, <meter>, <progress> Specifies the maximum value

maxlength <input>, <textarea> Specifies the maximum number of characters allowed in an


element
media <a>, <area>, <link>, <source>, <style> Specifies what media/device the linked document is
optimized for

method <form> Specifies the HTTP method to use when sending form-data

min <input>, <meter> Specifies a minimum value

multiple <input>, <select> Specifies that a user can enter more than one value

muted <video>, <audio> Specifies that the audio output of the video should be
muted

name <button>, <fieldset>, <form>, <iframe>, <input>, <map> Specifies the name of the element
, <meta>, <object>, <output>, <param>, <select>, <texta
rea>

novalidate <form> Specifies that the form should not be validated when
submitted

onabort <audio>, <embed>, <img>, <object>, <video> Script to be run on abort

onafterprint <body> Script to be run after the document is printed

onbeforeprint <body> Script to be run before the document is printed

onbeforeunlo <body> Script to be run when the document is about to be


ad unloaded

onblur All visible elements. Script to be run when the element loses focus

oncanplay <audio>, <embed>, <object>, <video> Script to be run when a file is ready to start playing (when
it has buffered enough to begin)

oncanplaythr <audio>, <video> Script to be run when a file can be played all the way to the
ough end without pausing for buffering

onchange All visible elements. Script to be run when the value of the element is changed
onclick All visible elements. Script to be run when the element is being clicked

oncontextme All visible elements. Script to be run when a context menu is triggered
nu

oncopy All visible elements. Script to be run when the content of the element is being
copied

oncuechange <track> Script to be run when the cue changes in


a <track> element

oncut All visible elements. Script to be run when the content of the element is being
cut

ondblclick All visible elements. Script to be run when the element is being double-clicked

ondrag All visible elements. Script to be run when the element is being dragged

ondragend All visible elements. Script to be run at the end of a drag operation

ondragenter All visible elements. Script to be run when an element has been dragged to a
valid drop target

ondragleave All visible elements. Script to be run when an element leaves a valid drop target

ondragover All visible elements. Script to be run when an element is being dragged over a
valid drop target

ondragstart All visible elements. Script to be run at the start of a drag operation

ondrop All visible elements. Script to be run when dragged element is being dropped

ondurationch <audio>, <video> Script to be run when the length of the media changes
ange

onemptied <audio>, <video> Script to be run when something bad happens and the file
is suddenly unavailable (like unexpectedly disconnects)
onended <audio>, <video> Script to be run when the media has reach the end (a
useful event for messages like "thanks for listening")

onerror <audio>, <body>, <embed>, <img>, <object>, <script>, < Script to be run when an error occurs
style>, <video>

onfocus All visible elements. Script to be run when the element gets focus

onhashchang <body> Script to be run when there has been changes to the
e anchor part of the a URL

oninput All visible elements. Script to be run when the element gets user input

oninvalid All visible elements. Script to be run when the element is invalid

onkeydown All visible elements. Script to be run when a user is pressing a key

onkeypress All visible elements. Script to be run when a user presses a key

onkeyup All visible elements. Script to be run when a user releases a key

onload <body>, <iframe>, <img>, <input>, <link>, <script>, <styl Script to be run when the element is finished loading
e>

onloadeddata <audio>, <video> Script to be run when media data is loaded

onloadedmet <audio>, <video> Script to be run when meta data (like dimensions and
adata duration) are loaded

onloadstart <audio>, <video> Script to be run just as the file begins to load before
anything is actually loaded

onmousedow All visible elements. Script to be run when a mouse button is pressed down on
n an element

onmousemov All visible elements. Script to be run as long as the mouse pointer is moving
e over an element
onmouseout All visible elements. Script to be run when a mouse pointer moves out of an
element

onmouseover All visible elements. Script to be run when a mouse pointer moves over an
element

onmouseup All visible elements. Script to be run when a mouse button is released over an
element

onmousewhe All visible elements. Script to be run when a mouse wheel is being scrolled over
el an element

onoffline <body> Script to be run when the browser starts to work offline

ononline <body> Script to be run when the browser starts to work online

onpagehide <body> Script to be run when a user navigates away from a page

onpageshow <body> Script to be run when a user navigates to a page

onpaste All visible elements. Script to be run when the user pastes some content in an
element

onpause <audio>, <video> Script to be run when the media is paused either by the
user or programmatically

onplay <audio>, <video> Script to be run when the media has started playing

onplaying <audio>, <video> Script to be run when the media has started playing

onpopstate <body> Script to be run when the window's history changes.

onprogress <audio>, <video> Script to be run when the browser is in the process of
getting the media data

onratechange <audio>, <video> Script to be run each time the playback rate changes (like
when a user switches to a slow motion or fast forward
mode).

onreset <form> Script to be run when a reset button in a form is clicked.

onresize <body> Script to be run when the browser window is being resized.

onscroll All visible elements. Script to be run when an element's scrollbar is being
scrolled

onsearch <input> Script to be run when the user writes something in a


search field (for <input type="search">)

onseeked <audio>, <video> Script to be run when the seeking attribute is set to false
indicating that seeking has ended

onseeking <audio>, <video> Script to be run when the seeking attribute is set to true
indicating that seeking is active

onselect All visible elements. Script to be run when the element gets selected

onstalled <audio>, <video> Script to be run when the browser is unable to fetch the
media data for whatever reason

onstorage <body> Script to be run when a Web Storage area is updated

onsubmit <form> Script to be run when a form is submitted

onsuspend <audio>, <video> Script to be run when fetching the media data is stopped
before it is completely loaded for whatever reason

ontimeupdat <audio>, <video> Script to be run when the playing position has changed
e (like when the user fast forwards to a different point in the
media)

ontoggle <details> Script to be run when the user opens or closes the
<details> element
onunload <body> Script to be run when a page has unloaded (or the browser
window has been closed)

onvolumecha <audio>, <video> Script to be run each time the volume of a video/audio has
nge been changed

onwaiting <audio>, <video> Script to be run when the media has paused but is
expected to resume (like when the media pauses to buffer
more data)

onwheel All visible elements. Script to be run when the mouse wheel rolls up or down
over an element

open <details> Specifies that the details should be visible (open) to the
user

optimum <meter> Specifies what value is the optimal value for the gauge

pattern <input> Specifies a regular expression that an <input> element's


value is checked against

placeholder <input>, <textarea> Specifies a short hint that describes the expected value of
the element

poster <video> Specifies an image to be shown while the video is


downloading, or until the user hits the play button

preload <audio>, <video> Specifies if and how the author thinks the audio/video
should be loaded when the page loads

readonly <input>, <textarea> Specifies that the element is read-only

rel <a>, <area>, <form>, <link> Specifies the relationship between the current document
and the linked document

required <input>, <select>, <textarea> Specifies that the element must be filled out before
submitting the form

reversed <ol> Specifies that the list order should be descending (9,8,7...)

rows <textarea> Specifies the visible number of lines in a text area

rowspan <td>, <th> Specifies the number of rows a table cell should span

sandbox <iframe> Enables an extra set of restrictions for the content in an


<iframe>

scope <th> Specifies whether a header cell is a header for a column,


row, or group of columns or rows

selected <option> Specifies that an option should be pre-selected when the


page loads

shape <area> Specifies the shape of the area

size <input>, <select> Specifies the width, in characters (for <input>) or specifies
the number of visible options (for <select>)

sizes <img>, <link>, <source> Specifies the size of the linked resource

span <col>, <colgroup> Specifies the number of columns to span

spellcheck Global Attributes Specifies whether the element is to have its spelling and
grammar checked or not

src <audio>, <embed>, <iframe>, <img>, <input>, <script>, Specifies the URL of the media file
<source>, <track>, <video>

srcdoc <iframe> Specifies the HTML content of the page to show in the
<iframe>

srclang <track> Specifies the language of the track text data (required if
kind="subtitles")
srcset <img>, <source> Specifies the URL of the image to use in different situations

start <ol> Specifies the start value of an ordered list

step <input> Specifies the legal number intervals for an input field

style Global Attributes Specifies an inline CSS style for an element

tabindex Global Attributes Specifies the tabbing order of an element

target <a>, <area>, <base>, <form> Specifies the target for where to open the linked document
or where to submit the form

title Global Attributes Specifies extra information about an element

translate Global Attributes Specifies whether the content of an element should be


translated or not

type <a>, <button>, <embed>, <input>, <link>, <menu>, <obj Specifies the type of element
ect>, <script>, <source>, <style>

usemap <img>, <object> Specifies an image as a client-side image map

value <button>, <input>, <li>, <option>, <meter>, <progress>, Specifies the value of the element
<param>

width <canvas>, <embed>, <iframe>, <img>, <input>, <object> Specifies the width of the element
, <video>

wrap <textarea> Specifies how the text in a text area is to be wrapped when
submitted in a form

The global attributes are attributes that can be used with all HTML elements.

Attribute Description
accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classnames for an element (refers to a class in a style sheet)

contenteditable Specifies whether the content of an element is editable or not

data-* Used to store custom data private to the page or application

dir Specifies the text direction for the content in an element

draggable Specifies whether an element is draggable or not

hidden Specifies that an element is not yet, or is no longer, relevant

id Specifies a unique id for an element

lang Specifies the language of the element's content

spellcheck Specifies whether the element is to have its spelling and grammar checked or not

style Specifies an inline CSS style for an element

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element should be translated or not

Global Event Attributes


HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on
an element.

To learn more about programming events, please visit our JavaScript tutorial.

Below are the global event attributes that can be added to HTML elements to define event actions.
Window Event Attributes
Events triggered for the window object (applies to the <body> tag):

Attribute Value Description

onafterprint script Script to be run after the document is printed

onbeforeprint script Script to be run before the document is printed

onbeforeunload script Script to be run when the document is about to be unloaded

onerror script Script to be run when an error occurs

onhashchange script Script to be run when there has been changes to the anchor part of the a URL

onload script Fires after the page is finished loading

Onmessage script Script to be run when the message is triggered

onoffline script Script to be run when the browser starts to work offline

ononline script Script to be run when the browser starts to work online

Onpagehide script Script to be run when a user navigates away from a page

onpageshow script Script to be run when a user navigates to a page

Onpopstate script Script to be run when the window's history changes

onresize script Fires when the browser window is resized

Onstorage script Script to be run when a Web Storage area is updated


onunload script Fires once a page has unloaded (or the browser window has been closed)

Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form
elements):

Attribute Value Description

onblur script Fires the moment that the element loses focus

onchange script Fires the moment when the value of the element is changed

oncontextmenu script Script to be run when a context menu is triggered

onfocus script Fires the moment when the element gets focus

oninput script Script to be run when an element gets user input

oninvalid script Script to be run when an element is invalid

onreset script Fires when the Reset button in a form is clicked

onsearch script Fires when the user writes something in a search field (for <input="search">)

onselect script Fires after some text has been selected in an element

onsubmit script Fires when a form is submitted

Keyboard Events
Attribute Value Description

onkeydown script Fires when a user is pressing a key

onkeypress script Fires when a user presses a key

onkeyup script Fires when a user releases a key

Mouse Events
Attribute Value Description

onclick script Fires on a mouse click on the element

ondblclick script Fires on a mouse double-click on the element

onmousedown script Fires when a mouse button is pressed down on an element

onmousemove script Fires when the mouse pointer is moving while it is over an element

onmouseout script Fires when the mouse pointer moves out of an element

onmouseover script Fires when the mouse pointer moves over an element

onmouseup script Fires when a mouse button is released over an element

Onmousewheel script Deprecated. Use the onwheel attribute instead

onwheel script Fires when the mouse wheel rolls up or down over an element

Drag Events
Attribute Value Description

ondrag script Script to be run when an element is dragged


ondragend script Script to be run at the end of a drag operation

ondragenter script Script to be run when an element has been dragged to a valid drop target

ondragleave script Script to be run when an element leaves a valid drop target

ondragover script Script to be run when an element is being dragged over a valid drop target

ondragstart script Script to be run at the start of a drag operation

ondrop script Script to be run when dragged element is being dropped

onscroll script Script to be run when an element's scrollbar is being scrolled

Clipboard Events
Attribute Value Description

oncopy script Fires when the user copies the content of an element

oncut script Fires when the user cuts the content of an element

onpaste script Fires when the user pastes some content in an element

Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like
<audio>, <embed>, <img>, <object>, and <video>).
Tip: Look at our HTML Audio and Video DOM Reference for more information.
Attribute Value Description

Onabort script Script to be run on abort


Oncanplay script Script to be run when a file is ready to start playing (when it has buffered enough to begin)

Oncanplaythrough script Script to be run when a file can be played all the way to the end without pausing for
buffering

Oncuechange script Script to be run when the cue changes in a <track> element

Ondurationchange script Script to be run when the length of the media changes

Onemptied script Script to be run when something bad happens and the file is suddenly unavailable (like
unexpectedly disconnects)

Onended script Script to be run when the media has reach the end (a useful event for messages like
"thanks for listening")

Onerror script Script to be run when an error occurs when the file is being loaded

Onloadeddata script Script to be run when media data is loaded

Onloadedmetadata script Script to be run when meta data (like dimensions and duration) are loaded

Onloadstart script Script to be run just as the file begins to load before anything is actually loaded

Onpause script Script to be run when the media is paused either by the user or programmatically

Onplay script Script to be run when the media is ready to start playing

Onplaying script Script to be run when the media actually has started playing

Onprogress script Script to be run when the browser is in the process of getting the media data

Onratechange script Script to be run each time the playback rate changes (like when a user switches to a slow
motion or fast forward mode)

Onseeked script Script to be run when the seeking attribute is set to false indicating that seeking has ended

Onseeking script Script to be run when the seeking attribute is set to true indicating that seeking is active
Onstalled script Script to be run when the browser is unable to fetch the media data for whatever reason

Onsuspend script Script to be run when fetching the media data is stopped before it is completely loaded for
whatever reason

Ontimeupdate script Script to be run when the playing position has changed (like when the user fast forwards
to a different point in the media)

Onvolumechange script Script to be run each time the volume is changed which (includes setting the volume to
"mute")

Onwaiting script Script to be run when the media has paused but is expected to resume (like when the
media pauses to buffer more data)

Misc Events
Attribute Value Description

ontoggle script Fires when the user opens or closes the <details> element

Color Names Supported by All Browsers


All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the
color as the background-color along with different text colors):

For a full overview of HTML colors, visit our colors tutorial.


AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
DarkBlue
#00008B
DarkCyan
#008B8B
DarkGoldenRod
#B8860B
DarkGray
#A9A9A9
DarkGrey
#A9A9A9
DarkGreen
#006400
DarkKhaki
#BDB76B
DarkMagenta
#8B008B
DarkOliveGreen
#556B2F
DarkOrange
#FF8C00
DarkOrchid
#9932CC
DarkRed
#8B0000
DarkSalmon
#E9967A
DarkSeaGreen
#8FBC8F
DarkSlateBlue
#483D8B
DarkSlateGray
#2F4F4F
DarkSlateGrey
#2F4F4F
DarkTurquoise
#00CED1
DarkViolet
#9400D3
DeepPink
#FF1493
DeepSkyBlue
#00BFFF
DimGray
#696969
DimGrey
#696969
DodgerBlue
#1E90FF
FireBrick
#B22222
FloralWhite
#FFFAF0
ForestGreen
#228B22
Fuchsia
#FF00FF
Gainsboro
#DCDCDC
GhostWhite
#F8F8FF
Gold
#FFD700
GoldenRod
#DAA520
Gray
#808080
Grey
#808080
Green
#008000
GreenYellow
#ADFF2F
HoneyDew
#F0FFF0
HotPink
#FF69B4
IndianRed
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
LavenderBlush
#FFF0F5
LawnGreen
#7CFC00
LemonChiffon
#FFFACD
LightBlue
#ADD8E6
LightCoral
#F08080
LightCyan
#E0FFFF
LightGoldenRodYellow
#FAFAD2
LightGray
#D3D3D3
LightGrey
#D3D3D3
LightGreen
#90EE90
LightPink
#FFB6C1
LightSalmon
#FFA07A
LightSeaGreen
#20B2AA
LightSkyBlue
#87CEFA
LightSlateGray
#778899
LightSlateGrey
#778899
LightSteelBlue
#B0C4DE
LightYellow
#FFFFE0
Lime
#00FF00
LimeGreen
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
Maroon
#800000
MediumAquaMarine
#66CDAA
MediumBlue
#0000CD
MediumOrchid
#BA55D3
MediumPurple
#9370DB
MediumSeaGreen
#3CB371
MediumSlateBlue
#7B68EE
MediumSpringGreen
#00FA9A
MediumTurquoise
#48D1CC
MediumVioletRed
#C71585
MidnightBlue
#191970
MintCream
#F5FFFA
MistyRose
#FFE4E1
Moccasin
#FFE4B5
NavajoWhite
#FFDEAD
Navy
#000080
OldLace
#FDF5E6
Olive
#808000
OliveDrab
#6B8E23
Orange
#FFA500
OrangeRed
#FF4500
Orchid
#DA70D6
PaleGoldenRod
#EEE8AA
PaleGreen
#98FB98
PaleTurquoise
#AFEEEE
PaleVioletRed
#DB7093
PapayaWhip
#FFEFD5
PeachPuff
#FFDAB9
Peru
#CD853F
Pink
#FFC0CB
Plum
#DDA0DD
PowderBlue
#B0E0E6
Purple
#800080
RebeccaPurple
#663399
Red
#FF0000
RosyBrown
#BC8F8F
RoyalBlue
#4169E1
SaddleBrown
#8B4513
Salmon
#FA8072
SandyBrown
#F4A460
SeaGreen
#2E8B57
SeaShell
#FFF5EE
Sienna
#A0522D
Silver
#C0C0C0
SkyBlue
#87CEEB
SlateBlue
#6A5ACD
SlateGray
#708090
SlateGrey
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32

The <canvas> element defines a bitmapped area in an HTML page.

The Canvas API allows JavaScript to draw graphics on the canvas.

The Canvas API can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies,
and other pixel manipulations.

You can add a canvas element anywhere in an HTML page with the <canvas> tag:
Example
<canvas id="myCanvas" width="300" height="150"></canvas>

Try it Yourself »

You can access a <canvas> element with the HTML DOM method getElementById().

To draw in the canvas you need to create a 2D context object:

const myCanvas = document.getElementById("myCanvas");


const ctx = myCanvas.getContext("2d");

Note
The HTML <canvas> element itself has no drawing abilities.

You must use JavaScript to draw any graphics.

The getContext() method returns an object with tools (methods) for drawing.

Drawing on the Canvas


After you have created a 2D context, you can draw on the canvas.

The fillRect() method draws a black rectangle with a top-left corner at position 20,20. The rectangle is 150
pixel wide and 100 pixels high.

Example
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Try it Yourself »

Using Colors
The fillStyle property sets the fill color of the drawing object:

Example
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Try it Yourself »

You can also create a new <canvas> element with the document.createElement() method, and add the
element to an existing HTML page:

Example
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Try it Yourself »

Paths
The common way to draw on the canvas is to:

1. Begin a Path - beginPath()


2. Move to a Point - moveTo()
3. Draw in the Path - lineTo()
4. Draw the Path - stroke()

Example

const canvas = document.getElementById("myCanvas");


const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Try it Yourself »

Complete Canvas API Reference


This reference covers all Properties and Methods of the getContext("2d") Object, used to draw text, lines,
boxes, circles, pictures, and more on the canvas.
Drawing Methods
There are only 3 methods to draw directly on the canvas:
Method Description

fillRect() Draws a "filled" rectangle

strokeRect() Draws a rectangle (with no fill)

clearRect() Clears specified pixels within a rectangle

Path Methods

Method Description

beginPath() Begins a new path or resets the current path

closePath() Adds a line to the path from the current point to the start

isPointInPath() Returns true if the specified point is in the current path

moveTo() Moves the path to a point in the canvas (without drawing)

lineTo() Adds a line to the the path

fill() Fills the current path

rect() Adds a rectangle to the path

stroke() Draws the current path

Circles and Curves

bezierCurveTo() Adds a cubic Bézier curve to the path


arc() Adds an arc/curve (circle, or parts of a circle) to the path

arcTo() Adds an arc/curve between two tangents to the path

quadraticCurveTo() Adds a quadratic Bézier curve to the path

Text
Method/Prop Description

direction Sets or returns the direction used to draw text

fillText() Draws "filled" text on the canvas

font Sets or returns the font properties for text content

measureText() Returns an object that contains the width of the specified text

strokeText() Draws text on the canvas

textAlign Sets or returns the alignment for text content

textBaseline Sets or returns the text baseline used when drawing text

Colors, Styles, and Shadows


Method/Property Description

addColorStop() Specifies the colors and stop positions in a gradient object

createLinearGradient() Creates a linear gradient (to use on canvas content)

createPattern() Repeats a specified element in the specified direction

createRadialGradient() Creates a radial/circular gradient (to use on canvas content)


fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing

lineCap Sets or returns the style of the end caps for a line

lineJoin Sets or returns the type of corner created, when two lines meet

lineWidth Sets or returns the current line width

miterLimit Sets or returns the maximum miter length

shadowBlur Sets or returns the blur level for shadows

shadowColor Sets or returns the color to use for shadows

shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape

shadowOffsetY Sets or returns the vertical distance of the shadow from the shape

strokeStyle Sets or returns the color, gradient, or pattern used for strokes

Transformations
Method Description

scale() Scales the current drawing bigger or smaller

rotate() Rotates the current drawing

translate() Remaps the (0,0) position on the canvas

transform() Replaces the current transformation matrix for the drawing

setTransform() Resets the current transform to the identity matrix. Then runs transform()

Image Drawing
Method Description

drawImage() Draws an image, canvas, or video onto the canvas

The ImageData Object / Pixel Manipulation


Method/Property Description

createImageData() Creates a new, blank ImageData object

getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas

ImageData.data Returns an object that contains image data of a specified ImageData object

ImageData.height Returns the height of an ImageData object

ImageData.width Returns the width of an ImageData object

putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

Compositing
Property Description

globalAlpha Sets or returns the current alpha or transparency value of the drawing

globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

Other Methods
Method Description

clip() Clips a region of any shape and size from the original canvas

save() Saves the state of the current drawing context and all its atributes

restore() Restores the previously saved state and attributes

createEvent()

getContext()

toDataURL()

Standard Properties and Events


The canvas object also supports the standard properties and events.

Related Pages
HTML tutorial: HTML5 Canvas
HTML reference: HTML <canvas> tag

Browser Support
The <canvas> element is an HTML5 standard (2014).
Canvas API is supported in all modern browsers:

HTML Audio and Video DOM Reference


The HTML5 DOM has methods, properties, and events for the <audio> and <video> elements.
HTML Audio/Video Methods
Method Description

addTextTrack() Adds a new text track to the audio/video

canPlayType() Checks if the browser can play the specified audio/video type

load() Re-loads the audio/video element

play() Starts playing the audio/video

pause() Pauses the currently playing audio/video

HTML Audio/Video Properties


Property Description

audioTracks Returns an AudioTrackList object representing available audio tracks

autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded

buffered Returns a TimeRanges object representing the buffered parts of the audio/video

controller Returns the MediaController object representing the current media controller of the
audio/video

controls Sets or returns whether the audio/video should display controls (like play/pause etc.)

crossOrigin Sets or returns the CORS settings of the audio/video

currentSrc Returns the URL of the current audio/video

currentTime Sets or returns the current playback position in the audio/video (in seconds)

defaultMuted Sets or returns whether the audio/video should be muted by default


defaultPlaybackRate Sets or returns the default speed of the audio/video playback

duration Returns the length of the current audio/video (in seconds)

ended Returns whether the playback of the audio/video has ended or not

error Returns a MediaError object representing the error state of the audio/video

loop Sets or returns whether the audio/video should start over again when finished

mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video
elements)

muted Sets or returns whether the audio/video is muted or not

networkState Returns the current network state of the audio/video

paused Returns whether the audio/video is paused or not

playbackRate Sets or returns the speed of the audio/video playback

played Returns a TimeRanges object representing the played parts of the audio/video

preload Sets or returns whether the audio/video should be loaded when the page loads

readyState Returns the current ready state of the audio/video

seekable Returns a TimeRanges object representing the seekable parts of the audio/video

seeking Returns whether the user is currently seeking in the audio/video

src Sets or returns the current source of the audio/video element

startDate Returns a Date object representing the current time offset

textTracks Returns a TextTrackList object representing the available text tracks

videoTracks Deprecated. Do not use it.


volume Sets or returns the volume of the audio/video

HTML Audio/Video Events


Event Description

abort Fires when the loading of an audio/video is aborted

canplay Fires when the browser can start playing the audio/video

canplaythrough Fires when the browser can play through the audio/video without stopping for buffering

durationchange Fires when the duration of the audio/video is changed

emptied Fires when the current playlist is empty

ended Fires when the current playlist is ended

error Fires when an error occurred during the loading of an audio/video

loadeddata Fires when the browser has loaded the current frame of the audio/video

loadedmetadata Fires when the browser has loaded meta data for the audio/video

loadstart Fires when the browser starts looking for the audio/video

pause Fires when the audio/video has been paused

play Fires when the audio/video has been started or is no longer paused

playing Fires when the audio/video is playing after having been paused or stopped for buffering

progress Fires when the browser is downloading the audio/video

ratechange Fires when the playing speed of the audio/video is changed

seeked Fires when the user is finished moving/skipping to a new position in the audio/video
seeking Fires when the user starts moving/skipping to a new position in the audio/video

stalled Fires when the browser is trying to get media data, but data is not available

suspend Fires when the browser is intentionally not getting media data

timeupdate Fires when the current playback position has changed

volumechange Fires when the volume has been changed

waiting Fires when the video stops because it needs to buffer the next frame

Common HTML Character Sets


The default character set in HTML5 is UTF-8.
For a closer look, visit our Complete HTML Character Set Reference.

Number ASCII ANSI 8859-1 UTF-8 Description

32 space

33 ! ! ! ! exclamation mark

34 " " " " quotation mark

35 # # # # number sign

36 $ $ $ $ dollar sign

37 % % % % percent sign

38 & & & & Ampersand

39 ' ' ' ' Apostrophe

40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis

42 * * * * Asterisk

43 + + + + plus sign

44 , , , , Comma

45 - - - - hyphen-minus

46 . . . . full stop

47 / / / / Solidus

48 0 0 0 0 digit zero

49 1 1 1 1 digit one

50 2 2 2 2 digit two

51 3 3 3 3 digit three

52 4 4 4 4 digit four

53 5 5 5 5 digit five

54 6 6 6 6 digit six

55 7 7 7 7 digit seven

56 8 8 8 8 digit eight

57 9 9 9 9 digit nine

58 : : : : Colon

59 ; ; ; ; Semicolon
60 < < < < less-than sign

61 = = = = equals sign

62 > > > > greater-than sign

63 ? ? ? ? question mark

64 @ @ @ @ commercial at

65 A A A A Latin capital letter A

66 B B B B Latin capital letter B

67 C C C C Latin capital letter C

68 D D D D Latin capital letter D

69 E E E E Latin capital letter E

70 F F F F Latin capital letter F

71 G G G G Latin capital letter G

72 H H H H Latin capital letter H

73 I I I I Latin capital letter I

74 J J J J Latin capital letter J

75 K K K K Latin capital letter K

76 L L L L Latin capital letter L

77 M M M M Latin capital letter M

78 N N N N Latin capital letter N


79 O O O O Latin capital letter O

80 P P P P Latin capital letter P

81 Q Q Q Q Latin capital letter Q

82 R R R R Latin capital letter R

83 S S S S Latin capital letter S

84 T T T T Latin capital letter T

85 U U U U Latin capital letter U

86 V V V V Latin capital letter V

87 W W W W Latin capital letter W

88 X X X X Latin capital letter X

89 Y Y Y Y Latin capital letter Y

90 Z Z Z Z Latin capital letter Z

91 [ [ [ [ left square bracket

92 \ \ \ \ reverse solidus

93 ] ] ] ] right square bracket

94 ^ ^ ^ ^ circumflex accent

95 _ _ _ _ low line

96 ` ` ` ` grave accent

97 a a a a Latin small letter a


98 b b b b Latin small letter b

99 c c c c Latin small letter c

100 d d d d Latin small letter d

101 e e e e Latin small letter e

102 f f f f Latin small letter f

103 g g g g Latin small letter g

104 h h h h Latin small letter h

105 i i i i Latin small letter i

106 j j j j Latin small letter j

107 k k k k Latin small letter k

108 l l l l Latin small letter l

109 m m m m Latin small letter m

110 n n n n Latin small letter n

111 o o o o Latin small letter o

112 p p p p Latin small letter p

113 q q q q Latin small letter q

114 r r r r Latin small letter r

115 s s s s Latin small letter s

116 t t t t Latin small letter t


117 u u u u Latin small letter u

118 v v v v Latin small letter v

119 w w w w Latin small letter w

120 x x x x Latin small letter x

121 y y y y Latin small letter y

122 z z z z Latin small letter z

123 { { { { left curly bracket

124 | | | | vertical line

125 } } } } right curly bracket

126 ~ ~ ~ ~ Tilde

127 DEL

128 € euro sign

129    NOT USED

130 ‚ single low-9 quotation mark

131 ƒ Latin small letter f with hook

132 „ double low-9 quotation mark

133 … horizontal ellipsis

134 † Dagger

135 ‡ double dagger


136 ˆ modifier letter circumflex accent

137 ‰ per mille sign

138 Š Latin capital letter S with caron

139 ‹ single left-pointing angle quotation mark

140 ΠLatin capital ligature OE

141    NOT USED

142 Ž Latin capital letter Z with caron

143    NOT USED

144    NOT USED

145 ‘ left single quotation mark

146 ’ right single quotation mark

147 “ left double quotation mark

148 ” right double quotation mark

149 • Bullet

150 – en dash

151 — em dash

152 ˜ small tilde

153 ™ trade mark sign

154 š Latin small letter s with caron


155 › single right-pointing angle quotation mark

156 œ Latin small ligature oe

157    NOT USED

158 ž Latin small letter z with caron

159 Ÿ Latin capital letter Y with diaeresis

160 no-break space

161 ¡ ¡ ¡ inverted exclamation mark

162 ¢ ¢ ¢ cent sign

163 £ £ £ pound sign

164 ¤ ¤ ¤ currency sign

165 ¥ ¥ ¥ yen sign

166 ¦ ¦ ¦ broken bar

167 § § § section sign

168 ¨ ¨ ¨ Diaeresis

169 © © © copyright sign

170 ª ª ª feminine ordinal indicator

171 « « « left-pointing double angle quotation mark

172 ¬ ¬ ¬ not sign

173 soft hyphen


174 ® ® ® registered sign

175 ¯ ¯ ¯ Macron

176 ° ° ° degree sign

177 ± ± ± plus-minus sign

178 ² ² ² superscript two

179 ³ ³ ³ superscript three

180 ´ ´ ´ acute accent

181 µ µ µ micro sign

182 ¶ ¶ ¶ pilcrow sign

183 · · · middle dot

184 ¸ ¸ ¸ Cedilla

185 ¹ ¹ ¹ superscript one

186 º º º masculine ordinal indicator

187 » » » right-pointing double angle quotation mark

188 ¼ ¼ ¼ vulgar fraction one quarter

189 ½ ½ ½ vulgar fraction one half

190 ¾ ¾ ¾ vulgar fraction three quarters

191 ¿ ¿ ¿ inverted question mark

192 À À À Latin capital letter A with grave


193 Á Á Á Latin capital letter A with acute

194 Â Â Â Latin capital letter A with circumflex

195 Ã Ã Ã Latin capital letter A with tilde

196 Ä Ä Ä Latin capital letter A with diaeresis

197 Å Å Å Latin capital letter A with ring above

198 Æ Æ Æ Latin capital letter AE

199 Ç Ç Ç Latin capital letter C with cedilla

200 È È È Latin capital letter E with grave

201 É É É Latin capital letter E with acute

202 Ê Ê Ê Latin capital letter E with circumflex

203 Ë Ë Ë Latin capital letter E with diaeresis

204 Ì Ì Ì Latin capital letter I with grave

205 Í Í Í Latin capital letter I with acute

206 Î Î Î Latin capital letter I with circumflex

207 Ï Ï Ï Latin capital letter I with diaeresis

208 Ð Ð Ð Latin capital letter Eth

209 Ñ Ñ Ñ Latin capital letter N with tilde

210 Ò Ò Ò Latin capital letter O with grave

211 Ó Ó Ó Latin capital letter O with acute


212 Ô Ô Ô Latin capital letter O with circumflex

213 Õ Õ Õ Latin capital letter O with tilde

214 Ö Ö Ö Latin capital letter O with diaeresis

215 × × × multiplication sign

216 Ø Ø Ø Latin capital letter O with stroke

217 Ù Ù Ù Latin capital letter U with grave

218 Ú Ú Ú Latin capital letter U with acute

219 Û Û Û Latin capital letter U with circumflex

220 Ü Ü Ü Latin capital letter U with diaeresis

221 Ý Ý Ý Latin capital letter Y with acute

222 Þ Þ Þ Latin capital letter Thorn

223 ß ß ß Latin small letter sharp s

224 à à à Latin small letter a with grave

225 á á á Latin small letter a with acute

226 â â â Latin small letter a with circumflex

227 ã ã ã Latin small letter a with tilde

228 ä ä ä Latin small letter a with diaeresis

229 å å å Latin small letter a with ring above

230 æ æ æ Latin small letter ae


231 ç ç ç Latin small letter c with cedilla

232 è è è Latin small letter e with grave

233 é é é Latin small letter e with acute

234 ê ê ê Latin small letter e with circumflex

235 ë ë ë Latin small letter e with diaeresis

236 ì ì ì Latin small letter i with grave

237 í í í Latin small letter i with acute

238 î î î Latin small letter i with circumflex

239 ï ï ï Latin small letter i with diaeresis

240 ð ð ð Latin small letter eth

241 ñ ñ ñ Latin small letter n with tilde

242 ò ò ò Latin small letter o with grave

243 ó ó ó Latin small letter o with acute

244 ô ô ô Latin small letter o with circumflex

245 õ õ õ Latin small letter o with tilde

246 ö ö ö Latin small letter o with diaeresis

247 ÷ ÷ ÷ division sign

248 ø ø ø Latin small letter o with stroke

249 ù ù ù Latin small letter u with grave


250 ú ú ú Latin small letter u with acute

251 û û û Latin small letter with circumflex

252 ü ü ü Latin small letter u with diaeresis

253 ý ý ý Latin small letter y with acute

254 þ þ þ Latin small letter thorn

255 ÿ ÿ ÿ Latin small letter y with diaeresis

HTML Error Messages


When a browser requests a service from a web server, an error might occur, and the server might return an error code like "404 Not
Found".
It is common to name these errors HTML error messages.
But these messages are something called HTTP status messages. In fact, the server always returns a message for every request. The most
common message is 200 OK.
Below is a list of HTTP status messages that might be returned:

1xx: Information
Message: Description:

100 Continue The server has received the request headers, and the client should proceed to send the
request body

101 Switching Protocols The requester has asked the server to switch protocols

103 Early Hints Used with the Link header to allow the browser to start preloading resources while the
server prepares a response
2xx: Successful
Message: Description:

200 OK The request is OK (this is the standard response for successful HTTP requests)

201 Created The request has been fulfilled, and a new resource is created

202 Accepted The request has been accepted for processing, but the processing has not
been completed

203 Non-Authoritative Information The request has been successfully processed, but is returning information
that may be from another source

204 No Content The request has been successfully processed, but is not returning any content

205 Reset Content The request has been successfully processed, but is not returning any
content, and requires that the requester reset the document view

206 Partial Content The server is delivering only part of the resource due to a range header sent
by the client

3xx: Redirection
Message: Description:

300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five
addresses

301 Moved Permanently The requested page has moved to a new URL

302 Found The requested page has moved temporarily to a new URL
303 See Other The requested page can be found under a different URL

304 Not Modified Indicates the requested page has not been modified since last requested

307 Temporary Redirect The requested page has moved temporarily to a new URL

308 Permanent Redirect The requested page has moved permanently to a new URL

4xx: Client Error


Message: Description:

400 Bad Request The request cannot be fulfilled due to bad syntax

401 Unauthorized The request was a legal request, but the server is refusing to respond to it.
For use when authentication is possible but has failed or not yet been
provided

402 Payment Required Reserved for future use

403 Forbidden The request was a legal request, but the server is refusing to respond to it

404 Not Found The requested page could not be found but may be available again in the
future

405 Method Not Allowed A request was made of a page using a request method not supported by that
page

406 Not Acceptable The server can only generate a response that is not accepted by the client

407 Proxy Authentication Required The client must first authenticate itself with the proxy

408 Request Timeout The server timed out waiting for the request

409 Conflict The request could not be completed because of a conflict in the request

410 Gone The requested page is no longer available


411 Length Required The "Content-Length" is not defined. The server will not accept the request
without it

412 Precondition Failed The precondition given in the request evaluated to false by the server

413 Request Too Large The server will not accept the request, because the request entity is too large

414 Request-URI Too Long The server will not accept the request, because the URI is too long. Occurs
when you convert a POST request to a GET request with a long query
information

415 Unsupported Media Type The server will not accept the request, because the media type is not
supported

416 Range Not Satisfiable The client has asked for a portion of the file, but the server cannot supply that
portion

417 Expectation Failed The server cannot meet the requirements of the Expect request-header field

5xx: Server Error


Message: Description:

500 Internal Server Error A generic error message, given when no more specific message is suitable

501 Not Implemented The server either does not recognize the request method, or it lacks the
ability to fulfill the request

502 Bad Gateway The server was acting as a gateway or proxy and received an invalid response
from the upstream server

503 Service Unavailable The server is currently unavailable (overloaded or down)

504 Gateway Timeout The server was acting as a gateway or proxy and did not receive a timely
response from the upstream server

505 HTTP Version Not Supported The server does not support the HTTP protocol version used in the request
511 Network Authentication Required The client needs to authenticate to gain network access

What is HTTP?
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.
Example: A client (browser) sends an HTTP request to the server; then the server returns a response to the client. The response contains
status information about the request and may also contain the requested content.

HTTP Methods
 GET
 POST
 PUT
 HEAD
 DELETE
 PATCH
 OPTIONS
 CONNECT
 TRACE
The two most common HTTP methods are: GET and POST.

The GET Method


GET is used to request data from a specified resource.
Note that the query string (name/value pairs) is sent in the URL of a GET request:
/test/demo_form.php?name1=value1&name2=value2
Some notes on GET requests:
 GET requests can be cached
 GET requests remain in the browser history
 GET requests can be bookmarked
 GET requests should never be used when dealing with sensitive data
 GET requests have length restrictions
 GET requests are only used to request data (not modify)

The POST Method


POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the HTTP request:
POST /test/demo_form.php HTTP/1.1
Host: w3schools.com

name1=value1&name2=value2
Some notes on POST requests:
 POST requests are never cached
 POST requests do not remain in the browser history
 POST requests cannot be bookmarked
 POST requests have no restrictions on data length

Compare GET vs. POST


The following table compares the two HTTP methods: GET and POST.
GET POST

BACK button/Reload Harmless Data will be re-submitted (the browser


should alert the user that the data are
about to be re-submitted)

Bookmarked Can be bookmarked Cannot be bookmarked

Cached Can be cached Not cached

Encoding type application/x-www-form-urlencoded application/x-www-form-urlencoded or


multipart/form-data. Use multipart
encoding for binary data

History Parameters remain in browser history Parameters are not saved in browser
history

Restrictions on data length Yes, when sending data, the GET method adds the data to No restrictions
the URL; and the length of a URL is limited (maximum URL
length is 2048 characters)
Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also allowed

Security GET is less secure compared to POST because data sent is POST is a little safer than GET because the
part of the URL parameters are not stored in browser
history or in web server logs
Never use GET when sending passwords or other sensitive
information!

Visibility Data is visible to everyone in the URL Data is not displayed in the URL

The PUT Method


PUT is used to send data to a server to create/update a resource.
The difference between POST and PUT is that PUT requests are idempotent. That is, calling the same PUT request multiple times will
always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple
times.

The HEAD Method


HEAD is almost identical to GET, but without the response body.
In other words, if GET /users returns a list of users, then HEAD /users will make the same request but will not return the list of users.
HEAD requests are useful for checking what a GET request will return before actually making a GET request - like before downloading a
large file or response body.

The DELETE Method


The DELETE method deletes the specified resource.

The PATCH Method


The PATCH method is used to apply partial modifications to a resource.

The OPTIONS Method


The OPTIONS method describes the communication options for the target resource.
The CONNECT Method
The CONNECT method is used to start a two-way communications (a tunnel) with the requested resource.

The TRACE Method


The TRACE method is used to perform a message loop-back test that tests the path for the target resource (useful for debugging
purposes).

Pixel to Em Converter
The tool below allows you to work out the em sizes from pixels (or vice versa).
 Set a default pixel size for body (usually 16px)
 Then, convert a pixel value to em, based on the default pixel size
 Or, convert an em value to pixels, based on the default pixel size
Set a default pixel size: 16px
px
800px

Convert PX to EM:
px
Convert EM to PX:
em
Convert

Result: 50em
Body Font Size
In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table.
Tip: The default font size is usually 16px.
Px em percent

5px 0.3125em 31.25%

6px 0.3750em 37.50%

7px 0.4375em 43.75%

8px 0.5000em 50.00%

9px 0.5625em 56.25%

10px 0.6250em 62.50%

11px 0.6875em 68.75%

12px 0.7500em 75.00%

13px 0.8125em 81.25%

14px 0.8750em 87.50%

15px 0.9375em 93.75%

16px 1.0000em 100.00%

17px 1.0625em 106.25%

18px 1.1250em 112.50%

19px 1.1875em 118.75%

20px 1.2500em 125.00%

21px 1.3125em 131.25%


22px 1.3750em 137.50%

23px 1.4375em 143.75%

24px 1.5000em 150.00%

25px 1.5625em 156.25%


What is the difference between PX, EM and Percent?
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the
text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

Keyboard Shortcuts For Windows and Mac


Keyboard shortcuts are often used in modern operating systems and computer software programs.
Learning and using keyboard shortcuts can save you a lot of time.

Basic Shortcuts
Description Windows Mac OS

Edit menu Alt + E Ctrl + F2 + F

File menu Alt + F Ctrl + F2 + E

View menu Alt + V Ctrl + F2 + V

Select all text Ctrl + A Cmd + A

Copy text Ctrl + C Cmd + C

Find text Ctrl + F Cmd + F

Find and replace text Ctrl + H Cmd + F

New Document Ctrl + N Cmd + N


Open a file Ctrl + O Cmd + O

Print options Ctrl + P Cmd + P

Save file Ctrl + S Cmd + S

Paste text Ctrl + V Cmd + V

Cut text Ctrl + X Cmd + X

Redo text Ctrl + Y Shift + Cmd + Z

Undo text Ctrl + Z Cmd + Z

Text Editing
Description Windows Mac OS

Cursor Movement

Go to the right or to the beginning of next line break Right Arrow Right Arrow

Go to the left or to the end of previous line break Left Arrow Left Arrow

Go up one row Up Arrow Up Arrow

Go down one row Down Arrow Down Arrow

Go to the beginning of the current line Home Cmd + Left Arrow

Go to the end of the current line End Cmd + Right Arrow

Go to the beginning of the document Ctrl + Home Cmd + Up Arrow

Go to the end of the document Ctrl + End Cmd + Down Arrow

Move up one frame Page Up Fn + Up Arrow


Move down one frame Page Down Fn + Down Arrow

Go to beginning of previous word Ctrl + Left Arrow Option + Left Arrow

Go to beginning of next word Ctrl + Right Arrow Option + Right Arrow

Go to beginning of line break Ctrl + Up Arrow Cmd + Left Arrow

Go to end of line break Ctrl + Down Arrow Cmd + Right Arrow

Text Selection

Select characters to the left Shift + Left Arrow Shift + Left Arrow

Select characters to the right Shift + Right Arrow Shift + Right Arrow

Select lines upwards Shift + Up Arrow Shift + Up Arrow

Select lines downwards Shift + Down Arrow Shift + Down Arrow

Select words to the left Shift + Ctrl + Left Shift + Opt + Left

Select words to the right Shift + Ctrl + Right Shift + Opt + Right

Select paragraphs to the left Shift + Ctrl + Up Shift + Opt + Up

Select paragraphs to the right Shift + Ctrl + Down Shift + Opt + Down

Select text between the cursor and the beginning of Shift + Home Cmd + Shift + Left Arrow
the current line

Select text between the cursor and the end of the Shift + End Cmd + Shift + Right Arrow
current line

Select text between the cursor and the beginning of Shift + Ctrl + Home Cmd + Shift + Up Arrow or Cmd + Shift + Fn +
the document Left Arrow
Select text between the cursor and the end of the Shift + Ctrl + End Cmd + Shift + Down Arrow or Cmd + Shift + Fn +
document Right Arrow

Select one frame at a time of text above the cursor Shift + Page Up Shift + Fn + Up Arrow

Select one frame at a time of text below the cursor Shift + Page Down Shift + Fn + Down Arrow

Select all text Ctrl + A Cmd + A

Find text Ctrl + F Cmd + F

Text Formatting

Make selected text bold Ctrl + B Cmd + B

Make selected text italic Ctrl + I Cmd + I

Underline selected text Ctrl + U Cmd + U

Make selected text superscript Ctrl + Shift + = Cmd + Shift + =

Make selected text subscript Ctrl + = Cmd + =

Text Editing

Delete characters to the left Backspace Backspace

Delete characters to the right Delete Fn + Backspace

Delete words to the right Ctrl + Del Cmd + Backspace

Delete words to the left Ctrl + Backspace Cmd + Fn + Backspace

Indent Tab Tab


Outdent Shift + Tab Shift + Tab

Copy text Ctrl + C Cmd + C

Find and replace text Ctrl + H Cmd + F

Paste text Ctrl + V Cmd + V

Cut text Ctrl + X Cmd + X

Redo text Ctrl + Y Shift + Cmd + Z

Undo text Ctrl + Z Cmd + Z

Web Browsers
Description Windows Mac OS

Navigation

Scroll down a frame Space or Page Down Space or Fn + Down


Arrow

Scroll up a frame Shift + Space or Page Shift + Space or Fn +


Up Up Arrow

Go to bottom of the page End Cmd + Down Arrow

Go to top of the page Home Cmd + Up Arrow

Go back Alt + Left Arrow or Cmd + Left Arrow


Backspace

Go forward Alt + Right Arrow or Cmd + Right Arrow


Shift + Backspace

Refresh a webpage F5 Cmd + R


Refresh a webpage (no cache) Ctrl + F5 Cmd + Shift + R

Stop Esc Esc

Toggle full-screen F11 Cmd + Shift + F

Zoom in Ctrl + + Cmd + +

Zoom out Ctrl + - Cmd + -

Zoom 100% (default) Ctrl + 0 Cmd + 0

Open homepage Alt + Home Option + Home or


Option + Fn + Left
Arrow

Find text Ctrl + F Cmd + F

Tab / Window Management

Open a new tab Ctrl + T Cmd + T

Close current tab Ctrl + W Cmd + W

Close all tabs Ctrl + Shift + W Cmd + Q

Close all tabs except the current tab Ctrl + Alt + F4 Cmd + Opt + W

Go to next tab Ctrl + Tab Control + Tab or Cmd +


Shift + Right Arrow

Go to previous tab Ctrl + Shift + Tab Shift + Control + Tab or


Cmd + Shift + Left
Arrow

Go to a specific tab number Ctrl + 1-8 Cmd + 1-8


Go to the last tab Ctrl + 9 Cmd + 9

Reopen the last closed tab Ctrl + Shift + T Cmd + Shift + T

Open a new window Ctrl + N Cmd + N

Close current window Alt + F4 Cmd + W

Go to next window Alt + Tab Cmd + Tab

Go to previous window Alt + Shift + Tab Cmd + Shift + Tab

Reopen the last closed window Ctrl + Shift + N

Open links in a new tab in the background Ctrl + Click Cmd + Click

Open links in a new tab in the foreground Ctrl + Shift + Click Cmd + Shift + Click

Print current webpage Ctrl + P Cmd + P

Save current webpage Ctrl + S Cmd + S

Address Bar

Cycle between toolbar, search bar, and page elements Tab Tab

Go to browser's address bar Ctrl + L or Alt + D Cmd + L

Focus and select the browser's search bar Ctrl + E Cmd + E / Cmd + K

Open the address bar location in a new tab Alt + Enter Opt + Enter

Display a list of previously typed addresses F4

Add "www." to the beginning and ".com" to the end of the text typed in the Ctrl + Enter Cmd + Enter or Control
address bar (e.g., type "w3schools" and press Ctrl + Enter to open + Enter
"www.w3schools.com")

Bookmarks

Open the bookmarks menu Ctrl + B Cmd + B

Add bookmark for current page Ctrl + D Cmd + Opt + B or Cmd


+ Shift + B

Open browsing history Ctrl + H Cmd + Shift + H or Cmd


+Y

Open download history Ctrl + J Cmd + J or Cmd + Shift


+J

Screenshots
Description Windows Mac OS

Save screenshot of the whole screen as file Cmd + Shift + 3

Copy screenshot of the whole screen to the clipboard PrtScr (Print Screen) or Ctrl + Cmd + Ctrl + Shift + 3
PrtScr

Save screenshot of window as file Cmd + Shift + 4, then Space

Copy screenshot of window to the clipboard Alt + PrtScr Cmd + Ctrl + Shift + 4, then
Space

Copy screenshot of wanted area to the clipboard Cmd + Ctrl + Shift + 4

Save screenshot of wanted area as file Cmd + Shift + 4


Note: Due to different keyboard setups, some shortcuts may not be compatible for all users.
CSS REFERENCE
CSS PROPERTIES
A
accent-color Specifies an accent color for user-interface controls

align-content Specifies the alignment between the lines inside a flexible container when the items do not
use all available space

align-items Specifies the alignment for items inside a flexible container

align-self Specifies the alignment for selected items inside a flexible container

all Resets all properties (except unicode-bidi and direction)

animation A shorthand property for all the animation-* properties


animation-delay Specifies a delay for the start of an animation

animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles

animation-duration Specifies how long an animation should take to complete one cycle

animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it
ends, or both)

animation-iteration-count Specifies the number of times an animation should be played

animation-name Specifies a name for the @keyframes animation

animation-play-state Specifies whether the animation is running or paused

animation-timing-function Specifies the speed curve of an animation

aspect-ratio Specifies preferred aspect ratio of an element

B
backdrop-filter Defines a graphical effect to the area behind an element

backface-visibility Defines whether or not the back face of an element should be visible when facing the user

background A shorthand property for all the background-* properties

background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed

background-blend-mode Specifies the blending mode of each background layer (color/image)

background-clip Defines how far the background (color or image) should extend within an element

background-color Specifies the background color of an element

background-image Specifies one or more background images for an element

background-origin Specifies the origin position of a background image


background-position Specifies the position of a background image

background-position-x Specifies the position of a background image on x-axis

background-position-y Specifies the position of a background image on y-axis

background-repeat Sets if/how a background image will be repeated

background-size Specifies the size of the background images

block-size Specifies the size of an element in block direction

border A shorthand property for border-width, border-style and border-color

border-block A shorthand property for border-block-width, border-block-style and border-block-color

border-block-color Sets the color of the borders at start and end in the block direction

border-block-end A shorthand property for border-block-end-width, border-block-end-style and border-block-


end-color

border-block-end-color Sets the color of the border at the end in the block direction

border-block-end-style Sets the style of the border at the end in the block direction

border-block-end-width Sets the width of the border at the end in the block direction

border-block-start A shorthand property for border-block-start-width, border-block-start-style and border-


block-start-color

border-block-start-color Sets the color of the border at the start in the block direction

border-block-start-style Sets the style of the border at the start in the block direction

border-block-start-width Sets the width of the border at the start in the block direction

border-block-style Sets the style of the borders at start and end in the block direction
border-block-width Sets the width of the borders at start and end in the block direction

border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-


color

border-bottom-color Sets the color of the bottom border

border-bottom-left-radius Defines the radius of the border of the bottom-left corner

border-bottom-right-radius Defines the radius of the border of the bottom-right corner

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-collapse Sets whether table borders should collapse into a single border or be separated

border-color Sets the color of the four borders

border-end-end-radius Sets the radius of the corner between the block-end and the inline-end sides of the
element

border-end-start-radius Sets the radius of the corner between the block-end and the inline-start sides of the
element

border-image A shorthand property for all the border-image-* properties

border-image-outset Specifies the amount by which the border image area extends beyond the border box

border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

border-image-slice Specifies how to slice the border image

border-image-source Specifies the path to the image to be used as a border

border-image-width Specifies the width of the border image

border-inline A shorthand property for border-inline-width, border-inline-style and border-inline-color


border-inline-color Sets the color of the borders at start and end in the inline direction

border-inline-end-color Sets the color of the border at the end in the inline direction

border-inline-end-style Sets the style of the border at the end in the inline direction

border-inline-end-width Sets the width of the border at the end in the inline direction

border-inline-start-color Sets the color of the border at the start in the inline direction

border-inline-start-style Sets the style of the border at the start in the inline direction

border-inline-start-width Sets the width of the border at the start in the inline direction

border-inline-style Sets the style of the borders at start and end in the inline direction

border-inline-width Sets the width of the borders at start and end in the inline direction

border-left A shorthand property for all the border-left-* properties

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius A shorthand property for the four border-*-radius properties

border-right A shorthand property for all the border-right-* properties

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-spacing Sets the distance between the borders of adjacent cells

border-start-end-radius Sets the radius of the corner between the block-start and the inline-end sides of the
element

border-start-start-radius Sets the radius of the corner between the block-start and the inline-start sides of the
element

border-style Sets the style of the four borders

border-top A shorthand property for border-top-width, border-top-style and border-top-color

border-top-color Sets the color of the top border

border-top-left-radius Defines the radius of the border of the top-left corner

border-top-right-radius Defines the radius of the border of the top-right corner

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

bottom Sets the elements position, from the bottom of its parent element

box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line
elements, at line-break.

box-reflect The box-reflect property is used to create a reflection of an element.

box-shadow Attaches one or more shadows to an element

box-sizing Defines how the width and height of an element are calculated: should they include
padding and borders, or not

break-after Specifies whether or not a page-, column-, or region-break should occur after the specified
element

break-before Specifies whether or not a page-, column-, or region-break should occur before the
specified element
break-inside Specifies whether or not a page-, column-, or region-break should occur inside the specified
element

C
caption-side Specifies the placement of a table caption

caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable

@charset Specifies the character encoding used in the style sheet

clear Specifies what should happen with the element that is next to a floating element

clip Clips an absolutely positioned element

color Sets the color of text

column-count Specifies the number of columns an element should be divided into

column-fill Specifies how to fill columns, balanced or not

column-gap Specifies the gap between the columns

column-rule A shorthand property for all the column-rule-* properties

column-rule-color Specifies the color of the rule between columns

column-rule-style Specifies the style of the rule between columns

column-rule-width Specifies the width of the rule between columns

column-span Specifies how many columns an element should span across

column-width Specifies the column width

columns A shorthand property for column-width and column-count

content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increases or decreases the value of one or more CSS counters

counter-reset Creates or resets one or more CSS counters

cursor Specifies the mouse cursor to be displayed when pointing over an element

D
direction Specifies the text direction/writing direction

display Specifies how a certain HTML element should be displayed

E
empty-cells Specifies whether or not to display borders and background on empty cells in a table

F
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed

flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

flex-basis Specifies the initial length of a flexible item

flex-direction Specifies the direction of the flexible items

flex-flow A shorthand property for the flex-direction and the flex-wrap properties

flex-grow Specifies how much the item will grow relative to the rest

flex-shrink Specifies how the item will shrink relative to the rest

flex-wrap Specifies whether the flexible items should wrap or not

float Specifies whether an element should float to the left, right, or not at all

font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-
family properties

@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts

font-family Specifies the font family for text

font-feature-settings Allows control over advanced typographic features in OpenType fonts

@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in
OpenType

font-kerning Controls the usage of the kerning information (how letters are spaced)

font-language-override Controls the usage of language-specific glyphs in a typeface

font-size Specifies the font size of text

font-size-adjust Preserves the readability of text when font fallback occurs

font-stretch Selects a normal, condensed, or expanded face from a font family

font-style Specifies the font style for text

font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values

font-variant-caps Controls the usage of alternate glyphs for capital letters

font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)

font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to

font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers

font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the
baseline of the font

font-weight Specifies the weight of a font

G
gap A shorthand property for the row-gap and the column-gap properties

grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-


auto-rows, grid-auto-columns, and the grid-auto-flow properties

grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-
start, grid-column-start, grid-row-end, and grid-column-end properties

grid-auto-columns Specifies a default column size

grid-auto-flow Specifies how auto-placed items are inserted in the grid

grid-auto-rows Specifies a default row size

grid-column A shorthand property for the grid-column-start and the grid-column-end properties

grid-column-end Specifies where to end the grid item

grid-column-gap Specifies the size of the gap between columns

grid-column-start Specifies where to start the grid item

grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties

grid-row A shorthand property for the grid-row-start and the grid-row-end properties

grid-row-end Specifies where to end the grid item

grid-row-gap Specifies the size of the gap between rows

grid-row-start Specifies where to start the grid item


grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties

grid-template-areas Specifies how to display columns and rows, using named grid items

grid-template-columns Specifies the size of the columns, and how many columns in a grid layout

grid-template-rows Specifies the size of the rows in a grid layout

H
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box

height Sets the height of an element

hyphens Sets how to split words to improve the layout of paragraphs

I
image-rendering Specifies the type of algorithm to use for image scaling

@import Allows you to import a style sheet into another style sheet

inline-size Specifies the size of an element in the inline direction

inset Specifies the distance between an element and the parent element

inset-block Specifies the distance between an element and the parent element in the block direction

inset-block-end Specifies the distance between the end of an element and the parent element in the block
direction

inset-block-start Specifies the distance between the start of an element and the parent element in the block
direction

inset-inline Specifies the distance between an element and the parent element in the inline direction

inset-inline-end Specifies the distance between the end of an element and the parent element in the inline
direction
inset-inline-start Specifies the distance between the start of an element and the parent element in the inline
direction

isolation Defines whether an element must create a new stacking content

J
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all
available space

justify-items Is set on the grid container. Specifies the alignment of grid items in the inline direction

justify-self Is set on the grid item. Specifies the alignment of the grid item in the inline direction

K
@keyframes Specifies the animation code

L
left Specifies the left position of a positioned element

letter-spacing Increases or decreases the space between characters in a text

line-break Specifies how/if to break lines

line-height Sets the line height

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-position Specifies the position of the list-item markers (bullet points)

list-style-type Specifies the type of list-item marker

M
margin Sets all the margin properties in one declaration

margin-block Specifies the margin in the block direction

margin-block-end Specifies the margin at the end in the block direction

margin-block-start Specifies the margin at the start in the block direction

margin-bottom Sets the bottom margin of an element

margin-inline Specifies the margin in the inline direction

margin-inline-end Specifies the margin at the end in the inline direction

margin-inline-start Specifies the margin at the start in the inline direction

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

mask Hides parts of an element by masking or clipping an image at specific places

mask-clip Specifies the mask area

mask-composite Represents a compositing operation used on the current mask layer with the mask layers below it

mask-image Specifies an image to be used as a mask layer for an element

mask-mode Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask

mask-origin Specifies the origin position (the mask position area) of a mask layer image

mask-position Sets the starting position of a mask layer image (relative to the mask position area)

mask-repeat Specifies how the mask layer image is repeated

mask-size Specifies the size of a mask layer image


mask-type Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

@media Sets the style rules for different media types/devices/sizes

max-block-size Sets the maximum size of an element in the block direction

max-inline-size Sets the maximum size of an element in the inline direction

min-block-size Sets the minimum size of an element in the block direction

min-inline-size Sets the minimum size of an element in the inline direction

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

mix-blend-mode Specifies how an element's content should blend with its direct parent background

O
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used
height and width

object-position Specifies the alignment of the replaced element inside its box

offset Is a shorthand, and specifies how to animate an element along a path

offset-anchor Specifies a point on an element that is fixed to the path it is animated along

offset-distance Specifies the position along a path where an animated element is placed

offset-path Specifies the path an element is animated along

offset-rotate Specifies rotation of an element as it is animated along a path


opacity Sets the opacity level for an element

order Sets the order of the flexible item, relative to the rest

orphans Sets the minimum number of lines that must be left at the bottom of a page or column

outline A shorthand property for the outline-width, outline-style, and the outline-color properties

outline-color Sets the color of an outline

outline-offset Offsets an outline, and draws it beyond the border edge

outline-style Sets the style of an outline

outline-width Sets the width of an outline

overflow Specifies what happens if content overflows an element's box

overflow-anchor Specifies whether or not content in viewable area in a scrollable contianer should be pushed down when
new content is loaded above

overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow the container

overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content
area

overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's
content area

overscroll-behavior Specifies whether to have scroll chaining or overscroll affordance in x- and y-directions

overscroll-behavior- Specifies whether to have scroll chaining or overscroll affordance in the block direction
block

overscroll-behavior- Specifies whether to have scroll chaining or overscroll affordance in the inline direction
inline

overscroll-behavior-x Specifies whether to have scroll chaining or overscroll affordance in x-direction


overscroll-behavior-y Specifies whether to have scroll chaining or overscroll affordance in y-directions

P
padding A shorthand property for all the padding-* properties

padding-block Specifies the padding in the block direction

padding-block-end Specifies the padding at the end in the block direction

padding-block-start Specifies the padding at the start in the block direction

padding-bottom Sets the bottom padding of an element

padding-inline Specifies the padding in the inline direction

padding-inline-end Specifies the padding at the end in the inline direction

padding-inline-start Specifies the padding at the start in the inline direction

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element

page-break-after Sets the page-break behavior after an element

page-break-before Sets the page-break behavior before an element

page-break-inside Sets the page-break behavior inside an element

paint-order Sets the order of how an SVG element or text is painted.

perspective Gives a 3D-positioned element some perspective

perspective-origin Defines at which position the user is looking at the 3D-positioned element
place-content Specifies align-content and justify-content property values for flexbox and grid layouts

place-items Specifies align-items and justify-items property values for grid layouts

place-self Specifies align-self and justify-self property values for grid layouts

pointer-events Defines whether or not an element reacts to pointer events

position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

Q
quotes Sets the type of quotation marks for embedded quotations

R
resize Defines if (and how) an element is resizable by the user

right Specifies the right position of a positioned element

rotate Specifies the rotation of an element

row-gap Specifies the gap between the grid rows

S
scale Specifies the size of an element by scaling up or down

scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a
straight jump

scroll-margin Specifies the margin between the snap position and the container

scroll-margin-block Specifies the margin between the snap position and the container in the block direction

scroll-margin-block-end Specifies the end margin between the snap position and the container in the block
direction
scroll-margin-block-start Specifies the start margin between the snap position and the container in the block
direction

scroll-margin-bottom Specifies the margin between the snap position on the bottom side and the container

scroll-margin-inline Specifies the margin between the snap position and the container in the inline direction

scroll-margin-inline-end Specifies the end margin between the snap position and the container in the inline
direction

scroll-margin-inline-start Specifies the start margin between the snap position and the container in the inline
direction

scroll-margin-left Specifies the margin between the snap position on the left side and the container

scroll-margin-right Specifies the margin between the snap position on the right side and the container

scroll-margin-top Specifies the margin between the snap position on the top side and the container

scroll-padding Specifies the distance from the container to the snap position on the child elements

scroll-padding-block Specifies the distance in block direction from the container to the snap position on the child
elements

scroll-padding-block-end Specifies the distance in block direction from the end of the container to the snap position
on the child elements

scroll-padding-block-start Specifies the distance in block direction from the start of the container to the snap position
on the child elements

scroll-padding-bottom Specifies the distance from the bottom of the container to the snap position on the child
elements

scroll-padding-inline Specifies the distance in inline direction from the container to the snap position on the
child elements

scroll-padding-inline-end Specifies the distance in inline direction from the end of the container to the snap position
on the child elements
scroll-padding-inline-start Specifies the distance in inline direction from the start of the container to the snap position
on the child elements

scroll-padding-left Specifies the distance from the left side of the container to the snap position on the child
elements

scroll-padding-right Specifies the distance from the right side of the container to the snap position on the child
elements

scroll-padding-top Specifies the distance from the top of the container to the snap position on the child
elements

scroll-snap-align Specifies where to position elements when the user stops scrolling

scroll-snap-stop Specifies scroll behaviour after fast swipe on trackpad or touch screen

scroll-snap-type Specifies how snap behaviour should be when scrolling

scrollbar-color Specifies the color of the scrollbar of an element

T
tab-size Specifies the width of a tab character

table-layout Defines the algorithm used to lay out table cells, rows, and columns

text-align Specifies the horizontal alignment of text

text-align-last Describes how the last line of a block or a line right before a forced line break is aligned
when text-align is "justify"

text-combine-upright Specifies the combination of multiple characters into the space of a single character

text-decoration Specifies the decoration added to text

text-decoration-color Specifies the color of the text-decoration

text-decoration-line Specifies the type of line in a text-decoration


text-decoration-style Specifies the style of the line in a text decoration

text-decoration-thickness Specifies the thickness of the decoration line

text-emphasis Applies emphasis marks to text

text-indent Specifies the indentation of the first line in a text-block

text-justify Specifies the justification method used when text-align is "justify"

text-orientation Defines the orientation of characters in a line

text-overflow Specifies what should happen when text overflows the containing element

text-shadow Adds shadow to text

text-transform Controls the capitalization of text

text-underline-position Specifies the position of the underline which is set using the text-decoration property

top Specifies the top position of a positioned element

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space

transition A shorthand property for all the transition-* properties

transition-delay Specifies when the transition effect will start

transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete

transition-property Specifies the name of the CSS property the transition effect is for

transition-timing-function Specifies the speed curve of the transition effect

translate Specifies the position of an element


U
unicode-bidi Used together with the direction property to set or return whether the text should be
overridden to support multiple languages in the same document

user-select Specifies whether the text of an element can be selected

V
vertical-align Sets the vertical alignment of an element

visibility Specifies whether or not an element is visible

W
white-space Specifies how white-space inside an element is handled

widows Sets the minimum number of lines that must be left at the top of a page or column

width Sets the width of an element

word-break Specifies how words should break when reaching the end of a line

word-spacing Increases or decreases the space between words in a text

word-wrap Allows long, unbreakable words to be broken and wrap to the next line

writing-mode Specifies whether lines of text are laid out horizontally or vertically

Z
z-index Sets the stack order of a positioned element

CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
Use our CSS Selector Tester to demonstrate the different selectors.
Selector Example Example description

.class .intro Selects all elements with class="intro"

.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element
with name1

#id #firstname Selects the element with id="firstname"

* * Selects all elements

element p Selects all <p> elements

element.class p.intro Selects all <p> elements with class="intro"

element,element div, p Selects all <div> elements and all <p> elements

element element div p Selects all <p> elements inside <div> elements

element>element div > p Selects all <p> elements where the parent is a <div> element

element+element div + p Selects the first <p> element that is placed immediately after <div> elements

element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element

[attribute] [target] Selects all elements with a target attribute

[attribute=value] [target="_blank"] Selects all elements with target="_blank"

[attribute~=value] [title~="flower"] Selects all elements with a title attribute containing the word "flower"

[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value equal to "en" or starting with
"en-"

[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"

[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring
"w3schools"

:active a:active Selects the active link

::after p::after Insert something after the content of each <p> element

::before p::before Insert something before the content of each <p> element

:checked input:checked Selects every checked <input> element

:default input:default Selects the default <input> element

:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no children (including text nodes)

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> element that is the first child of its parent

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent

:focus input:focus Selects the input element which has focus

:fullscreen :fullscreen Selects the element that is in full-screen mode

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects input elements with a value within a specified range

:indeterminate input:indeterminate Selects input elements that are in an indeterminate state

:invalid input:invalid Selects all input elements with an invalid value


:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)

:last-child p:last-child Selects every <p> element that is the last child of its parent

:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent

:link a:link Selects all unvisited links

::marker ::marker Selects the markers of list items

:not(selector) :not(p) Selects every element that is not a <p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting
from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent,
counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent

:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent

:only-child p:only-child Selects every <p> element that is the only child of its parent

:optional input:optional Selects input elements with no "required" attribute

:out-of-range input:out-of-range Selects input elements with a value outside a specified range

::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified

:read-only input:read-only Selects input elements with the "readonly" attribute specified

:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified

:required input:required Selects input elements with the "required" attribute specified

:root :root Selects the document's root element


::selection ::selection Selects the portion of an element that is selected by a user

:target #news:target Selects the current active #news element (clicked on a URL containing that
anchor name)

:valid input:valid Selects all input elements with a valid value

:visited a:visited Selects all visited links

CSS Functions
CSS functions are used as a value for various CSS properties.
Function Description

attr() Returns the value of an attribute of the selected element

calc() Allows you to perform calculations to determine CSS property values

conic-gradient() Creates a conic gradient

counter() Returns the current value of the named counter

cubic-bezier() Defines a Cubic Bezier curve

hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)

hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)

linear-gradient() Creates a linear gradient

max() Uses the largest value, from a comma-separated list of values, as the property value

min() Uses the smallest value, from a comma-separated list of values, as the property value

radial-gradient() Creates a radial gradient

repeating-conic-gradient() Repeats a conic gradient


repeating-linear-gradient() Repeats a linear gradient

repeating-radial-gradient() Repeats a radial gradient

rgb() Defines colors using the Red-Green-Blue model (RGB)

rgba() Defines colors using the Red-Green-Blue-Alpha model (RGBA)

var() Inserts the value of a custom property

Best Web Safe Fonts for HTML and CSS


The following fonts are the best web safe fonts for HTML and CSS:

 Arial (sans-serif)
 Verdana (sans-serif)
 Tahoma (sans-serif)
 Trebuchet MS (sans-serif)
 Times New Roman (serif)
 Georgia (serif)
 Garamond (serif)
 Courier New (monospace)
 Brush Script MT (cursive)

Note: Before you publish your website, always check how your fonts appear on different browsers and devices,
and always use fallback fonts!

Commonly Used Fallback Fonts


There are no 100% completely web safe fonts. There is always a chance that a font is not found or is not
installed properly. Therefore, it is very important to always use fallback fonts.
This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does
not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic
font family name.

Below are some commonly used fallback fonts, organized by the 5 generic font families:

 Serif
 Sans-serif
 Monospace
 Cursive
 Fantasy

Definition and Usage


Some CSS properties are animatable, meaning that they can be used in animations and transitions.

Animatable properties can change gradually from one value to another, like size, numbers, percentage and
color.

Animatable Properties
These properties are animatable in CSS:

Property

aspect-ratioTry it

backgroundTry it

background-colorTry it

background-positionTry it

background-position-xTry it
background-position-yTry it

background-sizeTry it

block-sizeTry it

borderTry it

border-bottomTry it

border-bottom-colorTry it

border-end-end-radiusTry it

border-end-start-radiusTry it

border-blockTry it

border-block-colorTry it

border-block-end-colorTry it

border-block-end-widthTry it

border-block-start-colorTry it

border-block-start-widthTry it

border-block-widthTry it

border-bottom-left-radiusTry it

border-bottom-right-radiusTry it

border-inlineTry it

border-inline-colorTry it

border-inline-end-colorTry it
border-inline-end-widthTry it

border-inline-start-colorTry it

border-inline-start-widthTry it

border-inline-widthTry it

border-start-end-radiusTry it

border-start-start-radiusTry it

border-bottom-widthTry it

border-colorTry it

border-leftTry it

border-left-colorTry it

border-left-widthTry it

border-rightTry it

border-right-colorTry it

border-right-widthTry it

border-spacingTry it

border-topTry it

border-top-colorTry it

border-top-left-radiusTry it

border-top-right-radiusTry it

border-top-widthTry it
bottomTry it

box-shadowTry it

clipTry it

colorTry it

column-countTry it

column-gapTry it

column-ruleTry it

column-rule-colorTry it

column-rule-widthTry it

column-widthTry it

columnsTry it

filterTry it

flexTry it

flex-basisTry it

flex-growTry it

flex-shrinkTry it

fontTry it

font-sizeTry it

font-size-adjust

font-stretch
font-weightTry it

gridTry it

grid-areaTry it

grid-auto-columnsTry it

grid-auto-flowTry it

grid-auto-rowsTry it

grid-columnTry it

grid-column-endTry it

grid-column-gapTry it

grid-column-startTry it

grid-gapTry it

grid-rowTry it

grid-row-endTry it

grid-row-gapTry it

grid-row-startTry it

grid-templateTry it

grid-template-areasTry it

grid-template-columnsTry it

grid-template-rowsTry it

heightTry it
inline-sizeTry it

insetTry it

inset-blockTry it

inset-block-endTry it

inset-block-startTry it

inset-inlineTry it

inset-inline-endTry it

inset-inline-startTry it

leftTry it

letter-spacingTry it

line-heightTry it

marginTry it

margin-blockTry it

margin-block-endTry it

margin-block-startTry it

margin-bottomTry it

margin-inlineTry it

margin-inline-endTry it

margin-inline-startTry it

margin-leftTry it
margin-rightTry it

margin-topTry it

max-heightTry it

max-widthTry it

max-block-sizeTry it

max-inline-sizeTry it

min-block-sizeTry it

min-inline-sizeTry it

min-heightTry it

min-widthTry it

object-positionTry it

offset-anchorTry it

offset-distanceTry it

offset-pathTry it

offset-rotateTry it

opacityTry it

orderTry it

outlineTry it

outline-colorTry it

outline-offsetTry it
outline-widthTry it

paddingTry it

padding-blockTry it

padding-block-endTry it

padding-block-startTry it

padding-bottomTry it

padding-inlineTry it

padding-inline-endTry it

padding-inline-startTry it

padding-leftTry it

padding-rightTry it

padding-topTry it

perspectiveTry it

perspective-originTry it

rightTry it

rotateTry it

scaleTry it

text-decoration-colorTry it

text-indentTry it

text-shadowTry it
topTry it

transformTry it

transform-originTry it

translateTry it

vertical-align

visibility

width

word-spacingTry it

z-index

You might also like