Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

Web Development HTML and Css Cheatsheet

Uploaded by

Mark Allen Gabuay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Web Development HTML and Css Cheatsheet

Uploaded by

Mark Allen Gabuay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

WEB DEVELOPMENT (HTML AND CSS) CHEATSHEET

HTML5 ELEMENTS AND ATTRIBUTES


HTML ELEMENT DESCRIPTION ATTRIBUTES

Defines the document type (HTML5


<!DOCTYPE> N/A
declaration)

<html> Root of an HTML document lang, manifest

<head> Container for metadata N/A

<title> Defines the document title N/A

<meta> Metadata about the document charset, name, content, http-equiv

Links to external resources


<link> href, rel, type, sizes, media
(e.g., CSS files)

<script> Defines client-side JavaScript src, type, async, defer

<style> Defines internal CSS styles type, media

<body> Defines the document's body onload, onunload

Defines a header for a document


<header> N/A
or section

<nav> Defines navigation links N/A

<section> Defines a section in a document N/A

Defines independent, self-


<article> N/A
contained content

Defines content aside from the


<aside> N/A
main content

Defines a footer for a document


<footer> N/A
or section

<h1> to <h6> Defines HTML headings id, class, style

<p> Defines a paragraph id, class, style

Defines a thematic change in the


<hr> N/A
content

<br> Inserts a single line break N/A

<pre> Defines preformatted text N/A

<ul> Defines an unordered list type

<ol> Defines an ordered list type, start, reversed

<li> Defines a list item value


HTML ELEMENT DESCRIPTION ATTRIBUTES

<dl> Defines a description list N/A

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

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

<figure> Specifies self-contained content N/A

Defines a caption for a <figure>


<figcaption> N/A
element

<div> Defines a division or section id, class, style

href, target, rel, download,


<a> Defines a hyperlink
hreflang, type

<em> Defines emphasized text N/A

<strong> Defines important text N/A

<small> Defines smaller text N/A

Defines text that is no longer


<s> N/A
correct

<cite> Defines the title of a work N/A

<q> Defines a short quotation cite

<dfn> Defines a definition term N/A

Defines an abbreviation or
<abbr> title
acronym

Links content with a machine-


<data> value
readable translation

<time> Defines a date/time datetime

<code> Defines a piece of computer code N/A

<var> Defines a variable N/A

Defines sample output from a


<samp> N/A
computer program

<kbd> Defines keyboard input N/A

<sub> Defines subscripted text N/A

<sup> Defines superscripted text N/A

<i> Defines italic text N/A

<b> Defines bold text N/A

<u> Defines underlined text N/A


HTML ELEMENT DESCRIPTION ATTRIBUTES

<mark> Defines marked/highlighted text N/A

Defines a ruby annotation (for


<ruby> N/A
East Asian typography)

Defines an
<rt> explanation/pronunciation of N/A
characters

Defines what to show in browsers


<rp> that do not support ruby N/A
annotations

Isolates a part of text that


<bdi> might be formatted in a N/A
different direction

Overrides the current text


<bdo> dir
direction

<span> Defines a section in a document id, class, style

<wbr> Defines a possible line-break N/A

<ins> Defines inserted text cite, datetime

<del> Defines deleted text cite, datetime

src, alt, width, height, srcset,


<img> Embeds an image
sizes, crossorigin

src, height, width, name, sandbox,


<iframe> Defines an inline frame
allow

<embed> Embeds external content src, type, width, height

<object> Defines an embedded object data, type, width, height

<param> Defines parameters for an object name, value

src, controls, autoplay, loop,


<video> Embeds video content
muted, poster, width, height

src, controls, autoplay, loop,


<audio> Embeds sound content
muted

Defines media resources for


<source> src, type, media
media elements

Defines text tracks for media


<track> kind, src, srclang, label, default
elements

<canvas> Defines graphics width, height

<map> Defines an image map name

Defines an area inside an image


<area> alt, coords, href, shape, target
map
HTML ELEMENT DESCRIPTION ATTRIBUTES

<svg> Defines vector-based graphics Various SVG-specific attributes

<math> Defines mathematical expressions N/A

<table> Defines a table N/A

<caption> Defines a table caption N/A

Specifies a group of one or more


<colgroup> span
columns

Specifies column properties


<col> span
within a <colgroup>

Groups the body content in a


<tbody> N/A
table

Groups the header content in a


<thead> N/A
table

Groups the footer content in a


<tfoot> N/A
table

<tr> Defines a row in a table N/A

<td> Defines a cell in a table colspan, rowspan, headers

<th> Defines a header cell in a table colspan, rowspan, headers, scope

Defines an HTML form for user action, method, name, autocomplete,


<form>
input novalidate, target

Groups related elements in a


<fieldset> disabled, form, name
form

Defines a caption for a


<legend> N/A
<fieldset>

Defines a label for an <input>


<label> for, form
element

type, name, value, placeholder,


required, disabled, checked,
<input> Defines an input control readonly, maxlength, min, max,
step, pattern, multiple, size,
autocomplete, autofocus, form, list

<button> Defines a clickable button type, name, value, disabled, form

name, multiple, required, size,


<select> Defines a drop-down list
disabled, form

Specifies a list of pre-defined


<datalist> id
options

Defines a group of related


<optgroup> label, disabled
options in a drop-down list
HTML ELEMENT DESCRIPTION ATTRIBUTES

Defines an option in a drop-down


<option> value, selected, disabled, label
list

name, rows, cols, placeholder,


Defines a multi-line text input
<textarea> required, maxlength, readonly,
control
disabled, wrap, form

Represents the result of a


<output> for, form, name
calculation

Represents the completion


<progress> value, max
progress of a task

Defines a scalar measurement


<meter> value, min, max, low, high, optimum
within a known range

Defines additional details that


<details> open
the user can view or hide

Defines a visible heading for a


<summary> N/A
<details> element

<dialog> Defines a dialog box or window open

Defines a template for content


<template> N/A
not displayed immediately

Placeholder inside a web


<slot> name
component
CSS SELECTORS
SELECTOR DESCRIPTION

* Selects all elements

#id Selects an element with the specific id

.class Selects all elements with the specific class

element Selects all instances of an element

element, element Selects all specified elements

element element Selects descendants of a specific element

element > element Selects direct child elements

element + element Selects the next sibling element

element ~ element Selects siblings after an element

[attribute] Selects elements with a specific attribute

[attribute=value] Selects elements with a specific attribute value

[attribute^=value] Selects elements whose attribute value starts with a value

[attribute$=value] Selects elements whose attribute value ends with a value

[attribute*=value] Selects elements whose attribute value contains a value

:active Selects the active link

:hover Selects an element when you mouse over it

:focus Selects an element when it has focus

:first-child Selects the first child of its parent

:last-child Selects the last child of its parent

:nth-child(n) Selects the nth child of its parent

:nth-last-child(n) Selects the nth child from the end

:only-child Selects an element that is the only child

:empty Selects elements that have no children

:not(selector) Selects elements not matching selector

::before Inserts content before element content

::after Inserts content after element content

::first-letter Selects the first letter of an element

::first-line Selects the first line of an element

:checked Selects checked input elements


SELECTOR DESCRIPTION

:disabled Selects disabled input elements

:enabled Selects enabled input elements

CSS3 PROPERTIES AND VALUES


PROPERTY DESCRIPTION VALUES

align-content Specifies the alignment of flexible flex-start, flex-end, center,


container's content space-between, space-around,
stretch

align-items Aligns flex items along the cross axis stretch, flex-start, flex-end,
center, baseline

align-self Aligns a flex item individually auto, flex-start, flex-end,


center, baseline, stretch

all Resets all properties except direction initial, inherit, unset


and unicode-bidi

animation Shorthand for animation properties name, duration, timing-function,


delay, iteration-count,
direction, fill-mode, play-state

animation- Specifies the delay before the animation time


delay starts

animation- Defines whether an animation should play normal, reverse, alternate,


direction in reverse on alternate cycles alternate-reverse

animation- Specifies how long an animation takes to time


duration complete one cycle

animation- Specifies how a CSS animation applies none, forwards, backwards, both
fill-mode styles to its target before/after
execution

animation- Specifies the number of times the number, infinite


iteration- animation is played
count

animation- Specifies the name of the @keyframes keyframe-name, none


name animation

animation- Specifies whether the animation is paused, running


play-state running or paused

animation- Specifies the speed curve of the ease, linear, ease-in, ease-out,
timing- animation ease-in-out, step-start, step-
function end, steps(), cubic-bezier()

backface- Defines whether or not the "back" side visible, hidden


visibility of a transformed element is visible

background Shorthand for background properties color, image, position, size,


repeat, origin, clip, attachment

background- Specifies whether the background image scroll, fixed, local


attachment is fixed or scrolls with the page
PROPERTY DESCRIPTION VALUES

background- Specifies the blending mode of the normal, multiply, screen,


blend-mode background image overlay, darken, lighten, etc.

background- Specifies the painting area of the border-box, padding-box, content-


clip background box

background- Specifies the background color color, transparent


color

background- Specifies the background image url(), none, linear-gradient(),


image radial-gradient()

background- Specifies the positioning area of the border-box, padding-box, content-


origin background image box

background- Specifies the starting position of the top, left, center, right, bottom,
position background image x% y%, xpx ypx

background- Specifies if/how the background image repeat, repeat-x, repeat-y, no-
repeat repeats repeat, space, round

background- Specifies the size of the background auto, cover, contain, length,
size image percentage

border Shorthand for border-width, border- border-width border-style border-


style, and border-color color

border-bottom Shorthand for border-bottom-width, border-width, border-style,


border-bottom-style, and border-bottom- border-color
color

border- Specifies the color of the bottom border color


bottom-color

border- Defines the radius of the border's length, %


bottom-left- bottom-left corner
radius

border- Defines the radius of the border's length, %


bottom-right- bottom-right corner
radius

border- Defines the style of the bottom border none, solid, dashed, dotted,
bottom-style double, groove, ridge, inset,
outset

border- Defines the width of the bottom border thin, medium, thick, length
bottom-width

border- Specifies whether table borders are collapse, separate


collapse collapsed or separated

border-color Specifies the color of the border color

border-image Shorthand for border-image-source, border-image-source, border-


border-image-slice, border-image-width, image-slice, border-image-width,
border-image-outset, border-image-repeat border-image-outset, border-
image-repeat

border-image- Specifies the amount by which the border length, number


outset image area extends beyond the border box
PROPERTY DESCRIPTION VALUES

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

border-image- Specifies how to slice the border image number, percentage, fill
slice

border-image- Specifies the image to use as the border url(), none


source

border-image- Specifies the width of the border image length, percentage, auto
width

border-left Shorthand for border-left-width, border- border-width, border-style,


left-style, and border-left-color border-color

border-left- Specifies the color of the left border color


color

border-left- Specifies the style of the left border none, solid, dashed, dotted,
style double, groove, ridge, inset,
outset

border-left- Specifies the width of the left border thin, medium, thick, length
width

border-radius Shorthand for all four border-radius length, %


properties

border-right Shorthand for border-right-width, border-width, border-style,


border-right-style, and border-right- border-color
color

border-right- Specifies the color of the right border color


color

border-right- Specifies the style of the right border none, solid, dashed, dotted,
style double, groove, ridge, inset,
outset

border-right- Specifies the width of the right border thin, medium, thick, length
width

border- Specifies the space between the borders length


spacing of adjacent table cells

border-style Specifies the style of the border none, solid, dashed, dotted,
double, groove, ridge, inset,
outset

border-top Shorthand for border-top-width, border- border-width, border-style,


top-style, and border-top-color border-color

border-top- Specifies the color of the top border color


color

border-top- Defines the radius of the border's top- length, %


left-radius left corner

border-top- Defines the radius of the border's top- length, %


right-radius right corner
PROPERTY DESCRIPTION VALUES

border-top- Specifies the style of the top border none, solid, dashed, dotted,
style double, groove, ridge, inset,
outset

border-top- Specifies the width of the top border thin, medium, thick, length
width

border-width Specifies the width of the border thin, medium, thick, length

bottom Specifies the bottom position of a length, auto, %


positioned element

box- Specifies how the background, padding, slice, clone


decoration- border, border-radius, and box-shadow of
break an element is applied when the element
is broken into multiple lines, columns,
or pages

box-shadow Adds shadow to an element h-offset v-offset blur spread


color, inset

box-sizing Defines how the width and height of an content-box, border-box


element are calculated (including
padding and borders or excluding them)

break-after Specifies how page, column, or region auto, always, avoid, left, right,
breaks behave after the generated box page, column, region

break-before Specifies how page, column, or region auto, always, avoid, left, right,
breaks behave before the generated box page, column, region

break-inside Specifies how page, column, or region auto, avoid, avoid-page, avoid-
breaks behave inside the generated box column, avoid-region

caption-side Specifies the placement of a table top, bottom


caption

caret-color Specifies the color of the cursor color, auto


(caret)

clear Specifies the placement of an element none, left, right, both


relative to floated elements

clip Defines a visible portion of an element shape, auto

clip-path Specifies a clipping path for an element url(), none, circle(), ellipse(),
polygon()

color Specifies the color of text color

column-count Specifies the number of columns in a number, auto


multi-column layout

column-fill Balances or fills columns auto, balance, balance-all

column-gap Specifies the gap between columns length, %, normal

column-rule Shorthand for setting all column rule column-rule-width column-rule-


properties style column-rule-color
PROPERTY DESCRIPTION VALUES

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


color columns

column-rule- Specifies the style of the rule between none, solid, dashed, dotted,
style columns double, groove, ridge, inset,
outset

column-rule- Specifies the width of the rule between length, thin, medium, thick
width columns

column-span Specifies how many columns an element none, all


should span

column-width Specifies the width of columns length, auto

columns Shorthand for setting column-width and column-width column-count


column-count

content Inserts generated content string, url(), counter(), attr(),


open-quote, close-quote, no-open-
quote, no-close-quote

counter- Increments one or more counters none, identifier, integer


increment

counter-reset Resets one or more counters none, identifier, integer

cursor Specifies the type of cursor to be auto, default, pointer,


displayed crosshair, move, text, wait,
help, not-allowed, etc.

direction Specifies the text direction ltr, rtl

display Specifies how an element is displayed none, inline, block, flex,


inline-block, inline-flex,
inline-grid, grid, table, etc.

empty-cells Shows or hides borders around empty show, hide


table cells

filter Applies graphical effects like blur or none, blur(), brightness(),


color shift contrast(), drop-shadow(),
grayscale(), hue-rotate(),
invert(), opacity(), saturate(),
sepia()

flex Shorthand for setting the flexible flex-grow flex-shrink flex-basis


item's grow, shrink, and basis
properties

flex-basis Specifies the initial length of a flex auto, length, %


item

flex- Specifies the direction of the flexible row, row-reverse, column, column-
direction items reverse

flex-flow Shorthand for flex-direction and flex- flex-direction flex-wrap


wrap

flex-grow Specifies how much a flex item will grow number


relative to the rest
PROPERTY DESCRIPTION VALUES

flex-shrink Specifies how much a flex item will number


shrink relative to the rest

flex-wrap Specifies whether flex items should wrap nowrap, wrap, wrap-reverse
or not

float Specifies whether an element should none, left, right


float

font Shorthand for font-style, font-variant, font-style font-variant font-


font-weight, font-size/line-height, and weight font-size/line-height
font-family font-family

font-family Specifies the font family for text family-name, generic-family

font-size Specifies the font size length, percentage, xx-small, x-


small, small, medium, large, x-
large, xx-large

font-size- Preserves the readability of text when none, number


adjust font fallback occurs

font-stretch Selects a normal, condensed, or expanded ultra-condensed, extra-condensed,


face from a font condensed, semi-condensed,
normal, semi-expanded, expanded,
extra-expanded, ultra-expanded

font-style Specifies the font style normal, italic, oblique, oblique


angle

font-variant Specifies whether or not a text should normal, small-caps


be displayed in a small-caps font

font-weight Specifies the weight (boldness) of the normal, bold, bolder, lighter,
font 100 to 900

gap Specifies the gaps between columns/rows length, %, normal


in grid and flex containers

grid Shorthand for grid-template-rows, grid- grid-template-rows grid-template-


template-columns, grid-template-areas, columns grid-template-areas grid-
grid-auto-rows, grid-auto-columns, and auto-rows grid-auto-columns grid-
grid-auto-flow auto-flow

grid-area Specifies a grid item’s size and grid-row-start, grid-column-


location start, grid-row-end, grid-column-
end

grid-auto- Specifies the size of auto-generated auto, length, %


columns columns

grid-auto- Controls how the auto-placement row, column, dense, row dense,
flow algorithm works column dense

grid-auto- Specifies the size of auto-generated auto, length, %


rows rows

grid-column Shorthand for grid-column-start and grid-column-start grid-column-end


grid-column-end
PROPERTY DESCRIPTION VALUES

grid-column- Specifies where to end the grid item auto, span, number, line-name
end

grid-column- Specifies where to start the grid item auto, span, number, line-name
start

grid-row Shorthand for grid-row-start and grid- grid-row-start grid-row-end


row-end

grid-row-end Specifies where to end the grid item auto, span, number, line-name

grid-row- Specifies where to start the grid item auto, span, number, line-name
start

You might also like