Prev Next

HTML CSS - Introduction

CSS (Cascading Style Sheets) works hand-in-hand with HTML to control the presentation of web pages. By separating structure (HTML) from design (CSS), you can create cleaner, more maintainable code. In this introduction, you'll learn how CSS is applied to HTML and understand the basic methods of incorporating it into your pages.

Key Topics

Inline CSS

Example: Applying a style directly to an HTML element using the style attribute.

<p style="color:blue;">Inline styled paragraph.</p>

Internal CSS

Example: Using the <style> element inside the <head> to define page-specific styles.

<head>
<style>
  p {
    font-size:18px;
    color:green;
  }
</style>
</head>

External CSS

Example: Linking an external CSS file using the <link> element for better maintainability.

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

Below is a simple HTML page showing all three methods of adding CSS. This is a full code example with a copy box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>CSS Introduction</title>
    <style>
        h1 {
          color: red;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p style="text-decoration:underline;">This paragraph is styled inline.</p>
    <p>This paragraph gets its size and color from the internal CSS in the <head>.</p>
    <p>If 'styles.css' exists, it can further style this page externally.</p>
</body>
</html>

Explanation: The page above demonstrates inline styling, internal <style>, and external CSS linking. Understanding these methods helps you choose the right approach for your project's complexity and maintainability needs.

Key Takeaways

  • CSS separates content (HTML) from presentation (styling).
  • Inline CSS is quick but can clutter the HTML if overused.
  • Internal CSS allows page-specific styling without external files.
  • External CSS centralizes styles for multiple pages, enhancing maintainability.
  • Choose the appropriate method based on the scope and complexity of your project.
Prev Next