CSS — Cascading Style Sheets
CSS is used to style HTML elements, including colors, layouts, spacing, and responsiveness.CSS is a stylesheet language that controls the visual presentation of HTML elements, defining properties such as colors, fonts, layouts, and animations through selectors. CSS3, the latest evolution, introduces advanced features like flexbox and grid layouts for flexible designs, media queries for responsive styling, transitions and animations for interactivity, custom properties (variables) for dynamic styling, and pseudo-classes (e.g., :hover, :focus) for enhanced user experience. CSS is widely used for responsive designs, theme switching (e.g., dark/light modes), animations to improve user experience, and complex layouts with CSS Grid or Flexbox. Its versatility makes it essential for modern web development (Meyer, 2016).
CSS stands for Cascading Style Sheets. It is a separate language from HTML that exists purely to describe how content looks. The principle behind this separation is important: HTML defines the structure, CSS defines the appearance. If CSS and HTML were mixed together, changing the design of a 50-page website would mean editing every single page. With CSS in a separate file, you change one file and every page updates.
The word "cascading" describes how conflicts are resolved. Multiple CSS rules can target the same element. CSS uses a system called specificity to decide which rule wins: more specific selectors override less specific ones, and later rules override earlier ones at the same specificity. Understanding this cascade is essential to writing CSS that behaves predictably.
How CSS Works?
Every CSS rule has two parts: a selector that identifies which HTML elements to target, and a set of declarations that say what to change and what to change it to. A selector can target by element type (p), by class (.card), by ID (#header), by relationship (.nav a), or by state (button:hover). This targeting system is what makes CSS both powerful and precise.
CSS also controls layout. Flexbox makes it easy to align items horizontally or vertically. Grid creates two-dimensional layouts. Media queries apply different styles based on screen width, which is how one stylesheet serves both desktop and mobile without separate HTML files.
Three Ways to Add CSS
There are three methods for applying CSS to an HTML page. Each one works differently and suits different situations. Knowing which to use — and when — is an important part of writing clean, maintainable code.
1. Inline CSS
Inline CSS is written directly on an HTML element using the style attribute: <p style="color: red;">. It only affects that one element and overrides all other CSS rules. While it works, it is considered bad practice because the same style has to be repeated on every element individually, making the code very hard to maintain and update.
This is an inline CSS paragraph.
2. Internal CSS
Internal CSS is written inside a <style> block placed in the <head> of the HTML file. It applies only to the page it is written in. This is better than inline because you can write one rule that targets many elements at once. It is suitable for small single-page projects or quick prototypes, but styles cannot be shared across multiple pages.
This is an internal CSS paragraph.
3. External CSS
External CSS is written in a separate .css file and linked to the HTML using a <link> tag in the <head>. This is the most common and recommended method for larger projects because it keeps content and presentation separate, allows styles to be reused across multiple pages, and makes maintenance easier.
This is an external CSS paragraph.
Code Example
This is a paragraph.