CSS Introduction

Subject: css

CSS Introduction

CSS (Cascading Style Sheets) is used to control the visual appearance of web pages. It styles how HTML elements are displayed, allowing developers to create layouts, apply color schemes, adjust typography, and more.

Before CSS, all styling was done within HTML using attributes, which led to repetitive and hard-to-maintain code. With the introduction of CSS in 1996, design and structure were separated, resulting in cleaner, more maintainable websites.

How CSS Works with HTML

CSS applies styles using selectors to target HTML elements. Developers define rules inside these selectors to control appearance, such as font size, colors, alignment, margins, and spacing.

Methods to Apply CSS

CSS can be added to HTML documents using three primary methods:

1. Inline CSS

Inline CSS is written inside the style attribute of individual HTML elements. It is typically used for quick, small changes.

Example:

🚀 Try it in Compiler

2. Internal CSS

Internal CSS is placed within a <style> tag in the <head> section of the HTML document. It is useful when a single HTML page needs custom styling.

Example:

🚀 Try it in Compiler

3. External CSS

External CSS uses a separate file (with a .css extension) to define styles. This file is linked to the HTML document using the <link> tag inside the <head>.

index.html:

🚀 Try it in Compiler

style.css:

🚀 Try it in Compiler

Key Takeaways

  • CSS defines how HTML elements are displayed on the screen.
  • There are three ways to add CSS to a web page: Inline, Internal, and External.
  • Inline CSS is embedded within an element's tag using the style attribute.
  • Internal CSS is written inside a <style> tag in the HTML <head>.
  • External CSS is stored in a separate .css file and linked using the <link> tag.
  • External CSS is considered the best practice for maintainability and scalability.
Next: CSS Syntax