10 CSS Hacks Every Web Developer Should Know

#webdev #beginners #programming #css

CSS (Cascading Style Sheet) is still among the top ten coding languages, according to Redmonk(It was founded on the premise of the increasing influence of software developers in the technology industry.), even though it isn't as popular as JavaScript. CSS is popular among website developers because it is quite robust, relatively straightforward to learn, and ubiquitous across different browsers.
There are various CSS shortcuts or hacks, as there are with any coding language, that help you to write cleaner code, improve design components, and save time. You may also use a code editor to directly paste these snippets into your website.
It's also vital to note that CSS does not require you to be a senior web developer. CSS is utilised by 96 percent of all websites, according to W3Techs, and the ability to use CSS to improve the layout and design of a website is essential to the functionality of major open source CMSs like WordPress.
In reality, the majority of the most popular website builders (which are notorious for advocating a "What You See Is What You Get" or WYSIWYG approach) now allow users to insert custom CSS code.
If you are new to css then these hacks will help you a lot,Let's get started with these ten CSS hacks if you already know the fundamentals.

1. How to fix an element position in CSS

Despite the fact that websites are dynamic, you may have some items that you want to move about. Using the position:absolute script, you can do so.
However, use this strategy with caution and test it on all screen sizes and resolutions before implementing it to avoid breaking your site's design.
Following this script with a precise position node guarantees that the element stays in the same place for all users.
Example:

.sidebar {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 300px;
  height: 150px;
}

2. How to position content in the center with CSS

It can be difficult to put stuff in the centre of the screen. You can, however, use position: absolute to override the dynamic positioning and display the content in the middle at all times.
It also works on any device at any resolution. Always double-check that everything is in the right place and that the element looks natural, even on small displays.
Example:

section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}

3. How to edit styles on a single page in CSS

You can use a custom class to override the site's CSS styles if you have a CMS and want some of your posts to look different than others. This guarantees that you just make changes to one post page and leave the others alone.
When you make a post on a WordPress blog, the post's id is included in the body as a class, for example:

Then you could do something like this to change the styling for just that post's page:

.postid-330 {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

Custom classes can be added to individual posts in other major CMSs. Ghost, for example, allows you to designate a post as a featured post and adds a.featured class to it.
If you want to use this method frequently, you should alter the main CSS style sheet to prevent writing extra code.
This isn't limited to CMSs; if you have a simple website with many HTML files, you can use the same CSS file to apply specific styling to elements throughout your project.
For example, if you have page with the class .landing:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>Landing Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>Landing Page</h1>
    <p>My landing page.</p>
  </body>
</html>

And another with the class .about:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>About Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>About Page</h1>
    <p>My about page.</p>
  </body>
</html>

You could add this to your main style sheet to only adjust the styling on the about page:

.about {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

4. How to fit images to the page in CSS

Few things are more annoying than having your graphics spill all over your site visitor's screen. It can wreak havoc on your site's look and turn visitors away.
However, you can ensure that your images always fit the visitor's screen, regardless of the device they're using, with this simple hack.

img {
  max-width: 100%;
  height: auto;
}

5. Visited link styling in CSS

The default style of visited links that users have clicked on may not be compatible with the style of your current site. CSS code can be used to change the appearance of links before and after users click on them.
You may then combine these with the overall aesthetic of your website to create a unique experience.
Example:

a:link {
  color: #ff0000; /* the unvisited link is red */
}
a:visited {
  color: #ee82ee; /* the visited link turns violet */
}

6. How to consolidate styling in CSS

If you know you want to apply CSS styling to a number of objects, writing each piece of code one at a time takes time. When you use commas to separate things and write the CSS style within, the style is applied to all of them.
Because you won't have to write the same line of code numerous times, you'll save time and reduce the size of your code.
Example:

/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
  border: 2px solid #000000;
}

/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
  color: white;
  font-size: 24px;
}

7. Initial letter stylizing in CSS

It works by capturing the attention of the reader and piqueing their interest in reading the first line.
While this style may appear to have dated, you can still design it to appear modern and profit on the psychological effect it has on your guests. Furthermore, because the drop caps option is incorporated into the CSS language, you may utilise it to give your paragraphs a new look with ease.
Example:

p:first-letter {
  display: block;
  float: left;
  margin: 5px;
  color: #000000;
  font-size: 60px;
}

8. How to disable text wrapping and add ellipsis in CSS

If you're short on space, you might have to truncate your text to fit other parts. You can manually adjust each of the text elements, but this takes time and requires some trial and error.
Instead, you can use a combination of overflow, white space, and text-overflow to create a natural break in the text that is easy to read.
The example below sets a text width limit, hides the overflowing part, disables text wrapping, and adds an ellipsis (...) to indicate that there is more text for the users.
Example:

.product-description {
max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

9. Hovering effect delays in CSS

The:hover selector is a CSS pseudo-class that lets you add a hover effect to your page. However, by adding a transition element to postpone the hovering effect, you may make it much more stylish.
While it appears nice, it also gives the user's eyes a sense of movement, pulling their attention to the piece.
Example:

.entry h2 {
  font-size: 48px;
  color: #000000;
  font-weight: 750;
}

/* Next, add a delay to the hover effect */
.entry h2:hover{
  color: #f00;
  transition: all 0.5s ease;
}

10. How to reset CSS Styles

Last but not least, in order for your design to perform flawlessly across multiple browsers, you may need to modify all of the default styling attributes.
When you're trying to make your website look uniform across all browsers, each browser has its own style sheet with built-in default styles, which might be an issue.
Example:

vertical-allign:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
border:0;
margin:0;
padding:0;
outline:0;

I hope you enjoyed the CSS tricks we discussed and that they will help you make your page look better and coding life easier.😅
The below image is pure example how CSS works