Show Menu
Cheatography
  1. Home >
  2. Programming >

CSS Cheat Sheet (DRAFT) by

This is also for anybody who wants it but it concerns CSS rules.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Selectors

Style x element(s) with y class
p.first
x.y
Style selector with x tag
a[href]
s[x]
Style selector with x tag with exact y content
a[href­="ht­tp:­//g­oog­le.c­om­"]
s[x="y"]
Style selector with x tag containing y
a[href­*="g­oog­le"]
s[x*="y­"]
Style selector with x tag starting by y
a[href­^="h­ttp­s"]
s[x^="y­"]
Style selector with x tag ending by y
a[href­$="o­rg"]
s[x$="y­"]
Style selector with x tag starting by y and ending by z
a[href­^="h­ttp­s"][­hre­f$=­"­org­"]
s[x^="y­"­][x­$="z­"]
Style descendant selectors (element inside element)
.class div
s x
Style direct descendant selectors (direct element child inside element)
.class > div
s > x
Style direct sibling to element
.class + div
s + x
Select direct siblings after element
.class ~ div
s ~ x
 
Concepts
Specif­icity or weight
If multiple rules target the same element, the browser will apply the most specific.
ID selector > class, attribute selectors > element selector
 
To overrule specifity, !important can be used
color: royalblue !impor­tant;
 
Combining id and class will give us higher specif­icity
.highl­igh­t#p­roduct

Pseudo­-class selectors

Style first child of x element
x :first­-child
Style last child of x element
x :last-­child
Style each first x child element of each type
x :first­-of­-type
Style each last x child element of each type
x :last-­of-type
Style odd child elements of x
x y:nth-­chi­ld(odd)
Style visited URL
a:visited
Style all link anchors
a:link
Style element when hovered over
x:hover
Style element when selected
x:focus

Pseudo­-el­ement selectors

Style first letter inside element
p::fir­st-­letter
Style first line inside element
p::fir­st-line
Change selection to another color
::sele­ction
Change selection of element to another color
p::sel­ection
Insert content before element and incrust into DOM
::before { content: "..."­; display: block}
Insert content after element and incrust into DOM
::after { content: "..."­;}
 

Inheri­tance

Child elements autima­tically inherit some styles from parents.
To stop from doing this, we use the 'initial' property on the child
color: initial;
Styles that aren't inherited can be forced to be, such as border with 'inherit'.
border: inherit;

Colors

RGB
Amount of Red Green and Blue
hsl( 1, 2, 3)
RGBA
Amount of Red Green and Blue with added Alpha (amount of transp­arecy)
hsl( 1, 2, 3, 4%)
HEX
Value repres­enting numbers in the RGB system
#abc123
HSL
Hue (tone) Saturation (perce­ntage of satura­tion) and Lighting (the amount of lightness)
hsl( 1, 2%, 3%)
HSLA
Hue (tone) Saturation (perce­ntage of satura­tion) and Lighting (the amount of lightn­ess), Alpha (Trans­par­ency)
hsl( 1, 2%, 3%, 4)
 
Gradients
They're techni­cally images, so the properties used for colors don't work the same
Fill background with a linear gradient
backgr­ound: linear­-gr­adi­ent­(bl­ue,­red);
From left to right
backgr­ound: linear­-gr­adi­ent(to right, blue,red);
From bottom right
backgr­ound: linear­-gr­adi­ent(to bottom right, blue,red);
 
backgr­ound: linear­-gr­adi­ent­(45deg, blue,red);
Same thing, mostly red
linear­-gr­adi­ent­(45deg, blue,red 90%);
3 color linear gradient
linear­-gr­adi­ent­(45deg, blue, red, yellow;
Radial gradient
radial­-gr­adi­ent­(blue, red)
Radial gradient with rounder center
radial­-gr­adi­ent­(ci­rcle, blue, red)
Radial gradient with circle centre located at the top left
radial­-gr­adi­ent­(circle at top left, blue, red)
Websites to generate gardients
cssgra­die­nt.io
 

Borders

border:
10px
line width
 
solid, dotted, dashed,
line style
 
blue
color
border-top
border­-bottom
The order of the border lines matters:
top, right, bottom, left
border­-width: 10px 20px 10px 30px
If we don't set left, left will inherit right. If we don't set top, bottom will inherit top. And viceversa.
Set a style for each line in borders
border­-style: dotted, dashed
Set a color for each line in borders
border­-color: red, blue, yellow;
Set roundness of borders. If absolute a circle is created.
border­-radius
px, %
We can make even more shapes, just look up CSS Shapes

Shadows

The box-shadow property can be used to create shadows around elements.
box-shadow
Positive values will shift the shadow to the right.
box-sh­adow: 10px;
Negative values will shift the shadow to the left.
box-sh­adow: -10px;
Two positive values will shift the shadow to the right and down.
box-sh­adow: 10px 10px;
One positive value and one negative value will shift the shadow to the right and left.
box-sh­adow: 10px -10px;
One negative value and one positive value will shift the shadow to the left and right.
box-sh­adow: -10px 10px;
To change the color of the shadow, just add it after size
box-sh­adow: -10px 10px grey;
To change the degrad­ation or blur of the color of the shadow, add a value before color color
box-sh­adow: -10px 10px 10px grey;
For a soft central shadow under a shape, use this trick:
box-sh­adow: 0 0 30px grey;
We can also use shadows for text
We use the property text-s­hadow just like box-shadow
text-s­hadow: 0 0 30px grey;
For a softer grey shadow, we can use rgba
text-s­hadow: 0 0 30px rgba(0­,0,­0,0.2);

Spacing

margin
padding