All CSS Properties...

For more refer CSS Tutorial (w3schools.com).

All CSS Units

Unit	Description	Example
`px`	Represents a fixed-size unit that is relative to the screen's pixel density.	`margin: 10px;`
`em`	Represents a relative unit based on the font size of its parent element. It compounds if used in nested elements.	`font-size: 1.2em;`
`rem`	Similar to `em`, but relative to the font size of the root (top-level) element, providing consistent sizing across the page.	`font-size: 1.5rem;`
`vw`	Represents a percentage of the viewport width, making it useful for creating responsive designs.	`width: 10vw;`
`vh`	Represents a percentage of the viewport height, useful for creating responsive designs.	`height: 50vh;`
`vmin`	Represents a percentage of the smaller of the viewport's width and height, ensuring the element fits within the viewport.	`padding: 2vmin;`
`vmax`	Represents a percentage of the larger of the viewport's width and height, ensuring the element scales appropriately.	`margin: 3vmax;`
`%`	Represents a percentage of the parent element's dimensions, providing relative sizing within its container.	`width: 50%;`
`in`	Represents inches, an absolute unit commonly used for print styles.	`width: 2in;`
`cm`	Represents centimeters, another absolute unit used in print styles.	`margin: 1cm;`
`mm`	Represents millimeters, an absolute unit used in print styles.	`padding: 5mm;`
`pt`	Represents points, another absolute unit mainly used for print styles where 1 point is approximately 1/72 of an inch.	`font-size: 12pt;`
`pc`	Represents picas, an absolute unit often used in typography where 1 pica is approximately 12 points.	`line-height: 1.5pc;`
`ex`	Represents the x-height of a font, which is the height of the lowercase 'x'. It's a relative unit and can vary depending on the font used.	`line-height: 2ex;`
`ch`	Represents the width of the "0" (zero) character in the font, a relative unit useful for aligning characters and creating monospace layouts.	`width: 20ch;`

In responsive web design, certain CSS length units are commonly used to create layouts that adapt well to various screen sizes and devices.

em and rem: These relative units are frequently used for font sizes and spacing. em is relative to the font size of the parent element, while rem is relative to the root (html) font size, providing a consistent scale across the entire page.
vw and vh: These units represent percentages of the viewport width and height, respectively. They are valuable for creating fluid and responsive layouts.
%: Percentage units are versatile and can be used for various properties like width, height, margins, and padding. They scale relative to the parent element.
px: Although not inherently responsive, using px for certain fixed elements or sizes can offer control and predictability. Combining px with other units in media queries can create responsive breakpoints.
rem and em for Media Queries: These units can also be used within media queries to create breakpoints that adapt to changes in font size. This can help maintain the design's proportions as the viewport size changes.
vmin and vmax: These units are helpful for maintaining proportions across different screen orientations (portrait and landscape) while adapting to both width and height changes.

All Alignment Properties

/* Flexbox Alignment */

/* Justify Content */
justify-content: flex-start;     /* Align items along the main axis */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

/* Align Items */
align-items: flex-start;         /* Align items along the cross axis */
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;

/* Align Content */
align-content: flex-start;       /* Align multiple lines along the cross axis */
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* Align Self */
align-self: auto;               /* Override alignment for a single flex item */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* Grid Alignment */

/* Justify Items */
justify-items: start;           /* Align grid items inside their cells */
justify-items: end;
justify-items: center;
justify-items: stretch;

/* Align Items */
align-items: start;             /* Align grid items along the block axis */
align-items: end;
align-items: center;
align-items: stretch;

/* Justify Content */
justify-content: start;         /* Align grid tracks within the container */
justify-content: end;
justify-content: center;
justify-content: stretch;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

/* Align Content */
align-content: start;           /* Align grid tracks along the block axis */
align-content: end;
align-content: center;
align-content: stretch;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

/* Grid Item Alignment */

/* Justify Self */
justify-self: start;            /* Align individual grid items along the inline axis */
justify-self: end;
justify-self: center;
justify-self: stretch;

/* Align Self */
align-self: start;              /* Align individual grid items along the block axis */
align-self: end;
align-self: center;
align-self: stretch;

/* Table Alignment */

/* Caption Side */
caption-side: top;             /* Position the table caption */

/* Table Layout */
table-layout: fixed;           /* Use a fixed table layout algorithm */

/* Border Collapse */
border-collapse: collapse;     /* Collapse table borders */

/* Vertical Align */
vertical-align: baseline;      /* Align inline elements vertically */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

/* Positioning Alignment */

/* Float */
float: left;                   /* Float an element to the left */
float: right;
float: none;

/* Clear */
clear: left;                   /* Prevent wrapping around floated elements */
clear: right;
clear: both;

/* Text Alignment */

/* Text Align */
text-align: left;              /* Align text horizontally within an element */
text-align: right;
text-align: center;
text-align: justify;

/* Text Align Last */
text-align-last: left;         /* Align last line of text in a block */
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/* Vertical Align */
vertical-align: baseline;      /* Align inline elements vertically */
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;

/* Overflow Alignment */

/* Overflow */
overflow: visible;             /* Control content overflow behavior */
overflow: hidden;
overflow: scroll;
overflow: auto;

/* Overflow X */
overflow-x: visible;           /* Control horizontal overflow behavior */
overflow-x: hidden;
overflow-x: scroll;
overflow-x: auto;

/* Overflow Y */
overflow-y: visible;           /* Control vertical overflow behavior */
overflow-y: hidden;
overflow-y: scroll;
overflow-y: auto;

/* Floating and Clearing */

/* Float */
float: left;                   /* Float an element to the left */
float: right;
float: none;

/* Clear */
clear: left;                   /* Prevent wrapping around floated elements */
clear: right;
clear: both;

/* Text Wrapping and Spacing */

/* Word Break */
word-break: normal;            /* Control word breaking in non-CJK languages */
word-break: break-all;
word-break: keep-all;

/* Word Wrap */
word-wrap: normal;             /* Control word wrapping in long words */
word-wrap: break-word;

/* White Space */
white-space: normal;           /* Control handling of whitespace in text */
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;

/* List Alignment */

/* List Style Position */
list-style-position: outside;  /* Position of the list marker */
list-style-position: inside;

/* List Item Alignment */
li {
    list-style-type: none;     /* Remove default list markers */
    margin-left: 20px;         /* Indent list items */
    padding-left: 10px;        /* Add padding for bullet */
    text-indent: -10px;        /* Adjust text indent to align with bullet */
}

/* Line Height and Spacing */

/* Line Height */
line-height: normal;           /* Set the space between lines of text */
line-height: 1.5;

/* Letter Spacing */
letter-spacing: normal;        /* Control spacing between characters */

/* Word Spacing */
word-spacing: normal;          /* Control spacing between words */

/* Vertical Alignment */

/* Vertical Align */
vertical-align: baseline;      /* Align inline elements vertically */
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* Text Decoration Alignment */

/* Text Decoration */
text-decoration: none;        /* Add or remove text decorations */
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

/* Text Emphasis Alignment */
text-emphasis: filled blue;   /* Apply emphasis marks to text */
text-emphasis: open red;

/* Background Alignment */

/* Background Attachment */
background-attachment: scroll; /* Control background scrolling behavior */
background-attachment: fixed;
background-attachment: local;

/* Background Position */
background-position: top left; /* Set background image starting position */
background-position: center center;
background-position: bottom right;

/* Outline Alignment */

/* Outline */
outline: 1px solid blue;      /* Add an outline around an element */
outline-offset: 2px;          /* Offset the outline from the element */

/* Box Alignment */

/* Box Sizing */
box-sizing: content-box;     /* How width and height are calculated */
box-sizing: border-box;

/* Float and Clear Alignment */

/* Float */
float: left;                  /* Float an element to the left */
float: right;
float: none;

/* Clear */
clear: left;                  /* Prevent wrapping around floated elements */
clear: right;
clear: both;

All grid and flex properties

/* Grid Container Properties */

/* Display */
display: grid;                /* Create a grid container */
display: inline-grid;

/* Grid Template Columns and Rows */
grid-template-columns: 1fr 2fr; /* Define column sizes */
grid-template-rows: auto auto; /* Define row sizes */

/* Grid Gap */
grid-gap: 10px;               /* Set gap between grid items */

/* Grid Template Areas */
grid-template-areas:
  "header header"
  "nav main"
  "footer footer";            /* Define grid areas */

/* Justify and Align Tracks */
justify-items: center;       /* Align items along the block axis */
align-items: center;         /* Align items along the inline axis */

/* Grid Auto Flow */
grid-auto-flow: row;         /* Define how auto-placed items are positioned */

/* Grid Auto Columns and Rows */
grid-auto-columns: 100px;    /* Define size of auto-placed columns */
grid-auto-rows: minmax(50px, auto); /* Define size of auto-placed rows */

/* Grid Container Alignment */
justify-content: center;    /* Align grid tracks within the container */
align-content: space-between;

/* Grid Item Properties */

/* Grid Column and Row Start/End */
grid-column-start: 2;        /* Starting position of an item in a grid */
grid-column-end: 4;          /* Ending position of an item in a grid */
grid-row-start: 1;
grid-row-end: span 2;

/* Justify Self and Align Self */
justify-self: start;        /* Align individual grid items along the inline axis */
align-self: end;            /* Align individual grid items along the block axis */

/* Grid Area */
grid-area: main;            /* Place an item in a named grid area */

/* Flexbox Layout Properties */

/* Flex Container Properties */

/* Display */
display: flex;              /* Create a flex container */
display: inline-flex;

/* Flex Direction */
flex-direction: row;        /* Arrange items in a row (default) */
flex-direction: column;     /* Arrange items in a column */
flex-direction: row-reverse;

/* Flex Wrap */
flex-wrap: nowrap;          /* No wrapping of flex items (default) */
flex-wrap: wrap;            /* Allow wrapping of flex items */
flex-wrap: wrap-reverse;

/* Justify Content */
justify-content: flex-start;/* Align items along the main axis */
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: flex-end;

/* Align Items */
align-items: flex-start;    /* Align items along the cross axis */
align-items: center;
align-items: baseline;
align-items: stretch;
align-items: flex-end;

/* Align Content */
align-content: flex-start;  /* Align multiple lines along the cross axis */
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: flex-end;

/* Flex Item Properties */

/* Flex */
flex: 1;                   /* Grow, shrink, and basis in shorthand */
flex: 2 1 200px;            /* Flex-grow, flex-shrink, flex-basis */

/* Order */
order: 2;                  /* Specify order of flex items */

/* Align Self */
align-self: flex-start;    /* Align individual flex items along the cross axis */
align-self: center;
align-self: flex-end;

/* Flex Grow and Shrink */
flex-grow: 1;              /* Grow factor of a flex item */
flex-shrink: 0;            /* Shrink factor of a flex item */

/* Flex Basis */
flex-basis: 300px;         /* Initial size of a flex item */

/* Flex Flow */
flex-flow: row nowrap;     /* Shorthand for flex-direction and flex-wrap */

/* Justify Self */
justify-self: flex-start;  /* Align individual flex items along the main axis */
justify-self: center;
justify-self: flex-end;

All box model properties

/* Width and Height */
width: 200px;                /* Set the width of an element */
min-width: 100px;            /* Set the minimum width */
max-width: 500px;            /* Set the maximum width */
height: 150px;               /* Set the height of an element */
min-height: 50px;            /* Set the minimum height */
max-height: 300px;           /* Set the maximum height */

/* Margin */
margin: 10px;                /* Set margin on all sides */
margin: 10px 20px;           /* Set margin vertically and horizontally */
margin-top: 10px;            /* Set margin on the top */
margin-right: 20px;          /* Set margin on the right */
margin-bottom: 15px;         /* Set margin on the bottom */
margin-left: 5px;            /* Set margin on the left */
/* Margin Shorthand */
margin: 10px;                 /* Apply same margin to all sides */
margin: 10px 20px;            /* Apply vertical and horizontal margins */
margin: 10px 20px 30px;       /* Apply top, horizontal, and bottom margins */
margin: 10px 20px 30px 40px;  /* Apply top, right, bottom, and left margins */



/* Padding */
padding: 10px;               /* Set padding on all sides */
padding: 10px 20px;          /* Set padding vertically and horizontally */
padding-top: 10px;           /* Set padding on the top */
padding-right: 20px;         /* Set padding on the right */
padding-bottom: 15px;        /* Set padding on the bottom */
padding-left: 5px;           /* Set padding on the left */

/* Border */
border: 1px solid #000;      /* Set a border on all sides */
border-width: 2px;           /* Set border width on all sides */
border-color: #333;          /* Set border color on all sides */
border-top: 2px solid red;   /* Set border on the top */
border-right: 2px solid blue; /* Set border on the right */
border-bottom: 2px solid green; /* Set border on the bottom */
border-left: 2px solid orange; /* Set border on the left */
/* Individual Border Sides */
border-top: 1px solid blue;   /* Apply border to the top side */
border-right: 2px dashed green; /* Apply border to the right side */
border-bottom: 1px dotted orange; /* Apply border to the bottom side */
border-left: 2px double purple; /* Apply border to the left side */


/* Border Radius */
border-radius: 10px;         /* Set border radius for all corners */
border-top-left-radius: 5px; /* Set border radius for specific corners */
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* Border Radius Shorthand */
border-radius: 4px;           /* Apply same radius to all corners */
border-radius: 10px 20px;     /* Apply horizontal and vertical radii */
border-radius: 10px 20px 30px; /* Apply top-left, top-right, and bottom radii */
border-radius: 10px 20px 30px 40px; /* Apply top-left, top-right, bottom-right, and bottom-left radii */


/* Box Sizing */
box-sizing: content-box;     /* Include only content within width and height */
box-sizing: border-box;      /* Include content, padding, and border within width and height */
box-sizing: padding-box;     /* Include content and padding within width and height */

All Typography properties

/* Font Family */
font-family: Arial, sans-serif; /* Specify font family for text */
font-family: "Times New Roman", serif;

/* Font Size */
font-size: 16px;               /* Set the font size */
font-size: 1.2rem;             /* Set the font size using relative units */

/* Font Style */
font-style: normal;            /* Set font style to normal */
font-style: italic;            /* Set font style to italic */

/* Font Weight */
font-weight: normal;           /* Set font weight to normal */
font-weight: bold;             /* Set font weight to bold */

/* Text Transform */
text-transform: uppercase;     /* Transform text to uppercase */
text-transform: lowercase;     /* Transform text to lowercase */
text-transform: capitalize;    /* Transform text to capitalize */

/* Text Decoration */
text-decoration: none;         /* Remove text decoration */
text-decoration: underline;    /* Add underline to text */
text-decoration: overline;     /* Add overline to text */
text-decoration: line-through; /* Add line-through to text */

/* Text Align */
text-align: left;              /* Align text to the left */
text-align: center;            /* Align text to the center */
text-align: right;             /* Align text to the right */
text-align: justify;           /* Justify text */

/* Line Height */
line-height: 1.5;              /* Set the line height */
line-height: 150%;             /* Set the line height as a percentage */

/* Letter Spacing */
letter-spacing: 2px;           /* Set letter spacing */

/* Word Spacing */
word-spacing: 5px;             /* Set word spacing */

/* White Space */
white-space: normal;           /* Normal whitespace handling */
white-space: nowrap;           /* Prevent text from wrapping */
white-space: pre;              /* Preserve whitespace formatting */

/* Text Shadow */
text-shadow: 1px 1px 2px #999; /* Apply shadow to text */

/* Text Overflow */
text-overflow: ellipsis;       /* Show ellipsis (...) when text overflows a container */

/* Overflow Wrap */
overflow-wrap: normal;         /* Control word wrapping in long words */
overflow-wrap: break-word;

/* Word Break */
word-break: normal;            /* Control word breaking in non-CJK languages */
word-break: break-all;

/* Hyphens */
hyphens: manual;               /* Control hyphenation of words */
hyphens: auto;

/* Vertical Alignment */
vertical-align: baseline;      /* Align inline elements vertically */
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;

/* Direction */
direction: ltr;                /* Set text direction to left-to-right */
direction: rtl;                /* Set text direction to right-to-left */

All Media Queries

/* Basic Media Query Syntax */

/* Apply styles when the viewport width is 600px or less */
@media (max-width: 600px) {
  /* CSS rules for smaller screens */
}

/* Apply styles when the viewport width is 601px or more */
@media (min-width: 601px) {
  /* CSS rules for larger screens */
}

/* Apply styles when the viewport width is between 601px and 900px */
@media (min-width: 601px) and (max-width: 900px) {
  /* CSS rules for screens between 601px and 900px */
}


/* Common Media Query Breakpoints */

/* Extra Small Devices (Phones) */
@media (max-width: 575.98px) {
  /* Styles for extra small screens */
}

/* Small Devices (Tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Styles for small screens */
}

/* Medium Devices (Laptops) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Styles for medium screens */
}

/* Large Devices (Desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Styles for large screens */
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1200px) {
  /* Styles for extra large screens */
}


/* Orientation Media Queries */

/* Apply styles when the device is in portrait orientation */
@media (orientation: portrait) {
  /* Portrait-specific styles */
}

/* Apply styles when the device is in landscape orientation */
@media (orientation: landscape) {
  /* Landscape-specific styles */
}


/* Device Feature Media Queries */

/* Apply styles when the device supports hover interactions */
@media (hover: hover) {
  /* Styles for devices with hover support */
}

/* Apply styles when the device does not support hover interactions */
@media (hover: none) {
  /* Styles for devices without hover support */
}

/* Apply styles when the device has a high-resolution display (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Styles for high-resolution displays */
}

All Animation properties

/* Animation Keyframes */

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}


/* Animation Basic Properties */

/* Apply the "slide" animation */
animation-name: slide;

/* Duration */
animation-duration: 2s;        /* Set the duration of the animation */

/* Timing Function */
animation-timing-function: ease-in-out; /* Set the timing function */

/* Delay */
animation-delay: 0.5s;         /* Set a delay before the animation starts */

/* Iteration Count */
animation-iteration-count: infinite; /* Set the number of times the animation repeats */

/* Direction */
animation-direction: alternate; /* Set the direction of the animation */

/* Fill Mode */
animation-fill-mode: forwards; /* Set the style applied when animation ends */

/* Play State */
animation-play-state: running; /* Control the animation's running state */


/* Animation Shorthand */

/* Shorthand for all animation properties */
animation: slide 2s ease-in-out 0.5s infinite alternate forwards;

All Form Properties

/* Input Styling */

/* Text Input */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;               /* Set input width */
  padding: 10px;             /* Set padding */
  border: 1px solid #ccc;    /* Set border */
  border-radius: 4px;        /* Set border radius */
}

/* Checkbox */
input[type="checkbox"] {
  margin-right: 5px;         /* Add margin to checkbox */
  vertical-align: middle;    /* Align vertically */
}

/* Radio Button */
input[type="radio"] {
  margin-right: 5px;         /* Add margin to radio button */
  vertical-align: middle;    /* Align vertically */
}

/* Select Dropdown */
select {
  width: 100%;               /* Set width */
  padding: 10px;             /* Set padding */
  border: 1px solid #ccc;    /* Set border */
  border-radius: 4px;        /* Set border radius */
  appearance: none;          /* Remove default styles on some browsers */
}

/* Textarea */
textarea {
  width: 100%;               /* Set width */
  padding: 10px;             /* Set padding */
  border: 1px solid #ccc;    /* Set border */
  border-radius: 4px;        /* Set border radius */
}

/* Form Styling */

/* Form Container */
form {
  width: 300px;              /* Set form width */
  margin: 0 auto;            /* Center align form */
}

/* Submit Button */
input[type="submit"] {
  padding: 10px 20px;        /* Set padding */
  background-color: #007bff; /* Set background color */
  color: #fff;              /* Set text color */
  border: none;             /* Remove border */
  border-radius: 4px;       /* Set border radius */
  cursor: pointer;          /* Add pointer cursor */
}

/* Form Fieldset */
fieldset {
  border: 1px solid #ccc;   /* Set border */
  padding: 20px;            /* Set padding */
  border-radius: 4px;       /* Set border radius */
}

/* Form Legend */
legend {
  font-weight: bold;        /* Set font weight */
}

All essential properties which are needed for website building

/* Layout and Box Model */

/* Width and Height */
width: 100%;                  /* Set element width */
height: 300px;                /* Set element height */

/* Margin and Padding */
margin: 10px;                 /* Set margin */
padding: 10px;                /* Set padding */

/* Display */
display: block;               /* Display as block-level element */
display: inline-block;        /* Display as inline-block element */
display: none;                /* Hide element from display */

/* Positioning */
position: relative;           /* Set positioning to relative */
position: absolute;           /* Set positioning to absolute */
position: fixed;              /* Set positioning to fixed */
top: 0;                       /* Position from top */
left: 20px;                   /* Position from left */
z-index: 1;                   /* Set stacking order */

/* Float and Clear */
float: left;                  /* Float element to the left */
float: right;                 /* Float element to the right */
clear: both;                  /* Clear floated elements */

/* Flexbox */
display: flex;                /* Create a flex container */
justify-content: center;      /* Align items along the main axis */
align-items: center;          /* Align items along the cross axis */
flex-direction: row;          /* Arrange items in a row */
flex-wrap: wrap;              /* Allow wrapping of flex items */

/* Grid */
display: grid;                /* Create a grid container */
grid-template-columns: 1fr 2fr; /* Define columns in a grid */
grid-gap: 10px;               /* Set gap between grid items */

/* Typography */

/* Font Family and Size */
font-family: Arial, sans-serif; /* Set font family */
font-size: 16px;              /* Set font size */

/* Text Color and Alignment */
color: #333;                  /* Set text color */
text-align: center;           /* Align text horizontally */

/* Line Height and Spacing */
line-height: 1.5;              /* Set line height */
letter-spacing: 1px;           /* Set letter spacing */

/* Border and Background */

/* Border */
border: 1px solid #ccc;       /* Set border */
border-radius: 4px;           /* Set border radius */

/* Background Color and Image */
background-color: #f0f0f0;    /* Set background color */
background-image: url("bg.jpg"); /* Set background image */

/* Background Size and Position */
background-size: cover;       /* Scale background image to cover element */
background-position: center;  /* Set background image position */

/* Effects and Transitions */

/* Box Shadow */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Apply box shadow */

/* Transition */
transition: all 0.3s ease-in-out; /* Apply transition effect */

/* Hover Effect */
element:hover {
  /* Apply styles on hover */
}

/* Media Queries */

/* Responsive Design */
@media (max-width: 768px) {
  /* Styles for smaller screens */
}

All CSS Properties...

Table of contents

All CSS Units

In responsive web design, certain CSS length units are commonly used to create layouts that adapt well to various screen sizes and devices.

All Alignment Properties

All grid and flex properties

All box model properties

All Typography properties

All Media Queries

All Animation properties

All Form Properties

All essential properties which are needed for website building