What is CSS?
CSS, short for Cascading Style Sheets, is a stylesheet language that defines how HTML elements should be displayed on a webpage. While HTML provides the structure and content (such as headings, paragraphs, links, and images), CSS controls the appearance (such as colors, fonts, spacing, layout, and responsiveness). This separation of structure and presentation makes web development cleaner, more efficient, and easier to maintain.
Think of it this way: if HTML is the skeleton of a house, CSS is the paint, furniture, decorations, and layout that make the house visually appealing and comfortable.
Why CSS is Important
- Separation of concerns – HTML defines content, CSS defines design.
- Consistency – External CSS files ensure consistent styling across multiple pages.
- Flexibility – Developers can change the look and feel of an entire website by editing a single stylesheet.
- Responsive design – CSS enables websites to adapt to different devices and screen sizes.
- Performance – Well-written CSS reduces inline duplication and makes web pages load faster.
Types of CSS
There are three primary ways to apply CSS to HTML: inline, internal, and external. Each method has its own use cases, advantages, and limitations.
1. Inline CSS
Inline CSS is written directly inside an HTML element’s style attribute.
Example:
<p style="color: red;">Hello, this is inline CSS</p>
Advantages:
- Quick to apply for a single element.
- Useful for testing or overriding specific styles temporarily.
Disadvantages:
- Not reusable – every element needs its own style.
- Leads to cluttered and hard-to-maintain code.
- Reduces separation of structure and design.
When to use: Rarely, except for small tweaks, testing, or email templates.
2. Internal CSS
Internal CSS is defined inside a <style> block within the <head> section of an HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Hello, this is internal CSS</p>
</body>
</html>
Advantages:
- Keeps styles in one place for a single page.
- Easy to apply consistent styling across that page.
Disadvantages:
- Not reusable across multiple pages.
- Increases page size if many styles are repeated on different pages.
When to use: Useful for single-page projects or prototypes.
3. External CSS
External CSS is stored in a separate .css file and linked to HTML with a <link> element.
Example:
<!-- HTML file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello, this is external CSS</p>
</body>
</html>
/* style.css */
p {
color: green;
font-size: 20px;
}
Advantages:
- Keeps HTML clean and free from style clutter.
- Reusable across multiple pages.
- Easier to maintain—changing one file updates the entire website.
- Better performance—stylesheets are cached by browsers.
Disadvantages:
- Requires additional HTTP request (though caching helps).
- Not ideal for very small or single-page projects.
When to use: Always, for large or multi-page websites.
Summary of CSS Types
| Type | Where Defined | Best Use Case | Drawbacks |
|---|---|---|---|
| Inline | Inside HTML element (style) | Quick fixes, testing, email templates | Hard to maintain |
| Internal | <style> tag in <head> | Small websites, single-page projects | Not reusable |
| External | Separate .css file | Large/multi-page websites | Needs extra HTTP request |
CSS Syntax
Every CSS rule follows a standard syntax:
selector {
property: value;
}
- Selector – The HTML element(s) you want to style.
- Property – The aspect of the element you want to change (e.g., color, font-size, margin).
- Value – The setting applied to the property (e.g., red, 16px, 20%).
Example:
p {
color: red;
font-size: 18px;
}
This rule sets:
- All
<p>elements to have red text. - A font size of 18px.
CSS Selectors Overview
Selectors are patterns used to target HTML elements. They define which part of the document the styles apply to.
1. Universal Selector (*)
Selects all elements on a page.
* {
margin: 0;
padding: 0;
}
Resets margin and padding for all elements.
2. Type Selector
Targets elements by tag name.
p {
color: blue;
}
Applies to all <p> elements.
3. Class Selector (.classname)
Targets elements with a specific class.
<p class="highlight">Hello</p>
.highlight {
background-color: yellow;
}
4. ID Selector (#id)
Targets a unique element with a specific ID.
<p id="intro">Welcome</p>
#intro {
font-weight: bold;
}
5. Grouping Selectors
Apply the same styles to multiple elements.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
6. Descendant Selector (Space)
Selects elements inside other elements.
div p {
color: green;
}
Styles <p> only if inside <div>.
7. Child Selector (>)
Selects direct children only.
div > p {
color: purple;
}
8. Adjacent Sibling Selector (+)
Selects the first element immediately following another.
h1 + p {
font-style: italic;
}
9. General Sibling Selector (~)
Selects all siblings after a specific element.
h1 ~ p {
color: gray;
}
10. Attribute Selectors
Match elements based on attributes.
a[href] {
text-decoration: none;
}
a[target="_blank"] {
color: orange;
}
11. Pseudo-classes
Target elements in specific states.
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}
12. Pseudo-elements
Style parts of an element.
p::first-line {
font-weight: bold;
}
p::before {
content: "→ ";
}
Specificity in CSS
When multiple rules target the same element, specificity determines which one applies:
- Inline styles (highest priority).
- ID selectors.
- Class, attribute, and pseudo-class selectors.
- Type selectors.
- Universal selector.
If two rules have the same specificity, the one defined later in the stylesheet takes precedence.
Putting It All Together
Here’s a small project example that demonstrates different CSS types, syntax, and selectors.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
h2 {
color: navy;
}
</style>
</head>
<body>
<h1 style="color: darkred;">Welcome to CSS</h1>
<h2>Understanding CSS Basics</h2>
<p class="highlight">This paragraph uses a class selector.</p>
<p id="intro">This one uses an ID selector.</p>
<div>
<p>Paragraph inside a div.</p>
</div>
</body>
</html>
CSS (style.css):
p {
font-size: 16px;
color: gray;
}
.highlight {
background: yellow;
}
#intro {
font-weight: bold;
color: green;
}
div > p {
color: blue;
}
Conclusion
CSS is the backbone of modern web design, providing the ability to transform plain HTML documents into visually appealing and responsive websites. By mastering:
- The types of CSS (inline, internal, external),
- The syntax (selector, property, value),
- The selectors (universal, class, ID, combinators, pseudo-classes, pseudo-elements),
you lay the foundation for creating beautiful, structured, and maintainable web pages.
As you progress, you’ll explore advanced topics like flexbox, grid, media queries, animations, transitions, and responsive design frameworks. But everything begins with a solid understanding of CSS basics
Leave a Reply