Layout
Display
display: block;
display: inline;
display: inline-block;
display: none;
display: flex;
display: grid;
display: inline;
display: inline-block;
display: none;
display: flex;
display: grid;
Position
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: relative;
position: absolute;
position: fixed;
position: sticky;
Float
float: left;
float: right;
float: none;
float: right;
float: none;
Clear
clear: left;
clear: right;
clear: both;
clear: none;
clear: right;
clear: both;
clear: none;
Box Model
Margin
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
margin-top: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
margin-top: 10px;
Padding
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
padding-top: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
padding-top: 10px;
Border
border: 1px solid #000;
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;
Width & Height
width: 100px;
height: 100px;
max-width: 100%;
min-height: 200px;
height: 100px;
max-width: 100%;
min-height: 200px;
Typography
Font
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
Text
color: #333;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 2px 4px #000;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 2px 4px #000;
Line & Spacing
line-height: 1.5;
letter-spacing: 1px;
word-spacing: 2px;
white-space: nowrap;
letter-spacing: 1px;
word-spacing: 2px;
white-space: nowrap;
Colors & Background
Color Values
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
Background
background: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Gradient
background: linear-gradient(red, blue);
background: radial-gradient(circle, red, blue);
background: linear-gradient(45deg, red, blue);
background: radial-gradient(circle, red, blue);
background: linear-gradient(45deg, red, blue);
Flexbox
Container
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-between;
Items
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 1 1 auto;
align-self: flex-start;
flex-shrink: 1;
flex-basis: auto;
flex: 1 1 auto;
align-self: flex-start;
Grid
Container
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-gap: 20px;
grid-template-areas: "header header";
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-gap: 20px;
grid-template-areas: "header header";
Items
grid-column: 1 / 3;
grid-row: 1;
grid-area: header;
justify-self: center;
align-self: end;
grid-row: 1;
grid-area: header;
justify-self: center;
align-self: end;
Transitions & Animations
Transition
transition: all 0.3s ease;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0.1s;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0.1s;
Transform
transform: rotate(45deg);
transform: scale(1.5);
transform: translate(10px, 20px);
transform: skew(10deg, 5deg);
transform: scale(1.5);
transform: translate(10px, 20px);
transform: skew(10deg, 5deg);
Animation
animation: slideIn 0.5s ease-in-out;
animation-name: slideIn;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: slideIn;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
Effects
Shadow
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
text-shadow: 2px 2px 4px #000;
box-shadow: inset 0 0 10px #000;
text-shadow: 2px 2px 4px #000;
box-shadow: inset 0 0 10px #000;
Opacity & Visibility
opacity: 0.5;
visibility: hidden;
visibility: visible;
filter: blur(5px);
visibility: hidden;
visibility: visible;
filter: blur(5px);
Filter
filter: grayscale(100%);
filter: sepia(50%);
filter: brightness(150%);
filter: contrast(200%);
filter: sepia(50%);
filter: brightness(150%);
filter: contrast(200%);
Responsive
Media Query
@media (max-width: 768px) {
/* CSS rules */
}
/* CSS rules */
}
Viewport Units
width: 100vw;
height: 100vh;
font-size: 2vw;
margin: 5vh;
height: 100vh;
font-size: 2vw;
margin: 5vh;
Responsive Images
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
height: auto;
object-fit: cover;
object-position: center;
Pseudo Classes
Dynamic
:hover
:active
:focus
:visited
:active
:focus
:visited
Structural
:first-child
:last-child
:nth-child(2n)
:nth-of-type(3)
:last-child
:nth-child(2n)
:nth-of-type(3)
UI State
:checked
:disabled
:required
:optional
:disabled
:required
:optional
What is CodeSikhoWithAJ?
CodeSikhoWithAJ is a coding education platform dedicated to teaching programming skills to everyone who wants to learn. Our mission is to make coding accessible and help people start their journey in the tech industry.
Founded by Ajeet Yadav, CodeSikhoWithAJ provides comprehensive tutorials, practical examples, and hands-on projects to help you master web development and other programming skills.
Trusted by developers at:
Google
Microsoft
Facebook
Amazon
Netflix
Twitter