Complete CSS Notes for Interview Preparation
1. What is CSS?
CSS stands for Cascading Style Sheets. It is used to control the style and layout of web pages, including
colors, fonts, spacing, and positioning.
<style>
p {
color: blue;
font-size: 16px;
}
</style>
2. Types of CSS
There are three types:
- Inline CSS
- Internal CSS
- External CSS
<p style="color:red;">Inline</p>
<style>
p {color:green;}
</style>
<link rel="stylesheet" href="[Link]">
3. Selectors
CSS selectors are used to select HTML elements based on their id, class, type, attributes, etc.
* { margin: 0; }
.box { padding: 10px; }
#main { background: yellow; }
4. Box Model
All HTML elements can be considered as boxes. The CSS box model includes: margin, border, padding, and
content.
div {
margin: 20px;
padding: 15px;
border: 2px solid black;
width: 300px;
Complete CSS Notes for Interview Preparation
height: 200px;
}
5. Positioning
CSS position property: static, relative, absolute, fixed, sticky.
#box {
position: absolute;
top: 10px;
left: 20px;
}
6. Flexbox
Flexbox is a layout model that allows items to align and distribute space within a container.
.container {
display: flex;
justify-content: center;
align-items: center;
}
7. Grid
CSS Grid Layout is a 2-dimensional layout system for the web.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
8. Responsive Design
Media queries are used to make web pages look good on all devices.
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
}
}
9. Transitions and Animations
Complete CSS Notes for Interview Preparation
Transitions allow changes to occur smoothly; animations allow keyframe-based effects.
button {
transition: background 0.3s ease;
}
button:hover {
background: red;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 1s infinite;
}
10. Common Properties
Includes: color, background, font-size, text-align, border-radius, box-shadow, z-index, etc.
color: red;
background-color: #f0f0f0;
font-size: 18px;
text-align: center;
border-radius: 10px;
box-shadow: 2px 2px 10px #000;
z-index: 10;