Introduction
While HTML gives structure to a web page, it’s CSS that makes it look beautiful.
CSS (Cascading Style Sheets) is a language used to style and layout web pages — controlling things like colors, fonts, spacing, and positioning.
If HTML is the skeleton of a website, CSS is the skin and clothing that make it visually appealing.
What Is CSS?
CSS tells the browser how HTML elements should look.
For example, you can change a paragraph’s color, size, and font with just a few lines of CSS.
Example:
<p>This is a normal paragraph.</p>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
Here’s what’s happening:
p— is the selector (targets all<p>elements).color: blue;— is a property and value pair (it changes the text color to blue).font-size: 18px;— changes the text size.
Ways to Add CSS to a Web Page
There are three main ways to include CSS in an HTML document:
1. Inline CSS
You add CSS directly inside an HTML tag using the style attribute.
<p style="color: red;">This text is red.</p>
2. Internal CSS
You include CSS inside a <style> tag within the <head> section.
<head>
<style>
body {
background-color: lightyellow;
}
</style>
</head>
3. External CSS
You write CSS in a separate .css file and link it using the <link> tag.
<link rel="stylesheet" href="styles.css">
This is the best and cleanest method, especially for large websites.
Basic CSS Selectors
Selectors are patterns used to target specific HTML elements.
| Selector Type | Example | What It Targets |
|---|---|---|
| Element | p | All <p> tags |
| Class | .intro | All elements with class intro |
| ID | #main | The element with ID main |
| Group | h1, h2 | Both <h1> and <h2> |
Example:
.intro {
color: green;
}
#main {
background-color: lightgray;
}
Styling Text and Colors
CSS allows you to make text stand out beautifully.
h1 {
color: darkblue;
text-align: center;
font-family: 'Arial', sans-serif;
}
p {
color: #555;
line-height: 1.6;
}
Common Text Properties
- color: Changes text color.
- font-size: Sets the size of text.
- font-family: Chooses the typeface.
- text-align: Aligns text (left, center, right).
- line-height: Controls space between lines.
Working with Layouts
CSS isn’t just for colors and fonts — it also defines how elements are positioned and arranged on the page.
1. The Box Model
Every HTML element is treated like a box, with four parts:
- Content – The text or image itself.
- Padding – Space between content and border.
- Border – The edge surrounding the element.
- Margin – Space outside the element.
Example:
div {
margin: 20px;
padding: 10px;
border: 2px solid black;
}
2. Display and Position
- block: Starts on a new line (e.g.,
<div>). - inline: Sits beside other elements (e.g.,
<span>). - flex: Arranges elements neatly in rows or columns.
- grid: Creates advanced layouts using rows and columns.
Example using Flexbox:
.container {
display: flex;
justify-content: space-between;
}
3. Responsive Design
You can make websites adapt to any device using media queries.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This changes the background color for screens smaller than 600px — great for mobile devices.
Conclusion
CSS transforms plain HTML into a visually engaging experience.
It lets you define colors, spacing, and layout — bringing your website to life.
Once you grasp the basics, you can move on to advanced techniques like Flexbox, Grid, and animations to design modern, responsive websites.