Styling HTML with CSS

🧵 Introduction to HTML and CSS

CSS (Cascading Style Sheets) is the language used to style HTML content. It controls layout, colors, fonts, spacing, animations, and responsiveness of your webpage. While HTML builds the structure, CSS handles the presentation 💅.

>>“HTML is the skeleton, CSS is the skin — together they form the body of the web.” 🕸️

🎯 3 Ways to Apply CSS

You can apply CSS to your HTML using:

  • Inline CSS — Directly inside HTML tags
  • Internal CSS — Inside a <style> block in the HTML file
  • External CSS — Linked via a separate .css file

🔗 Inline CSS

Inline CSS Example

<p style="color: blue; font-size: 20px;">Styled Text</p>

Note

⚠️ Use inline styles only for quick tests or small tweaks. Not recommended for full layouts.

🧠 Internal CSS

Internal CSS Example

<head>
  <style>
    p {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is styled with internal CSS</p>
</body>

Note

📌 Internal CSS is useful for single-page documents or demos.

📁 External CSS

External CSS Example

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

styles.css

body {
  background-color: #f2f2f2;
}

h1 {
  color: crimson;
  text-align: center;
}

Note

💼 This is the most scalable and maintainable way to style websites.

💡 CSS Syntax Overview

CSS Syntax

selector {
  property: value;
}

Example:

Code Snippet

p {
  color: red;
  font-size: 16px;
}

🔧 Common CSS Properties

PropertyUse
colorText color
background-colorElement background
font-sizeSize of the text
margin / paddingSpacing outside/inside an element
borderAdds a border

🌟 Real-World Example

Styled Card Example

<html>
  <head>
    <link rel="stylesheet" href="card.css" />
  </head>
  <body>
    <div class="card">
      <h2>Card Title</h2>
      <p>This is a styled card.</p>
    </div>
  </body>
</html>

card.css

.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

📚 Learn More

>>“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs 💡