“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022.” Sometimes you want to analyze data from a site, but the site doesn’t expose an API for accessing that data. The cascading nature of CSS sometimes makes it difficult to understand and use. Developers at all levels often have trouble trying to figure out how to use certain features. So don’t be too hard on yourself when you run into problems with CSS – it happens to everyone.

I’ll bring you 10 great CSS tips that will make your life easier as a developer, especially if you’re a beginner.

1. How to fix horizontal scrolling on web pages in CSS

If you’re styling your web page and you see a horizontal scroll bar at the bottom, you need to find elements that are wider than the available screen width.

For example, in the screenshot below, you can see that there is a horizontal scroll:

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

* { 
     border: 2px solid red;
}
Copy the code

This applies a 2-pixel red border to every element on the page, so you can easily figure out which elements need to be adjusted.

After applying the above styles, the result is as follows:

You can see the second green wave is causing the horizontal roll. This is because the width is set to 1400 pixels, which is wider than the available screen width of 1200 pixels.

.wave2 {
  width: 1400px;
}
Copy the code

Setting the width back to 1200 pixels or removing it completely will fix the problem, so there is no longer horizontal scrolling.

2. How do I override styles in CSS

In certain cases, you may want to override a specific style that already exists (for example, from a library). Or, you might have a template with a large style sheet, and you need to customize specific parts of it.

In these cases, you can apply the rules of CSS Specificity,! Important can also use exceptions in front of rules.

In the following example,! Important provides an emerald variation of # 2ecC71 (my favorite color) for each h1 element:

h1 { color: #2ecc71 ! important; }Copy the code

But be warned — using this exception is considered bad practice, and you should avoid it whenever possible.

Why is that? Well,! Important actually breaks the cascading nature of CSS and makes debugging more difficult.

Best use case ever! Important is used to identify problems in the code base when dealing with a large number of template stylesheets or old code. You can then quickly fix the problem and eliminate the exception.

Except use! In addition to applying styles, you can learn more about CSS particularities and apply these rules.

3. How to make squares with CSS

If you want to make a square without messing up the width and height too much, you can set the div [or span as appropriate] style to equal numbers by setting the background color, desired width, and aspect ratio. The first number is top and bottom dimensions, and the second is left and right.

You can take it one step further by playing with these two numbers to make rectangles and any square you want.

<div class="square"></div>
Copy the code
.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}
Copy the code

4. How do I center div with CSS

As style sheets get larger, it becomes very difficult to center divs. To style any div, give it a block display, automatic margins, and a width less than 100%.

<div class="center"></div>
Copy the code
.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}
Copy the code

5. How do I remove extra padding from boxes in CSS

Using box-sizing: border-box ensures that no extra padding is added to the box when setting the width and padding for the box. This will help your layout look better.

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

6. How to use CSS to make the initial drop

You can use the initial pseudo element to make the initial sink. Yes! The initials you see in the newspaper sink.

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

 <p class="texts">
      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
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>
Copy the code
p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}
Copy the code

7. How do I set text to uppercase or lowercase in CSS

Uppercase or lowercase letters don’t have to come directly from your HTML. You can force any text to be uppercase or lowercase in CSS.

I hope there will be SentenceCase and tOGGLEcASE options in the future. But why would you write a toOGGLEcASE text?

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>
Copy the code
.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}
Copy the code

8. How to declare variables to keep CSS DRY

Variable? Yes. You can declare variables in CSS.

When you declare variables, you can use them in many other styles. If you have anything to change, you simply change the variable and the results will be reflected wherever they are used. This will help keep your CSS code dry (don’t repeat yourself).

You can declare a variable by placing it in the root scope so that it is global in the stylesheet. To use your variable, you can put the property in curly braces next to the “var” keyword.

Variables are usually declared at the top of the stylesheet – that is, before resetting.

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

p {
  color: var(--text-color);
}
Copy the code

9. How to use it:beforeand:afterSelectors add extra content to your CSS

The :before selector in CSS helps you insert content before elements:

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>
Copy the code
p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}
Copy the code

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

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}
Copy the code


10. How to use pure CSS to achieve smooth scrolling

You can apply smooth scrolling to web pages without having to write complex JavaScript or use plug-ins. Therefore, if you have anchor tags that link to multiple parts of a web page and click on them, the scrolling is smooth.

html {
  scroll-behavior: smooth;
}
Copy the code

!