All CSS Simple Selectors

Selector Example Example description

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

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

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

* * Selects all elements

element p Selects all <p> elements

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

Transparency
div {
background-color: green;
opacity: 0.3;
}

CSS background-attachment
Specify that the background image should be fixed:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Specify that the background image should scroll with the rest of the page:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;}

When using the shorthand property the order of the property values is:

 background-color

 background-image

 background-repeat

 background-attachment

 background-position

 All CSS Background Properties

Property Description

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with t

background-clip Specifies the painting area of the background

background-color Sets the background color of an element

background-image Sets the background image for an element

background-origin Specifies where the background image(s) is/are positione

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

 background-size Specifies the size of the background image(s)

CSS Border Style

Example
Demonstration of the different border styles:

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

All CSS Border Properties

Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

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

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

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

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

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 Sets all the four border-*-radius properties for rounded corners

border-right Sets all the right border properties in one declaration

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-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

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

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

All CSS Margin Properties

Property Description

margin A shorthand property for setting all the margin properties in one decla

margin-bottom Sets the bottom margin of an element

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

All CSS Padding Properties

Property Description

padding A shorthand property for setting all the padding propertie

padding-bottom Sets the bottom padding of an element

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

All CSS Dimension Properties

Property Description

height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

All CSS Outline Properties

Property Description

outline A shorthand property for setting outline-width, outline-style, and outlin

outline-color Sets the color of an outline

outline-offset Specifies the space between an outline and the edge or border of an e

outline-style Sets the style of an outline

outline-width Sets the width of an outline

The CSS Text Alignment/Direction

Properties
Property Description

direction Specifies the text direction/writing direction

text-align Specifies the horizontal alignment of text

text-align-last Specifies how to align the last line of a text

unicode-bidi Used together with the direction property to set or return

overridden to support multiple languages in the same doc

vertical-align Sets the vertical alignment of an element

text-decoration Sets all the text-decoration properties in one declaration

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

text-decoration-line Specifies the kind of text decoration to be used (underline

text-decoration-style Specifies the style of the text decoration (solid, dotted, et

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

The CSS Text Transformation Property

Property Description

text-transform Controls the capitalization of text

The CSS Text Color Property

Property Description

color Specifies the color of text

The CSS Text Spacing Properties

Property Description

letter-spacing Specifies the space between characters in a text

line-height Specifies the line height

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

white-space Specifies how to handle white-space inside an element

 word-spacing Specifies the space between words in a text

ll CSS Font Properties

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

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

font-weight Specifies the weight of a font

Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in
the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>

Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial.

Note: No downloading or installation is required!

Example
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonym
ous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>

<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Result:

Styling Links
a {
color: hotpink;
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited

 a:hover - a link when the user mouses over it

 a:active - a link the moment it is clicked

 Example
 /* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
 color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

 This example demonstrates the different types of cursors (can be useful for links):

 <span style="cursor: auto">auto</span><br>

<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

All CSS List Properties

Property Description

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

CSS Table Properties

Property Description

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed

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

caption-side Specifies the placement of a table caption

empty-cells Specifies whether or not to display borders and background on empty

table-layout Sets the layout algorithm to be used for a table

CSS Display/Visibility Properties

Property Description

display Specifies how an element should be displayed

visibility Specifies whether or not an element should be visible

All CSS Positioning Properties

Property Description

bottom Sets the bottom margin edge for a positioned box

clip Clips an absolutely positioned element

left Sets the left margin edge for a positioned box

position Specifies the type of positioning for an element

right Sets the right margin edge for a positioned box

top Sets the top margin edge for a positioned box

CSS Property
Property Description

z-index Sets the stack order of an element

All CSS Overflow Properties

Property Description

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

overflow-wrap Specifies whether or not the browser can break lines with long wo
container
overflow-x Specifies what to do with the left/right edges of the content if it ov
area

overflow-y Specifies what to do with the top/bottom edges of the content if it

content area

All CSS Combinator Selectors

Selector Example Example description

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> e

element+element div + p Selects the first <p> element that are placed immediat

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

All CSS Pseudo Classes

Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element

:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no child

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first

:first-of-type p:first-of-type Selects every <p> element that is the first <

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a value withi

:invalid input:invalid Selects all <input> elements with an invalid

:lang(language) p:lang(it) Selects every <p> element with a lang attrib

:last-child p:last-child Selects every <p> elements that is the last c

:last-of-type p:last-of-type Selects every <p> element that is the last <

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p> elem

:nth-child(n) p:nth-child(2) Selects every <p> element that is the secon

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the secon
from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the secon

counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the secon

:only-of-type p:only-of-type Selects every <p> element that is the only <

:only-child p:only-child Selects every <p> element that is the only c

:optional input:optional Selects <input> elements with no "required"

:out-of-range input:out-of-range Selects <input> elements with a value outsi

:read-only input:read-only Selects <input> elements with a "readonly"

:read-write input:read-write Selects <input> elements with no "readonly

:required input:required Selects <input> elements with a "required"

:root root Selects the document's root element

:target #news:target Selects the current active #news element (c

that anchor name)
 :valid input:valid Selects all <input> elements with a valid val

:visited a:visited Selects all visited links

All CSS Pseudo Elements

Selector Example Example description

::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::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

::marker ::marker Selects the markers of list items

::selection p::selection Selects the portion of an element that is sele

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the
opacity on mouse-over:

Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}

All CSS Attribute Selectors

Selector Example Example description

[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 that contains
of which is "flower"

[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value starting

[attribute^=value] a[href^="https"] Selects all <a> elements with a href attribute value sta

[attribute$=value] a[href$=".pdf"] Selects all <a> elements with a href attribute value en

[attribute*=value] a[href*="w3schools"] Selects all <a> elements with a href attribute value co

CSS Counter Properties

Property Description

content Used with the ::before and ::after pseudo-elements, to insert generate

counter-increment Increments one or more counter values

counter-reset Creates or resets one or more counters

counter() Returns the current value of the named counter

CSS Rounded Corners Properties

Property Description

border-radius A shorthand property for setting all the four border-*-*-rad

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

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

border-bottom-right-radius Defines the shape of the border of the bottom-right corne

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

CSS Border Image Properties

Property Description

border-image A shorthand property for setting all the border-image-* pr

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

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

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

border-image-outset Specifies the amount by which the border image area ext

border-image-repeat Specifies whether the border image should be repeated, r

CSS Advanced Background Properties

Property Description

background A shorthand property for setting all the background properti

background-clip Specifies the painting area of the background

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

background-origin Specifies where the background image(s) is/are positioned

background-size Specifies the size of the background image(s)

CSS Gradient Functions

The following table lists the CSS gradient functions:

Function Description

conic-gradient() Creates a conic gradient. Define at least two colors (around a

 linear-gradient() Creates a linear gradient. Define at least two colors (top to bo

radial-gradient() Creates a radial gradient. Define at least two colors (center to

repeating-conic-gradient() Repeats a conic gradient

repeating-linear-gradient() Repeats a linear gradient

repeating-radial-gradient() Repeats a radial gradient

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description

box-shadow Adds one or more shadows to an element

text-shadow Adds one or more shadows to a text

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Property Description

text-justify Specifies how justified text should be aligned and spaced

 text-overflow Specifies how overflowed content that is not displayed shou

word-break Specifies line breaking rules for non-CJK scripts

word-wrap Allows long words to be able to be broken and wrap onto the

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

CSS Transform Properties

The following table lists all the 2D transform properties:

Property Description

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

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

CSS 2D Transform Methods

Function Description

matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values

translate(x,y) Defines a 2D translation, moving the element along the X- and the

translateX(n) Defines a 2D translation, moving the element along the X-axis

 translateY(n) Defines a 2D translation, moving the element along the Y-axis

scale(x,y) Defines a 2D scale transformation, changing the elements width a

scaleX(n) Defines a 2D scale transformation, changing the element's width

scaleY(n) Defines a 2D scale transformation, changing the element's height

rotate(angle) Defines a 2D rotation, the angle is specified in the parameter

skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis

skewX(angle) Defines a 2D skew transformation along the X-axis

skewY(angle) Defines a 2D skew transformation along the Y-axis

CSS Transform Properties

The following table lists all the 3D transform properties:

Property Description

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

perspective Specifies the perspective on how 3D elements are viewed

perspective-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible when not facin

CSS 3D Transform Methods

Function Description

matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 value

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z) Defines a 3D translation

translateX(x) Defines a 3D translation, using only the value for the X-axis

translateY(y) Defines a 3D translation, using only the value for the Y-axis

translateZ(z) Defines a 3D translation, using only the value for the Z-axis

scale3d(x,y,z) Defines a 3D scale transformation

scaleX(x) Defines a 3D scale transformation by giving a value for the X

scaleY(y) Defines a 3D scale transformation by giving a value for the Y

scaleZ(z) Defines a 3D scale transformation by giving a value for the Z

 rotate3d(x,y,z,angle) Defines a 3D rotation

rotateX(angle) Defines a 3D rotation along the X-axis

rotateY(angle) Defines a 3D rotation along the Y-axis

rotateZ(angle) Defines a 3D rotation along the Z-axis

perspective(n) Defines a perspective view for a 3D transformed element

CSS Transition Properties

The following table lists all the CSS transition properties:

Property Description

transition A shorthand property for setting the four transition properties in

transition-delay Specifies a delay (in seconds) for the transition effect

transition-duration Specifies how many seconds or milliseconds a transition effect t

transition-property Specifies the name of the CSS property the transition effect is fo
 transition-timing-function Specifies the speed curve of the transition effect

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

Property Description

@keyframes Specifies the animation code

animation A shorthand property for setting 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,

cycles

animation-duration Specifies how long time an animation should take to comple

animation-fill-mode Specifies a style for the element when the animation is not p
it ends, or both)

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

animation-name Specifies the name of the @keyframes animation

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

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

CSS Masking Properties
The following table lists all the CSS masking properties:

Property Description

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 luminan

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

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

mask-repeat Specifies how the mask layer image is repeated

mask-size Specifies the size of a mask layer image

CSS Multi-columns Properties

The following table lists all the multi-columns properties:

Property Description

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

column-fill Specifies how to fill columns

 column-gap Specifies the gap between the columns

column-rule A shorthand property for setting all the column-rule-* proper

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 a suggested, optimal width for the columns

columns A shorthand property for setting column-width and column-c

CSS User Interface Properties

The following table lists all the user interface properties:

Property Description

outline-offset Adds space between an outline and the edge or border of an

resize Specifies whether or not an element is resizable by the user