CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an HTML document. It controls how elements appear on a web page — including layout, colors, fonts, spacing, and responsiveness.
Instead of writing styles directly inside HTML tags, CSS allows you to separate content (HTML) from design (CSS), making websites easier to manage and style consistently.
Types of CSS
There are three main types of CSS, and each has a specific way of being applied:
1. Inline CSS
-
CSS is written directly inside the HTML element using the
styleattribute. -
Useful for applying a style to a single element only.
-
Not recommended for large projects due to poor readability and reusability.
Example:
2. Internal CSS
-
CSS is written inside a
<style>tag within the<head>section of an HTML document. -
Used when you want to style a single HTML page.
Example:
External CSS
-
CSS is written in a separate
.cssfile and linked to an HTML document. -
Ideal for styling multiple web pages with a consistent look.
-
Promotes clean code and easy maintenance.
Example:
Create a file called style.css:
Link it to your HTML file:
Why Use CSS?
-
Separation of content and design
-
Reusability across multiple pages
-
Responsive and flexible layouts
-
Easy updates to website look-and-feel
-
Better website performance and organization
How to Write CSS (Basic Syntax)
Example:
In the above example:
-
pis the selector (targets all paragraph tags) -
colorandfont-sizeare properties -
blackand14pxare the values
How to Link CSS to HTML
For external CSS, use the following code inside the <head> section of your HTML file:
Make sure:
-
The CSS file is saved with a
.cssextension -
The
hrefpath is correct (relative or absolute path)
Summary
| Type | Location | Scope | Use Case |
|---|---|---|---|
| Inline | Inside element | One element | Quick testing or fixes |
| Internal | Inside <style> |
One HTML page | Page-specific styling |
| External | Separate file | Multiple HTML pages | Large sites, best practice |
