CSS Cheat Sheet with Property Name and Value PDF Download

Hey there, for you here I have created a CSS cheatsheet with property names, descriptions, and simple examples with syntax: I hope this CSS cheatsheet will be helpful for you to quickly revise all the CSS topics 🤩

1. color

This property is used to set the text color of an element.

p {

  color: blue;

}

2. font-size

The font-size property is used to define the size of the text font.

h1 {

  font-size: 24px;

}

3. font-family

This property is used to specify the font for text content.

body {

  font-family: Arial, sans-serif;

}

4. text-align

text-align property is used to control the horizontal alignment of text.

div {

  text-align: center;

}

5. background-color

background-color property is used to set the background color of an HTML element.

button {

  background-color: #e65b00;

}

6. border

The border property is used to create a border around an element.

.box {

  border: 2px solid #e65b00;

}

7. margin

margin property is used to define space outside of an element's border.

img {

  margin: 10px;

}

8. width

width is used to specify the width of an element.

.container {

  width: 80%;

}

9. display

The display property in CSS is used to determine how an element is displayed.

ul {

  display: inline-block;

}

10. position

This property is used to define the positioning method of an element.

.header {

  position: fixed;

  top: 0;

}

Also Read: Learn CSS Position: Click Here

11. padding

padding property is used to set space inside the border and outside of an element.

.container {

  padding: 20px;

}

12. height

This CSS property is used to set the height of an element.

.header {

  height: 100px;

}

13. line-height

line-height CSS property controls the height of a line of text.

p {

  line-height: 1.5;

}

14. text-decoration

The text-decoration property adds decoration to text, like underlines, line-through, etc.

a {

  text-decoration: underline;

}

15. list-style

This CSS property is used to set the style of list items.

ul {

  list-style: square inside;

}

16. text-transform

text-transform property changes the text casing.

h2 {

  text-transform: uppercase;

}

17. box-shadow

The box-shadow property is used to add a shadow to an element.

.card {

  box-shadow: 2px 2px 4px #888888;

}

18. border-radius

This CSS property is used to make rounded corners of an element's border.

.rounded-box {

  border-radius: 10px;

}

19. text-shadow

The text-shadow property is used to create a shadow behind text.

h1 {

  text-shadow: 2px 2px 3px #e65b00;

}

20. background-image

The background-image CSS property is used to set an image as the background of an element.

.hero {

  background-image: url('background.jpg');

}

21. opacity

This CSS property is used to adjust the transparency of an element.

.element {

  opacity: 0.7;

}

22. overflow

The overflow CSS property controls how content that overflows an element is handled.

.container {

  overflow: hidden;

}

23. text-overflow

text-overflow CSS property defines how overflowing text is indicated when truncated.

.ellipsis-text {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

24. text-indent

This CSS property sets the indentation of the first line of text.

p {

  text-indent: 20px;

}

25. box-sizing

The box-sizing property defines how the box model should be calculated.

.box {

  box-sizing: border-box;

}

Also Read: CSS Interview Questions and Answers for Freshers: Click Here

26. transition

transition property is used to add smooth transitions when a property changes.

.button {

  transition: background-color 0.3s ease;

}

27. transform

The transform CSS property is used to apply 2D or 3D transformations to HTML elements.

.element {

  transform: rotate(45deg);

}

28. cursor

This CSS property specifies the type of cursor to be displayed when a user hover on elements.

.link {

  cursor: pointer;

}

29. text-align

This property controls the alignment of text within an element.

.centered-text {

  text-align: center;

}

30. white-space

white-space CSS property is used to determine how white space within an element is handled.

.no-wrap {

  white-space: nowrap;

}

31. letter-spacing

The letter-spacing CSS property adjusts the space between characters in text.

h1 {

  letter-spacing: 2px;

}

32. word-spacing

This CSS property is used to set the space between words in text.

p {

  word-spacing: 5px;

}

33. outline

outline CSS property is used to add an outline around an element, and outside the border.

button:hover{

  outline: 2px solid #FF0000;

}

34. text-align-last

The text-align-last CSS property is used to align the last line of text in a block element.

p {

  text-align-last: center;

}

35. border-collapse

This CSS property defines how HTML table borders are collapsed into a single border.

table {

  border-collapse: collapse;

}

36. visibility

The visibility property is used to control the visibility of an element.

.hidden {

  visibility: hidden;

}

37. text-justify

The text-justify property specifies how text should be justified in a text container.

p {

  text-justify: inter-word;

}

38. box-decoration-break

The box-decoration-break CSS property determines how box decoration properties are applied to broken inline boxes.

.text-box {

  box-decoration-break: clone;

}

39. text-rendering

This property specifies the quality of text rendering.

.high-quality {

  text-rendering: optimizeLegibility;

}

40. clip-path

The CSS clip-path property clips an element's content to a basic shape or a more complex path.

.custom-shape {

  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

}

41. perspective

This CSS property specifies the perspective from which 3D transformed elements are viewed.

.card {

  perspective: 1000px;

}

42. transform-style

The transform -style property defines how child elements of a 3D-transformed element are rendered in HTML.

.parent {

  transform-style: preserve-3d;

}

43. backface-visibility

backface-visibility property determines whether the backside of 3D-transformed elements is visible.

.element {

  backface-visibility: hidden;

}

44. column-count

This property sets the number of columns an element should be divided into.

.column-layout {

  column-count: 3;

}

Also Read: 30 Days 30 Projects JavaScript: Click Here

45. column-gap

The column-gap CSS property defines the space between columns in a multi-column layout.

.column-layout {

  column-gap: 20px;

}

46. column-rule

The column-rule CSS property combines column rule width, style, and color in one property like border.

.column-layout {

  column-rule: 2px solid #e65b00;

}

47. text-orientation

This CSS property sets the orientation of text within its line box.

.vertical-text {

  text-orientation: upright;

}

48. shape-outside

The shape-outside CSS property specifies a shape that content should wrap around.

.text-wrap {

  shape-outside: circle(50%, 50%, 50%);

}

49. grid-template-columns

The grid-template-columns CSS property defines the size of columns in a grid layout.

.grid-container {

  grid-template-columns: 1fr 2fr 1fr;

}

50. grid-template-rows

The grid-template-rows CSS property defines the size of rows in a grid layout.

.grid-container {

  grid-template-rows: 100px auto 50px;

}

51. grid-gap

This CSS property is used to set the gap between grid rows and columns.

.grid-container {

  grid-gap: 10px;

}

52. grid-auto-rows

This CSS property is used to specify the size of rows created by the grid auto-placement.

.grid-item {

  grid-auto-rows: 150px;

}

53. grid-auto-columns

The grid-auto-columns CSS property is used to define the size of columns created by the grid auto-placement.

.grid-item {

  grid-auto-columns: 200px;

}

54. grid-template-areas

The CSS grid-template-areas property is used for Names and assigns areas to grid layout items.

.grid-container {

  grid-template-areas:

    "header header header"

    "main main sidebar"

    "footer footer footer";

}

55. text-overflow

This CSS property specifies what should happen when text overflows its containing element.

.ellipsis-text {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

56. direction

The CSS direction property is used to define the direction of text, either left-to-right or right-to-left.

.rtl-text {

  direction: rtl;

}

57. justify-content

The justify-content CSS property is used to align content horizontally within a flex or grid container.

.flex-container {

  justify-content: space-between;

}

58. align-items

The justify-items CSS property is used to align items vertically within a flex or grid container.

.flex-container {

  align-items: center;

}

59. text-align-last

This CSS property sets the alignment of the last line of text in a block container.

p {

  text-align-last: right;

}

60. list-style-type

The list-style-type CSS property is used to specify the type of bullet or numbering for list items.

ul {

  list-style-type: square;

}

Also Read: 50 HTML Tags and their functions with Example: Click Here

I hope this CSS cheatsheet with property name and values will be helpful for you. And you will defiantly enjoy this and also you will use it as reference while building projects. So you can now download PDF of this CSS cheatsheet from the link given below 👇🏻  

CSS Cheat Sheet with Property Name and Value PDF Download: Download Now