CSS Tutorial

CSS (Cascading Style Sheets) is the language that styles HTML pages. It controls layout, colors, fonts, spacing, and responsiveness.

  • Separate content (HTML) from presentation (CSS).
  • Re-use styles across pages with an external stylesheet.
  • Build responsive designs that work on all devices.

Ways to Add CSS

  1. External CSS — link a .css file (recommended)
  2. Internal CSS — write CSS in a <style> block
  3. Inline CSS — use the style attribute on elements

1) External CSS (Best Practice)


<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

External files keep code organized and cacheable across pages.

2) Internal CSS


<style>
  h1 { color: #1E88E5; }
  p  { color: #333; }
</style>

Useful for page-specific styles. Avoid overusing to keep CSS reusable.

3) Inline CSS


<p style="color: red; font-weight: bold;">
  Inline CSS example
</p>

Good for quick tests; avoid in production—harder to maintain, lower reusability.

Your First CSS Example


<!-- HTML -->
<h1>Welcome to CSS</h1>
<p class="lead">Styled by external CSS</p>

/* CSS */
h1 {
  color: #1E88E5;
  text-align: center;
}

.lead {
  font-size: 18px;
  color: #555;
}

Tips:

  • Prefer external stylesheets for scalability and caching.
  • Keep HTML semantic; use classes for styling hooks.
  • Use consistent units (e.g., rem, px) and naming conventions.