Let’s say you’re building a house. That is the structure provided by HTML. But a wall of bricks and concrete is not conducive to a house, is it? It is there to fill the gap.
It is an abbreviation of Cascading Style Sheets, and it can be thought of as the interior designer of your website. It makes the choices on how things look and feel- this includes colors and fonts on layout, animation, and responsiveness.
CSS-less websites would resemble each other: black letters on a white canvas, no design, no feel. The web is beautiful because of CSS.
Why CSS Matters
Imagine your favorite website. Chances are, you’re remembering:
Clean colors
Cool hover effects
Stylish fonts
A layout that just feels “right”
That’s all CSS. It helps:
Make websites visually appealing
User experience(ux) design
Ensure that sites are attractive under every screen size
The HTML (content) and CSS (design) are divided
CSS can be thought of as the skin, clothing, and personality; HTML can be considered the skeleton.
CSS Basics: Subtopics Explained with Examples
There are three ways to write CSS:
a. Inline CSS
Directly in the HTML tag.
<h1 style=”color: blue;”>Hello!</h1>
Simple, but not ideal for big projects.
b. Internal CSS
Inside a <style> tag in the <head>.
<head>
<style>
p {
color: red;
}
</style>
</head>
c. External CSS
Best practice. You write this in some form, like sta style.css stylesheet, and then fit.
<link rel=”stylesheet” href=”style.css”>
In style.css:
body {
background-color: #f0f0f0;
}
2. Selectors & Properties
CSS uses selectors to target HTML elements, and then properties to style them.
Example:
h1 {
color: green;
font-size: 36px;
text-align: center;
}
You can use:
Tag selectors: p, div, h1
Class selectors .menu, .button (dot in prefix)
ID – страница, #header, #footer (# буква)Group selectors: h1, h2, p { color: blue; }
3. Styling Text and Colors
CSS can style:
Text color → color
Font → font-family
Size → font-size
Line height → line-height
Text alignment → text-align
Example:
p {
color: #333;
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
}
You can also use:
HEX colors (#ff0000)
RGB (rgb(255, 0, 0))
Color names (red, blue)
4. The Box Model
Every element in CSS is like a box with layers:
Content – text or image
Padding – space around content
Border – edge around padding
Margin – space outside the element
Example:
div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Understanding the box model helps you align and space elements properly.
5. Layout: Flexbox and Grid (Basics)
These are modern tools to create layouts without using floats or tables.
Flexbox
Best for 1D layouts (rows or columns).
.container {
display: flex;
justify-content: space-between;
}
Grid
Ideal for 2D layouts (like galleries or dashboards).
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Both enable you to create responsive and well-ordered page layouts without much difficulty.
6. Responsive Design with Media Queries
Websites need to work on phones, tablets,, desktops. Queries enable styles to be applied across different screen sizes.
Example:
@media (max-width: 768px) {
body {
background-color: lightyellow;
}
}
It helps your website columns adjust flow, font, and image size depending on the device.
7. Transitions & Hover Effects
Make elements react when users interact. Example:
button {
background-color: green;
color: white;
transition: background-color 0.3s ease;
}
button: hover {
background-color: darkgreen;
}
This enhances user experience as it makes your site feel interactive.
8. Common Beginner Mistakes in CSS
Forgetting the semicolon after each property
Using IDs when a class would be better
Not understanding how specificity works
Overusing ! important (avoid unless necessary)
Mixing up margin and padding
It happens to everyone, never mind. After a lot of practice, they become second nature.
9. Mini CSS Project Idea: Stylish Card
Try building a simple profile card using CSS:
<div class=”card”>
<h2>Jane Doe</h2>
<p>Frontend Developer</p>
</div>
.card {
background-color: #fff;
padding: 20px;
width: 250px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
Play with colors, borders, shadows, and fonts to personalize it!
Final Thoughts
CSS is strong. You might think that you have to remember a lot, and it may get overwhelming, but it becomes entertaining when you get to watch your changes in real life.
Start small:
Switch the color.
Fashion a button.
Align part of the text.
Shortly, you will create full-responsive and well-designed sites.
Tip: Put it on CodePen, JJSFiddle, or keep your editor open (VS Code, etc).
