What is CSS?
CSS (Cascading Style Sheets) is a language used to describe the visual presentation of web pages. It tells the browser how to display elements like text, images, tables, and containers. With CSS, you can control colors, fonts, spacing, layout, responsiveness, and much more across multiple HTML pages.
CSS is one of the core technologies of the web, along with HTML and JavaScript. It helps in creating visually attractive and user-friendly websites. You can keep the structure (HTML) separate from design (CSS), making your code more organized and maintainable. 📚
🎯 Why Use CSS?
- 🔧 Separation of concerns: Keep content and styling apart for clean code.
- 🔄 Reusability: One CSS file can style hundreds of HTML pages.
- ⚡ Performance: External stylesheets load faster with browser caching.
- 📱 Responsive design: Easily adapt your layout for different screen sizes.
- 👨💻 Maintainability: Change your design in one place and see updates everywhere.
📚 How to Use CSS in HTML?
There are four ways to include CSS in your HTML pages:
-
Inline CSS — Applies styles directly on an element using the
styleattribute.
<p style="color: blue;">This is blue text.</p> -
Internal CSS — Defined inside a
<style>tag within the HTML<head>.
<style> p { color: red; } </style> -
External CSS — Linked using the
<link>tag. Best for larger projects.
<link rel="stylesheet" href="style.css"> -
@import CSS — Import one CSS file into another.
@import url('other-style.css');
🚀 Real-World Example
Consider a news website with 100+ pages. Rather than applying styles individually, an external stylesheet can be used to maintain consistent branding, layout, and colors — all editable from a single CSS file.
🔍 Summary
- CSS is essential for creating modern, styled web pages.
- It allows complete control over the layout and appearance of content.
- You can apply it inline, internally, or externally.
- Always prefer external stylesheets for better performance and modularity.
0 Comments