<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1" -->

---
title: CSS One-Liners to Improve (Almost) Every Project | daily.dev
description: This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width,...
canonical: https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: CSS One-Liners to Improve (Almost) Every Project | daily.dev
og:description: This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width,...
og:url: https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1
og:image: https://api.daily.dev/og/posts/5fGRfpVP1.png
og:image:alt: CSS One-Liners to Improve (Almost) Every Project
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS One-Liners to Improve (Almost) Every Project

**[DEV](https://daily.dev/sources/devto)** · 7 min read · 1246 upvotes · 27 comments

## Summary

This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width, increasing text size and line height, making images responsive, and improving table readability. Additionally, the guide offers solutions for balanced heading wrapping, matching form control colors to page styles, and reducing animations based on user preferences.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://dev.to/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m>

## Community discussion

Top comments from developers on daily.dev.

**@coppnic** · 28 upvotes

> **Important Edit: Please keep @webry comment in mind!**
>
> --
> Original Comment:
> --
> A little addition to the font-size.
> Do `html {font-size: 10px; }` and then in `body { font-size: 1rem; }` is actually 10px. Now you can go and do stuff like `font-size: 1.8rem` to get 18px font size. Or `border-radius: .4rem;` to get a 4px border radius.
>
> Check out this example:
> https://codepen.io/marvinpoo/pen/WNqeMyy

**@benwang** · 10 upvotes

> "...css one liners..."
>
> *proceeds to minify a huge css file
>
> "...and this all fits on one line..."

**@luigimqf** · 5 upvotes

> One that I found very useful it's the posibility to style the first letter of a 'heading' without needing a unnecessary span or javascript.
>
> `h1::first-letter {
>     font-size: 2rem;
>     color: #ff8A00;
> }`
>
> Check out the example: https://codepen.io/luigimqf/pen/BagaXBM

**@mgaebler** · 3 upvotes

> I wasn't aware of `text-wrap: balance;`. <3

**@raghav5712** · 1 upvotes

> Such a Great article.👍

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#ui-design](https://daily.dev/tags/ui-design), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"CSS One-Liners to Improve (Almost) Every Project","url":"https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1"},"datePublished":"2024-07-05T01:39:55.850Z","dateModified":"2024-10-05T17:16:06.846Z","description":"This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/fc3986ebf996c5b0d13f3f4b094dc15b?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/fc3986ebf996c5b0d13f3f4b094dc15b?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":27,"discussionUrl":"https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1246},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":27}],"keywords":"webdev,css,frontend,ui-design,accessibility","timeRequired":"PT7M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"CSS One-Liners to Improve (Almost) Every Project"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-one-liners-to-improve-almost-every-project-5fgrfpvp1","comment":[{"@type":"Comment","text":"Important Edit: Please keep @webry comment in mind!\n–\nOriginal Comment:\nA little addition to the font-size.\nDo html {font-size: 10px; } and then in body { font-size: 1rem; } is actually 10px. Now you can go and do stuff like font-size: 1.8rem to get 18px font size. Or border-radius: .4rem; to get a 4px border radius.\nCheck out this example:\nhttps://codepen.io/marvinpoo/pen/WNqeMyy","datePublished":"2024-07-05T08:01:37.104Z","dateModified":"2024-08-14T07:40:40.190Z","url":"https://daily.dev/posts/5fGRfpVP1#c-z2oIS9EcF","author":{"@type":"Person","name":"coppnic","url":"https://daily.dev/coppnic","image":"https://media.daily.dev/image/upload/s--8VyNl1cb--/f_auto/v1732889303/avatars/avatar_z5bNZJIOpNguomDjmmrE2"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":28}},{"@type":"Comment","text":"“…css one liners…”\n*proceeds to minify a huge css file\n“…and this all fits on one line…”","datePublished":"2024-07-08T01:42:51.896Z","url":"https://daily.dev/posts/5fGRfpVP1#c-qEBZJaKMk","author":{"@type":"Person","name":"Ben Wang","url":"https://daily.dev/benwang","image":"https://media.daily.dev/image/upload/s--NSlVLOUZ--/f_auto/v1708554237/avatars/avatar_8QrAKITOoMZOiIkUOxi4O"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10}},{"@type":"Comment","text":"One that I found very useful it’s the posibility to style the first letter of a ‘heading’ without needing a unnecessary span or javascript.\nh1::first-letter {     font-size: 2rem;     color: #ff8A00; }\nCheck out the example: https://codepen.io/luigimqf/pen/BagaXBM","datePublished":"2024-07-09T12:58:58.564Z","url":"https://daily.dev/posts/5fGRfpVP1#c-WNbPKBp6E","author":{"@type":"Person","name":"Luigi Mendes","url":"https://daily.dev/luigimqf","image":"https://avatars.githubusercontent.com/u/87784452?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I wasn’t aware of text-wrap: balance;. &lt;3","datePublished":"2024-07-07T22:40:52.202Z","url":"https://daily.dev/posts/5fGRfpVP1#c-Syej6NQdv","author":{"@type":"Person","name":"Marian Gaebler","url":"https://daily.dev/mgaebler","image":"https://lh3.googleusercontent.com/a-/AOh14GgoRHGZUYue2eH9dV52IgefaZ1VY8I048mzug-pWno=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Such a Great article.👍","datePublished":"2024-07-05T15:43:05.410Z","url":"https://daily.dev/posts/5fGRfpVP1#c-afAK6zmaY","author":{"@type":"Person","name":"Raghav S","url":"https://daily.dev/raghav5712","image":"https://media.daily.dev/image/upload/s--cAAVhn1W--/f_auto/v1717297611/avatars/avatar_g9pqkzu4zqXcaP7PUQfkq"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
```