DEV Community

Mian Azan
Mian Azan

Posted on • Updated on

 

10 CSS Hacks Every Web Developer Should Know

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

Image description
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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Image description

Top comments (10)

Collapse
 
lukeshiru profile image
Luke Shiru

This aren't "hacks" at all, so the title is kinda deceiving ... and on top of that:

1. How to fix an element position in CSS

position:absolute script

Is not a script, and is not recommended to use position: absolute either.

2. How to position content in the center with CSS

Actually, in 2022, you can just:

.center {
    display: grid;
    place-items: center;
}

/* or */
.center {
    align-items: center;
    display: flex;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

No need for absolute positioning for this.

9. Hovering effect delays in CSS

You should avoid all and instead just use the property you want to transition:

.entry h2:hover {
    color: #f00;
    transition: color 0.5s ease;
}
Enter fullscreen mode Exit fullscreen mode

You might want to check CSS outside of the Wordpress ecosystem to familiarize better with modern practices.

Cheers!

Collapse
 
mianazanfarooq profile image
Mian Azan

@lukeshiru
Thanks a lot

Collapse
 
sfritsch09 profile image
Sebastian Fritsch

I absolute?ly agree, it is good that you are flex?ible to give a constructive feedback and justify the content in center

Collapse
 
mianazanfarooq profile image
Mian Azan

To justify content in center you can also use d flex property of bootstrap and other is flexbox model in css

Collapse
 
tomaszs2 profile image
Tom Smykowski

Nice list. I know that for 9 there is a new property to add ellipsis to Multi-line text as well

Collapse
 
mianazanfarooq profile image
Mian Azan

Glad to hear that article helped you

Collapse
 
sarveshprajapati profile image
Sarvesh Prajapati

in the point 9: the transition property should be added to the main element not at it's hovered state

don't need to add float property in point 7

in point 6, this would be a better approach
.caption,
img,
p {
border: 2px solid #000000;
}

in point 2:
centering can also implement using flex:
display: flex;
justify-content: center;
align-items:center;

or also with grid
display:grid;
place-item:center;
in point 4: can add; object-fit:cover;

either way great article though

Collapse
 
mianazanfarooq profile image
Mian Azan

@sarveshprajapati
Glad! Article helped you
Yes these points can also be implemented using some other Css properties

Collapse
 
azwimagoda profile image
Azwi Magoda

Thanks for this post! It's really helpful.

Collapse
 
mianazanfarooq profile image
Mian Azan

Glad to hear that it helped you

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git