CSS Cheat Sheets are a reference for CSS goodness.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
In CSS, selectors are patterns used to select the element(s) you want to style.
* {} | Universal Selector |
#id {} | ID Selector |
.class {} | Class Selector |
h1, h2 ,h3 {} | Type Selector |
h1 + p {} | Adjacent Sibling Selector |
ul > li {} | Child Selector |
h1 ~ p {} | General Sibling Selector |
p a {} | Descendant Selector |
div[attribute="SomeValue"] {} | Attribute Selector |
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
a:hover {} | Mouse Over Selector |
a:active {} | Active Link Selector |
input:focus {} | Focus Selector |
a:visited {} | Visited Links Selector |
.class:link {} | Link Selector |
input:checked {} | Checked elements selector |
input:disabled {} | Disabled elements selector |
input:enabled {} | Enabled elements selector |
:not(p) {} | Not a Specified Element Selector |
p::first-line {} | First Line Selector |
p::first-letter {} | First Letter Selector |
p:first-child {} | First Child Selector |
p:last-child {} | Last Child Selector |
p:only-child {} | Only Child Selector |
p:nth-child() {} | :nth-child Selector |
p:first-of-type {} | First Element of its Parent Selector |
p:empty {} | Elements that have no Children Selector |
.class::before {} | Before Element |
.class::after {} | After Element |
In HTML, there are two main types of lists:
The CSS list properties allow you to:
list-style-type: disc | circle | square | none | List Type |
list-style-position: inside | outside | List Position |
list-style-image: url() | List Image |
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
background-image: url() | Background Image |
background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat | Background Repeat |
background-attachment: scroll | fixed | local | initial | inherit | Background Attachment |
background-color: #2AA9E0 | Background Color |
background-position: top | right | bottom | left | center | Background Position |
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
font-style: normal | italic | oblique | Font style |
font-variant: normal | small-caps | Font Variant |
font-weight: normal | bold | bolder | lighter | 100 - 900 | Font Weight |
vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial | Vertical Alignment |
text-transform: capitalise | lowercase | uppercase | Text Transform |
font-size: 12px | 0.8em | 80% | Font Size |
letter-spacing: normal | 4px | Space Between Characters |
line-height: normal | 3em | 34% | Line Height |
text-align: left | right | center | justify | Horizontal Alignment |
text-align-last: auto | left | right | center | justify | start | end | initial | inherit | Text Align Last |
text-decoration: none | underline | overline | line-through | Text Decoration |
text-indent: 25px | Indent First Line |
font-family: 'Open Sans', sans-serif | Font Family |
text-justify: auto | inter-word | inter-character | none | initial | inherit | Text Justify |
text-overflow: clip | ellipsis | string | initial | inherit | Text Overflow |
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit | Text Shadow |
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
grid-template-columns: 40px 50px auto 50px 40px | Grid Template Columns |
grid-template-rows: 25% 100px auto | Grid Template Rows |
grid-template-areas: "a b c" | none | Grid Template Areas |
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr | Grid Template |
grid-column-gap: 10px | Grid Column Gap |
grid-row-gap: 10px | Grid Row Gap |
justify-items: start | end | center | stretch | Justify Items |
align-items: start | end | center | stretch | Align Items |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | Justify Content |
align-content: flex-start | flex-end | center | space-between | space-around | stretch | Align Content |
grid-auto-columns: 100px | max-content | min-content | Grid Auto Columns |
grid-auto-rows: 100px | max-content | min-content | Grid Auto Rows |
grid-auto-flow: row | column | row dense | column dense | Grid Auto Flow |
grid-column-start: 2 | areaname | span 2 | span areaname | auto | Grid Column Start |
grid-column-end: 2 | areaname | span 2 | span areaname | auto | Grid Column End |
grid-row-start: 2 | areaname | span 2 | span areaname | auto | Grid Row Start |
grid-row-end: 2 | areaname | span 2 | span areaname | auto | Grid Row End |
grid-column: 3 / span 2 | Grid Column |
grid-row: 3 / span 2 | Grid Row |
justify-self: start | end | center | stretch | Justify Self |
align-self: start | end | center | stretch | Align Self |
The CSS box model is essentially a box that wraps around every HTML element.
box-sizing: border-box | content-box | Box Sizing |
margin: 2px 4px 6px 8px | 0 auto | Margin |
padding: 2px 4px 6px 8px | Padding |
border-color: #2AA9E0 | Border Color |
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | Border Style |
border-width: 10px | Border Width |
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
position: static | relative | absolute | fixed | sticky | Position |
top | right | bottom | left | Position Properties |
float: left | right | none | Float Element |
clear: none | left | right | both | Clear Floating Elements |
z-index: 3 | auto | inherit | Index |
Attribute Dynamic Valuecontent: attr(name-of-attribute)
--variable-name: value | CSS Variable |
var(--variable-name) | Variable Usage |
counter-reset: name-of-counter | Counter Reset |
counter-increment: name-of-counter | Counter Increment |
content: counter(name-of-counter) | Counter Dynamic Value |
Before the Flexbox Layout module, there were four layout modes:
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
flex-direction: row | row-reverse | column | column-reverse | Flex Direction |
flex-wrap: nowrap | wrap | wrap-reverse | Flex Wrap |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | Justify Content |
align-items: flex-start | flex-end | center | baseline | stretch | Align Items |
align-content: flex-start | flex-end | center | space-between | space-around | stretch | Align Content |
order: 0 | Order |
flex-grow: 0 | Flex Grow |
flex-shrink: 1 | Flex Shrink |
flex-basis: 3px | auto | Flex Basis |
align-self: auto | flex-start | flex-end | center | baseline | stretch | Align Self |