2024 CSS Cheatsheet | SheCodes http://cheatsheets.shecodes.

io/css

SheCodes CSS Cheatsheet

SheCodes CSS cheatsheet

Search cheatsheets..

Selectors Colors

Element selector Color property Copy code

a{ p{
color: red; color: #00ff00;
} }

h1 {
text-align: center; More info
}

More info CSS

Background

.header {
Class selector background: green; Copy code
}

/* All elements with class="spacious" */ You can also use an image as a background.
.spacious {
More info
margin: 20px;
}

/* All <li> elements with class="spacious" */

li.spacious { Native colors
margin: 20px;
}

h1 {
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
color: blueviolet;
/* For example, class="elegant retro spacious" */
}
li.spacious.elegant {
margin: 20px;
} Note: We generally only use black or white. Other colors such as red, blue, green are only good for testing purposes. You should u

/* All <li> elements OR All elements with class="spacious" */ More info

li, .spacious {
margin: 20px;
}

Hexadecimal colors
More info CSS

h1 {
color: #885df1;
}
ID selector Copy code

Use a color picker to find the color you need.

#demo {
Note: #000000 is black, #ffffff is white. #ffffff is the same as #fff, #FFFFFF or #fff or white.
border: red 2px solid;
}
More info

Note: You should rarely/never use that one

More info CSS

RGB colors

Pseudo-classes selector Copy code

/* Any button over which the user's pointer is hovering */

button:hover {
color: blue;
}

/* Applied when the user has already visited the link */

1 of 8 2024-10-01, 19:27
2024 CSS Cheatsheet | SheCodes http://cheatsheets.shecodes.io/css

a:visited {
color: red;
} /* without transparency */
p{
color: rgb(135, 93, 241);
More info } CSS

/* with transparency */
h1 {

Box }
color: rgba(135, 93, 241, 0.5);

Border Copy code An optional alpha

The RGB color model defines a given color according to its red, green, and blue components.
first 3 values should be between 0 and 255 and the fourth between 0 and 1. 0 being completely transparent.

.header { More info

border: 1px solid #885df1;
}

Gradient
First value is the thickness, second one the style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset), and third one is the color.

More info CSS

.footer {
background: linear-gradient(#e66465, #9198e5);
}

Margin Copy code

Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, wit
to blue linear-gradient(45deg, red 0 50%, blue 50% 100%);
/* Margin around the element */
.box-1 { More info
margin: 10px;
}

/* Margin left only */

.box-2 { CSS Background Size
margin-left: 10px;
}
body {
/* 10px margin on top and bottom, 5px on the sides */ background-size: cover;
.box-3 { }
margin: 10px 5px;
} img {
background-size: 50%;
/* 20px margin top, 15px margin right, 10px margin bottom and 5px margin left */}
.box-4 {
margin: 20px 15px 10px 5px;
} More info

Space outside an element.

More info CSS Background Image CSS

body {
background-image: url("https://i.notretemps.com/1400x787/smart/2022/06/13/albi.jpeg");
Padding Copy code
background-repeat: no-repeat;
background-size: cover;
background-color: black;
/* padding around the element */
}
.box-1 {
padding: 10px;
} More info

/* padding left only */

.box-2 { Text
padding-left: 10px;
}
Text align
/* 10px padding on top and bottom, 5px on the sides */
.box-3 {
padding: 10px 5px;
h1 {
}
text-align: center;
}
/* 20px padding top, 15px padding right, 10px padding bottom and 5px padding left */
.box-4 {
padding: 20px 15px 10px 5px; text-align: left | right | center | justify | initial | inherit;
}
More info

Space inside an element.

More info CSS

Text decoration

Width h1 {
Copy code
text-decoration: underline;
}

.box-1 {
width: 100%; none: no line is drawn, and any existing decoration is removed. underline: draws a 1px line across the text at it
}
text at its “middle” point. overline: draws a 1px line across the text, directly above its “top” point. inherit: inher

2 of 8 2024-10-01, 19:27
2024 CSS Cheatsheet | SheCodes http://cheatsheets.shecodes.io/css

}
text at its “middle” point. overline: draws a 1px line across the text, directly above its “top” point. inherit: inher

.box-2 { More info

max-width: 100px;
}

.box-3 {
min-width: 200px; Text transform
}

h1 {
More info CSS
text-transform: uppercase;
}

Note: text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Height Copy code
More info

.box-1 {
height: 100%;
}
Line height
.box-2 {
max-height: 100px;
} h1 {
line-height: 28px;
.box-3 { }
min-height: 200px;
} p{
font-size: 14px;
line-height: 1.5;
More info } CSS

Note: We generally use a multiplier such as 1.5 which making the line height 1.5 times higher than the font size

Radius More info

Copy code

/* Light rounded corner all around the element */

.box-1 { Font style
border-radius: 20px;
}

h1 {
font-style: italic;
/* Rounded corner top left and right only */
}
.box-2 {
border-radius: 50% 50% 0 0;
} Note: font-style: normal | italic | oblique | initial | inherit;

More info
The border-radius CSS property rounds the corners of an element's outer border edge.

More info CSS

Font weight

Box shadow Copy code

h1 {
font-weight: normal;
}
.box {
box-shadow: 10px 5px 5px red;
p{
}
font-weight: 700;
}
the third value is the blur radius and the last value is the shadow color.
a{
More info font-weight: 100; CSS
}

Note: font-weight: normal | bold | bolder | lighter | number | initial | inherit; It can also be a value between 100 | 200 | 300 | 40
Transform extra bold Copy code

More info
/* Function values */
transform: rotate(0.5);
transform: rotateX(10deg);
transform: rotateY(10deg);
Font size
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
body {
transform: translateX(2em);
font-size: 18px;
transform: translateY(3in);
}
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: skew(30deg, 20deg);;
More info

/* Multiple function values */

transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
Font family
More info CSS

3 of 8 2024-10-01, 19:27
2024 CSS Cheatsheet | SheCodes http://cheatsheets.shecodes.io/css

body {
font-family: Georgia, serif;
}

More info

List

List style Copy code

/* Remove the list bullets point and default spacing */

ul {
list-style: none; Layout
padding: 0;
margin: 0;
} Display

/* Horizontal list */ img {

li.students { display: block;
display: inline; }
}
.heading {
display: inline;
More info CSS
}

Note: Each element is by default inline or block element. A block element creates an invisible line before and after. An inline elem
Mouse
More info

Cursor Copy code

Position
button:hover {
cursor: pointer;
}
.heading {
position: relative;
auto | default | none | context-menu | help | pointer | progress | waittop:
| cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-
-10px;
left:
resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize 20px;
| w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-
}
scroll | zoom-in | zoom-out | grab | grabbing

Note: Pointer is the most common one.

Note: Position can be static | relative | fixed | absolute | sticky. By default, elements are static.
More info CSS
More info

Center element

Advanced CSS img {

display: block;
margin: 0 auto;
CSS Variables } Copy code

:root {
--main-branding-color: #885df1;
}

h1 { Flexbox
color: var(--main-branding-color);
}
.container {
display: flex;
Note: Useful to store font families, colors or sizes. flex-direction: row | row-reverse | column | column-reverse; /* optional */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
More info CSS
flex-direction: row | column; /* optional */
}

Align elements within the container horizontally

Media queries Copy code
More info

@media (max-width: 900px) {

h1 {
font-size: 18px;
text-align: center; Responsive image
}

.footer { img {
display: none; max-width: 100%;
} height: auto;
} }

4 of 8 2024-10-01, 19:27
2024 CSS Cheatsheet | SheCodes http://cheatsheets.shecodes.io/css

@media (min-width: 900px) {

h1 { More info
color: red;
}
}

Grids
Media queries are useful when you want to apply CSS to specific resolution breakpoints to make your website more responsive.

More info CSS

.image-gallery {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(2, 2fr 1fr);
gap: 20px;
}
Animations
.image-gallery img {
width: 100%;
Transitions } Copy code

More info
a{
transition: all 200ms ease;
opacity: 1;
color: blue;
}

a:hover {
opacity: 0.7;
color: red;
}

More info CSS

5 of 8 2024-10-01, 19:27