Skip to main content

CSS Cheat Codes

Styling Field (css styles)​

Example 1​

Style tag
margin-bottom:10px;margin-top:10px;

Example 2​

Style tag
margin-left:3rem;margin-right:3rem;margin-bottom:50px;margin-top:50px;

Example 3​

Style tag
padding:50px;

Positioning an image in the centre of a column/block using css​

Using the code display: block; margin: 0 auto;

Watch the Video on YouTube

Margin vs Padding:​

In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Margin Padding

Adding margin and padding using the editor:​

Watch the Video on YouTube

Adding margin and padding using css:​

Watch the Video on YouTube

Adding margin and padding using bootstrap:​

Watch the Video on YouTube

REM vs PX vs Percentage​

  • Example 1: 1rem = A scalable spacing value type, which is best used when adding margin or padding.
  • Example 2: 10px = An absolute and fixed value.
  • Example 3: 10% = Percent value is always relative to another value, be it the element’s parent value or from another property of the element itself.

Selectors Field (classes)​

  • justify-content-center align-items-center - Center align content within an empty block

  • d-none - hide everywhere

  • d-md-none - hide from tablet up (shown on mobile)

  • d-lg-none - hide from desktop up (shown on mobile and tablet)

  • d-none d-md-block - hide on mobile (shown on tablet up)

  • d-none d-lg-block - hide on mobile and tablet (shown on desktop)

Hiding content using bootstrap:​

Watch the Video on YouTube