CSS Cheat Sheet – Top Tricks to Improve Your CSS Coding

Developers of all skill levels often have a hard time figuring out how to use certain features and you’ll often google or ask a coworker for help. So here is CSS Cheat Sheet with top most useful tricks to improve your CSS coding skills.

The cascading nature of CSS sometimes makes it difficult to understand and use. mystical and misleading, you have to be misleading too if you are to demystify it. So I am writing few very useful CSS tricks that will make your work easy and will bring some extended expertise in your job and excel from others either you are beginner or intermediate learning of CSS

How to Override a Style in CSS

In certain cases, you may want to overwrite a certain already existing style (e.g. from a library). Or, you may have a template with a large style sheet that you need to customize for a specific part.

As per above scenario you can apply the CSS specificity rules or use the !important exception before your rule.

In the example below, the !important gives every h1 element an new font size of 32px

h1 {
  font-size: 32px !important;
}

How to Fix Horizontal Scroll in CSS

When you’re designing your webpage and you see a horizontal scroll bar at the bottom, you should find the item that is wider than the available screen width.

For example, in the screenshot below, you can see that it is scrolling horizontally:

You can use the universal selector (*) to find the element by applying the following rules:

* { 
     border: 2px solid red;
}

This will assign a red 2 pixel border to each element on the page so you can easily find out which element you are adjusting have to.

Making a Square with CSS

If you want to make a square without losing too much width and height, you can design your div by setting the background color, the width you need, and then an aspect ratio with equal numbers .

The first number is the top and bottom size, and the second number is the left and right.

You can make the rectangles and squares you want by playing with two graphics to go further.

square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

// Usage:

<div class="square"></div>

How to align center a container (div) with CSS

As style sheets become more complex, centering the div becomes very difficult. To lay out any div, provide it with block display, automatic margins, and a width below 100%.

center-alinged {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

//usage:

<div class="center-alinged"></div>

Remove Extra Padding in a Box in CSS

Using box-sizing:border-box will ensure that no extra padding is added to the box when setting the width and padding.

This will help your design look better.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

How to code a Drop Cap Letter with CSS

You can use the Drop cap elements of the first letter to make capital letters. Yes! The capital letters you see in the newspaper.

Select the appropriate HTML element and apply the style shown below:

p.dropcap ::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

//useage:

<p class="dropcap">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
 </p>

How to Transform the Text into Uppercase or Lowercase in CSS

Upper or lower case letters do not have to come directly from your HTML code. You can force all text in your CSS to be uppercase or lowercase.

I hope there are options for SentenceCase and tOGGLEcASE in the future. But why do you even want to create a TOGGLEcASE text?

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

//Usage:
<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

How to use a Variable in your CSS

Variables? Yes, you can declare variables in CSS. When declaring variables, you can use them in a number of other styles. When you have something to change, just change this variable and the result will show up everywhere they are used.

You can declare a variable by placing it in the root area to make it global in the stylesheet. And to use your variable, put the property in curly braces next to the var keyword.

It is common practice to declare the variable (s) at the beginning of the stylesheet, that is, before reboots.

:body {
  --text-color: hsl(145, 63%, 49%);
}

h1 {
  color: var(--text-color);
}

How to Use the :before and :after Selectors and Its usage

The :before selector in CSS helps you insert content before an element.

div.info::before {
  content: "this is appear before the info div";
  color: #2ecc71;
  font-weight: bolder;
}

//applied on
<div class="info">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</div>

The :after selector does the same, but it inserts the content after the element:

div.info::after {
  content: "this is appear after the info div ";
  color: #2ecc71;
  font-weight: bolder;
}

//applied on
<div class="info">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</div>

That’s It for now. I hope it will be helpful in your professional journey.

CSS Cheat Sheet – Top Tricks to Improve Your CSS Coding

Stack