DEV Community

Cover image for Quick and simple CSS cheatsheet 🔥
Aviyel Inc profile image Pramit Marattha
Pramit Marattha for Aviyel Inc

Posted on • Updated on

Quick and simple CSS cheatsheet 🔥

CSS

The language that we use to style an HTML document is CSS. CSS specifies how HTML elements should appear.

CSS syntax

CSS basics

selector{ property : value;}
Enter fullscreen mode Exit fullscreen mode
  • the selector means who = who do you want to change
  • property means what = what do you want to change
  • value means how = how do you want to change

always keep your property: value pair in alphabetical order

h1{
    color: red;
    font-size: 200px;
}
Enter fullscreen mode Exit fullscreen mode

CSS box model

CSS box model

  • css box model is a series of positioning properties designed to help with layout

  • Each of the property works in a different way and positons the items with different spacing

  • The box model is the most commonly used way to position items

Padding

  • the space between the content and border

CSS Paddings - Individual sides 

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
Enter fullscreen mode Exit fullscreen mode

works on clockwise pattern (top right bottom left)

for example,

padding: 50px 30px 50px 80px;

/* is equal to */
 padding-top: 50px;
 padding-right: 30px;
 padding-bottom: 50px;
 padding-left: 80px;
Enter fullscreen mode Exit fullscreen mode

Border

  • border is the divider between padding and the margin.
  • It can be styled using a CSS property called border. 
<p style="border:5px solid red;">Red border</p>
Enter fullscreen mode Exit fullscreen mode

CSS border style

border-style property specifies what kind of border to display.Learn more about border-style from here

CSS border style

Margin

  • Margins are used to create space around elements, outside of any defined borders.

CSS Margins - Individual sides 

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
Enter fullscreen mode Exit fullscreen mode

works on clockwise pattern (top right bottom left)

for example,

margin: 100px 100px 150px 80px;

/* is equal to */

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
Enter fullscreen mode Exit fullscreen mode

CSS selectors

  • selectors are ways of grabbing and manipulating HTML

  • Different selectors have different application

Element selector

  • you can select entire elements without any special characters

  • This applies to all of the elements with that tag on the page

  • it ranks on the bottom of the specificity index

Class selectors

  • select elements with a certain class name

  • can be used on any and all elements with that class name

  • can be used multiple times and is select with "." symbol

Id selectors

  • select elements with a certain Id

  • can be used on any and all elements with that id name

  • unlike classes, it can be only used on one element at a time,
    and is selected with the "#" symbol. However it is possible to use
    multiple time

ID vs Class selectors

ID selectors are a little bit different from the class selectors although they do
have some similarities

you will use the ID to identify element where there is an only a single one of them on a particular page

particular ID only be used once on the page.

you cant have more than one id for particular elements

id overrides the class and class override the element

inline CSS override id and class

inline style > ID > CLASS > element/tag

ID can only be used once while class can be used multiple times

pseudo selectors

  • a special type of selector that is used commonly for the interactivity of the website.

  • only is visible when something is done on the Website.

:hover
:first-child
:last-child
:nth-child(n)
:only-child
:link
:visited
Enter fullscreen mode Exit fullscreen mode

Advance selectors

Adjacent sibbling selectors 

h2 + a{
    color:red;
}
Enter fullscreen mode Exit fullscreen mode

General common combinator/selector 


/* every button that is after the text area but they are in the same parent */

textarea ~ button {
    color: pruple;
}
Enter fullscreen mode Exit fullscreen mode

Child selectors 

every single li inside ul

ul > li {
    color:tomato;
}
Enter fullscreen mode Exit fullscreen mode

Descendent selectors 


/* descendent selectors */

ul li {
  color: mediumseagreen;
}
Enter fullscreen mode Exit fullscreen mode

Attribute selectors

The [ attribute ] selector is used to select elements with a specified attribute.

a[attribute="value"] {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Types of attribute selectors 


img[src^="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}


img[src$="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}


img[src*="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}

h2[class~="article-subtitle"] {
  background: black;
  color: rgb(0, 255, 123);
}
Enter fullscreen mode Exit fullscreen mode

CSS comments

Comments on css starts with /* and ends with */

/* single line */

/* 
multi
line
*/
Enter fullscreen mode Exit fullscreen mode

CSS colors

Learn more about css colors

CSS text color 

<p style="color:Tomato;">Hello there!! This text is in tomato color</p>
Enter fullscreen mode Exit fullscreen mode

CSS border color 

<p style="border:5px solid Tomato;">Hello there!! My border is in tomato color</p>
Enter fullscreen mode Exit fullscreen mode

CSS background colors 

<h1 style="background-color:Tomato;">Hello there!! I am tomato color</h1>
Enter fullscreen mode Exit fullscreen mode 
body{
background-color:Tomato;
}
Enter fullscreen mode Exit fullscreen mode

CSS background properties

background-color 

body{
background-color:Tomato;
}
Enter fullscreen mode Exit fullscreen mode

background-image 

body {
  background-image: url("some_image.png");
}
Enter fullscreen mode Exit fullscreen mode

background-repeat 

body {
  background-image: url("some_image.png");
  background-repeat: repeat-x;
}
Enter fullscreen mode Exit fullscreen mode

NOTE: To repeat an image horizontally, set background-repeat: repeat-x and to repeat an image vertically, set background-repeat: repeat-y and to not repeat and image set background-repeat: no-repeat;

background-attachment

background-attachment property specifies whether the background image should scroll or be fixed

/* background image will be at fixed position */
body {
  background-image: url("some_image.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* background image will scroll with the rest of the page */
body {
  background-image: url("some_image.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}
Enter fullscreen mode Exit fullscreen mode

background-position

background-position property sets the starting position of a background image.

background-position
learn more here about all background properties

CSS height and width

Height and width properties are used to set the height and width of an element

Height and width

CSS Height and width

CSS font

font size

font-size property sets the size of the text

p {
  font-size: 90px;
}
Enter fullscreen mode Exit fullscreen mode

font family

font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers and OS.

p {
  font-family: "Times New Roman", "Courier New", Times, serif;
}
Enter fullscreen mode Exit fullscreen mode

font style 


/* font-style property is mostly used to specify italic text.*/
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

/*font-weight property specifies the weight of a font*/
p.normal {
  font-weight: normal;
}

p.boldd {
  font-weight: bold;
}

/*font-variant property specifies whether or not a text should be displayed in a small-caps font*/

p.normal {
  font-variant: normal;
}

p.caps{
  font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

Float

The CSS float property specifies how an element should float.

float:right;
float:left;
float:none;
float:inherit;
Enter fullscreen mode Exit fullscreen mode

clear

The CSS clear property specifies what elements can float beside the cleared element and on which side.

clear:right;
clear:left;
clear:none;
clear:inherit;
Enter fullscreen mode Exit fullscreen mode

Display 

display:none;
Enter fullscreen mode Exit fullscreen mode

Two different display :

  • Inline
  • Block 
display:inline;
display: inline-block;
Enter fullscreen mode Exit fullscreen mode

CSS position

position property specifies the type of positioning method used for an element.

position: static;

HTML elements are positioned static by default.
"position: static;" is not positioned in any special way; it is always positioned according to the normal flow of the page

div.static {
  position: static;
  border: 3px solid green;
}
Enter fullscreen mode Exit fullscreen mode

position: relative;

position: relative; is positioned relative to its normal position.

div.relative {
  position: relative;
  right: 10px;
  border: 3px solid green;
}
Enter fullscreen mode Exit fullscreen mode

position: fixed;

position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width:20px;
  border: 2px solid red;
}
Enter fullscreen mode Exit fullscreen mode

position: absolute;

position: absolute; is positioned relative to the nearest positioned ancestor

div.relative {
  position: relative;
  width: 500px;
  height: 500px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;
  top: 50px;
  right: 0;
  width: 400px;
  height: 150px;
  border: 3px solid red;
}
Enter fullscreen mode Exit fullscreen mode

position: sticky;

position: sticky; is positioned based on the user's scroll position

div.sticky {
  position: sticky;
  top: 0;
  background-color: red;
  border: 5px solid green;
}
Enter fullscreen mode Exit fullscreen mode

CSS Flexbox

  • flexbox stands for flexible box
  • It is a display type that comes to a range of properties allowing you to arrange items easily
  • It is an alternative to using displays,floats and other layout properties

Flexbox components

  • flexbox element is split into two main parts: the containers and the items
  • containers are the parent elements
  • flex items are the child elements

Flex direction properties

The flex-direction property defines in which
direction the container wants to stack the flex items.

flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
flex-direction: row-reverse;
Enter fullscreen mode Exit fullscreen mode

Flex-wrap properties

The flex-wrap property specifies whether the
flex items should wrap or not.

flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
flex-wrap: row wrap;
Enter fullscreen mode Exit fullscreen mode

Justify-content Property

The justify-content property is used to align the flex items:

justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
Enter fullscreen mode Exit fullscreen mode

image

CSS Flex Items

The direct child elements of a flex
container automatically
becomes flexible (flex) items.

The order Property

The order property specifies the order of the flex items.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex-grow Property

The flex-grow property specifies how much a flex item
will grow relative to the rest of the flex items.

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex-shrink Property

The flex-shrink property specifies how much a
flex item will shrink relative to the rest of the flex items.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex-basis Property

The flex-basis property specifies the initial length of a flex item.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex Property

The flex property is a shorthand property for the
flex-grow, flex-shrink, and flex-basis properties.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Align-self Property

The align-self property specifies the alignment for the selected
item inside the flexible container.

The align-self property overrides the default alignment
set by the container's align-items property.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

image

Shrink, Grow and Basis

The flex-shrink CSS property sets the flex shrink factor of
a flex item. If the size of all flex items is larger
than the flex container, items shrink to fit according
to flex-shrink.

The flex-grow CSS property sets the flex grow factor of a flex item's
main size.

The flex-basis CSS property sets the initial main size of a
flex item. It sets the size of the content box unless
otherwise set with box-sizing.

Grid

  • Is more manual providing you with more tools to layout a container
  • It is also very focused on providing tool for both dimension(width and height)

whereas flexbox is only focused on width

.grid-container {
  background-color: white;
  margin: 10px;
  height: 500px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
  /* start end center space-evenly*/
  /* justify-content: start; */
  /* justify-content: end; */
  justify-content: space-around;
  align-content: center;
}

.grid-item {
  color: white;
  font-size: 30px;
  text-align: center;
  width: 70px;
  line-height: 40px;
  margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Grid coloumn and row gap 

grid-column-gap: 100px;
grid-row-gap: 100px;
grid-gap:column row;
Enter fullscreen mode Exit fullscreen mode

Grid column row and area

The grid-column property sets the width of the column of a grid item.

The grid-row property sets the height of the row of a grid item.

The grid-area property sets the area of a grid item. It consists of the width of the column & height of the row of a grid item.

Row and col

GRID vs Flexbox

  • similar to flexbox grid is a display type that can be used to activate certain type of layout feature in container element
  • They are both alternative to other layout features available in css.

Further readings

Top comments (0)

Read next

sdfsf256 profile image

Saint John’s University: Nurturing Minds, Transforming Lives

fff lala -

mythiliraju profile image

60 Test Case Examples for HealthCare Domain Testing

MythiliRaju -

andylarkin677 profile image

Reddit CPO talks new features — better translations, moderation and dev tools

Andy Larkin -

charleslyman profile image

Boost Your Magento Store's Performance with LiteSpeed Servers

Charles Lyman -