CSS

Operators

,

Adds another selector
Adds another value to a property

.

Class selector

#

ID selector

:

Pseudo-class selector
Applies value to property or variable

::

Pseudo-element selector

{}

Creates a block

[]

Attribute selector

--

Declares CSS variable

@

Delcares a CSS rule

Combinators

A simple space, descendant selector; elects all tags of a certain type that are descendants of another tag of a certain type

>

Child selector; elects all tags of a certain type that are child of another tag of a certain type

+

Adjacent sibling selector; elects all tags of a certain type that is directly after another tag of a certain type

~

General sibling selector; elects all tags of a certain type that are next to another tag of a certain type

Units

px

Pixels

cm

Centimeters

%

Unit relative to parent element

vw

Unit relative to width of viewport

vh

Unit relative to height of viewport

em

Unit relative to the element's font size

Rules

!important

@keyframes

Denotes that an object's style will change over the course of an animation

@import

Imports a foreign stylesheet

@charset

Specifies stylesheet charset

@media

Changes style based on the device (screen size, device size, screen orientation etc)

Selectors

tag

Applies CSS to all HTML elements of a certain tag

tag {
}

id

Applies CSS to all HTML elements with a specific ID

#id {
}

tag#id {
}

class

Applies CSS to all HTML elements apart of a specific class

.class {
}

tag.class {
}

pseudoclass

Applies CSS to all HTML elements under a specific condition that is denoted in the pseudo-class

:pseudoclass {
}

tag:pseudoclass {
}

pseudoelement

Applies CSS to all HTML elements of a certain type that is denoted in the pseudo-element

::pseudoclass {
}

tag::pseudoclass {
}

Functions

calc()

Allows for mathematical calculations

min()

Returns the smallest size of the parameters entered

max()

Returns the largest size of the parameters entered

rgb()

Returns RGB color from three integers

rgba()

Returns RGBA color from three integers

var()

Inserts a variable as a value

Psuedo-classes

hover

Case where mouse hovers over an HTML object

lang

Case where HTML object is of the same language in the parameter

:lang(ita) {
}

nth-child

Case where HTML object is the nth child of a parent, where n is the parameter

:nth-child(2) {
}

link

Case where HTML object is a link

visited

Case where HTML object is a visited link

Properties

color

Manages the colour of text

background-color

Manages the background colour

width

Manages the width of the element

height

Manages the height of the element

position

Manages the position of the element

display

Manages the display method of the element

border

Manages the border settings of the element that contains 3 values

border-style

border-color

font-family

z-index

text-shadow

opacity

Manages the transparency of the element

max-width

manages the maximum width the element can have

mask-image

transition

animation-duration

animation-iteration-count

Commenting

/*

Opens a multi line comment

/*This isn't compiled
neither is this line*/

*/

Closes a multi line comment