CSS stands for Cascading Style Sheets. It is used to design the website. HTML is the skeleton, CSS is the clothes and makeup. It makes the website colorful, beautiful, and mobile-friendly.
CSS controls the look and feel. With CSS we can change colors, fonts, sizes, and spacing. Without CSS, website looks like plain black and white text.
Example: body { color: white; }
Selector tells which HTML element to style. We have tag selector, class selector with dot, and id selector with hash.
Example: .box { } is class, #header { } is id
In CSS, color property changes text color and background-color changes box color. We can use color names, HEX codes like #D4AF37 golden, or RGB.
Example: h1 { color: #D4AF37; }
The CSS Box Model is the most important concept. Every element is a box. It has 4 parts: Content, Padding, Border, and Margin. Padding is inside space, Margin is outside space.
Example: .box { padding: 20px; margin: 10px; }
Flexbox is used to arrange boxes in a row or column. It makes the layout responsive. display: flex makes items side by side easily.
Example: .container { display: flex; }
hover changes style when mouse goes over the box. Media query makes website mobile-friendly. It changes design on small screens.
Example: .box:hover { border-color: gold; }