Ultimate CSS Cheat Sheets and Blogs resources
Tags: css, tailwindcss, cheatsheet, webdev
Published: 2024-07-03 19:40:11

Collection of CSS cheatsheet, prepare for CSS interviews, tips and tricks!!

## Under the Hood

"**Cheat sheet and of not much use**" this is my thinking when I was introduce to it for the first time. But this year in Jan when I was practising DSA again I've figured out the ultimate benefits of any cheat sheet in programming language.Cheat sheets are a kind of ready-to-use notes or overview making it easy for developers to prepare for interviews, and write code faster and better.

## CSS cheat Sheets

## Overapi cheatsheet website screenshotCSS properties

[https://overapi.com/css](https://overapi.com/css)

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FScreenshot%202024-07-03%20at%205.55.09%E2%80%AFPM.png?alt=media&token=e7766de6-054f-43fb-8b6e-78534bc4f269)

## CSS 2 Cheat Sheet & Quick References

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FScreenshot%202024-07-03%20at%206.21.04%E2%80%AFPM.png?alt=media&token=b29ba412-0ccd-4af2-925d-734194f2d6de)

[Website](https://cheatsheets.zip/css3)

## HTML and CSS cheatsheet

In-Depth Tweet about HTML and CSS

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FScreenshot%202024-07-03%20at%205.54.37%E2%80%AFPM.png?alt=media&token=fd45aac3-d4af-482d-b9af-6126efedd03c)

[Reference](https://htmlcheatsheet.com/css/?ref=ihatereading)

## CSS properties

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FGRd4kjFb0AM--V2.jpeg?alt=media&token=9c9cc9df-be5f-4978-8d1f-30f0aaacf2ed)

[Reference](https://x.com/NanouuSymeon/status/1343694215604301824)

## Font Sizes Cheatsheet

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FEv8_ccgXcAAFm3B.png?alt=media&token=17e0c391-0758-4ae3-a4e9-2f3589b5cc9f)

[Reference](https://x.com/denicmarko/status/1368882923978579975)

  

## CSS Alignments

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FEvfcYy7WgAMvWhW.jpeg?alt=media&token=64e658b7-e3a7-4aa1-93f1-a6f693dfec03)

[Reference](https://x.com/Prathkum/status/1366803338776481793)

  

## Color Cheat Sheet

![](https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Karyams%2FQXq1wZdVU3X7pGJJjdiB2JSavdk1%2Fimages%2FEqXCqJdXAAMm3oN.png?alt=media&token=01f6cb5a-ae70-4676-a53f-c0aff47464ca)

[Reference](https://x.com/Prathkum/status/1366803338776481793)

  

## Blogs on CSS Cheatsheet

[CSS Selectors](https://www.freecodecamp.org/news/css-selectors-cheat-sheet-for-beginners/?ref=dailydev)

[](https://www.freecodecamp.org/news/css-selectors-cheat-sheet-for-beginners/?ref=dailydev)[A Complete Guide to CSS](https://www.sitepoint.com/css-logical-properties-guide/)

[Logical Properties](https://www.sitepoint.com/css-logical-properties-guide/)

[](https://www.sitepoint.com/css-logical-properties-guide/)[50 cheatsheet guides and references](https://speckyboy.com/css-cheatsheets-resources-guides/)

[](https://speckyboy.com/css-cheatsheets-resources-guides/)[Top 6 CSS cheatsheet](https://dev.to/devshefali/the-top-6-css-cheatsheets-that-will-save-you-hours-2lp1?ref=dailydev)

[](https://dev.to/devshefali/the-top-6-css-cheatsheets-that-will-save-you-hours-2lp1?ref=dailydev)[Complete Flexbox tutorials](https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl?ref=ihatereading)

[](https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl?ref=ihatereading)[Flexbox tutorials and properties](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/?ref=ihatereading)

[](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/?ref=ihatereading)[CSS tutorials and guides](https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/?ref=ihatereading)

[](https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/?ref=ihatereading)[CSS units cheatsheet](https://yurilee.hashnode.dev/css-units-are-confusing-af?ref=dailydev)

[](https://yurilee.hashnode.dev/css-units-are-confusing-af?ref=dailydev)[CSS flexbox cheatsheet](https://aakanksha.hashnode.dev/css-flexbox-cheat-sheet?ref=ihatereading)

[](https://aakanksha.hashnode.dev/css-flexbox-cheat-sheet?ref=ihatereading)[Tailwind CSS cheatsheet](https://flowbite.com/tools/tailwind-cheat-sheet/?ref=ihatereading)

[](https://flowbite.com/tools/tailwind-cheat-sheet/?ref=ihatereading)[CSS flexbox cheatsheet](https://aakanksha.hashnode.dev/css-flexbox-cheat-sheet?ref=ihatereading)

[](https://aakanksha.hashnode.dev/css-flexbox-cheat-sheet?ref=ihatereading)[CSS units cheatsheet](https://www.30secondsofcode.org/css/s/units-cheatsheet/?ref=ihatereading)

[](https://www.30secondsofcode.org/css/s/units-cheatsheet/?ref=ihatereading)[CSS cheatsheet by Devhint](https://devhints.io/css)

[](https://devhints.io/css)[Hackrio cheatsheet CSS](https://hackr.io/blog/css-cheat-sheet)

[](https://hackr.io/blog/css-cheat-sheet)[CSS cheatsheet hostinger tutorials](https://www.hostinger.com/tutorials/css-cheat-sheet)

[](https://www.hostinger.com/tutorials/css-cheat-sheet)[MDN docs for CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

[](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)[CSS practical guide by Topotal](https://www.toptal.com/css/css-cheat-sheet)

[](https://www.toptal.com/css/css-cheat-sheet)[CSS Cheatsheet comprehensive guide](https://codepa.dev/css-cheat-sheet/)

[](https://codepa.dev/css-cheat-sheet/)[CSS cheatsheet single webpage](https://www.petefreitag.com/cheatsheets/css/)

[](https://www.petefreitag.com/cheatsheets/css/)[Flex cheatsheet](https://yoksel.github.io/flex-cheatsheet/)[Guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

## Github Repos

[Cheatsheets-for-developers](https://github.com/AakashRao-dev/cheatsheets-for-developers)[Frontend Cheatsheet](https://github.com/logeshpaul/Frontend-Cheat-Sheets)[Huge Collection of Cheatsheet](https://github.com/JonnyBanana/Huge-Collection-of-CheatSheet)[CSS cheatsheet](https://github.com/AdamMarsden/css-cheat-sheet)[Tailwind CSS cheatsheet](https://github.com/umeshmk/Tailwindcss-cheatsheet)

## PDF doc

[CSS cheatsheet PDF doc](https://websitesetup.org/wp-content/uploads/2019/11/wsu-css-cheat-sheet-gdocs.pdf)