HTML and CSS Integration

By /

CSS (Cascading Style Sheets) is used to style HTML elements and control the layout of web pages. By integrating HTML and CSS effectively, we can create visually appealing and responsive web designs.

In this chapter, we will explore:

  1. Different ways to add CSS to HTML
  2. Class vs. ID selectors for styling
  3. Responsive Web Design (RWD) Basics

1. Adding CSS to HTML

There are three ways to add CSS to an HTML document:

  1. Inline CSS (applied directly to individual elements)
  2. Internal CSS (written inside a <style> tag in the HTML file)
  3. External CSS (linked as a separate .css file)

1.1 Inline CSS (Applied Directly to Elements)

Inline CSS is added using the style attribute inside an HTML element.

Example:

<p style="color: blue; font-size: 20px;">This is an inline-styled paragraph.</p>

✅ Advantages: Quick and easy for small changes.
❌ Disadvantages: Difficult to maintain, not reusable.

1.2 Internal CSS (Using <style> in <head>)

Internal CSS is written within a <style> tag inside the <head> section of an HTML file.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This paragraph is styled using internal CSS.</p>
</body>
</html>

✅ Advantages: Useful for single-page styling.
❌ Disadvantages: Not reusable across multiple pages.

1.3 External CSS (Using a Separate CSS File)

External CSS is written in a separate .css file and linked to the HTML document using <link>.

Example (HTML File)

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This paragraph is styled using external CSS.</p>
</body>
</html>

Example (styles.css File)

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

✅ Advantages: Best for large projects, maintainability, and code reusability.
❌ Disadvantages: Requires an extra HTTP request to load the CSS file.

2. Class vs. ID Selectors

HTML elements can be styled using class and ID selectors.

2.1 Class Selector (.) – Used for Multiple Elements

A class applies styles to multiple elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p class="highlight">This is another highlighted paragraph.</p>
</body>
</html>

2.2 ID Selector (#) – Used for a Unique Element

An ID is unique and should only be used once per page.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #unique {
            color: purple;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p id="unique">This paragraph has a unique style.</p>
</body>
</html>

🔹 When to Use Class vs. ID?

FeatureClass (.)ID (#)
Can be applied to multiple elements✅❌
Can be reused across the website✅❌
Used for a single element only❌✅
Can be used in JavaScript✅✅ (Preferred for unique elements)

3. Responsive Web Design Basics

Responsive Web Design (RWD) ensures that a website looks good on all devices (desktops, tablets, and mobile phones).

3.1 Using the <meta viewport> Tag

Adding this in the <head> section ensures the webpage scales properly on different screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.2 Media Queries – Making a Website Responsive

Media queries allow CSS to apply different styles based on screen width.

Example: Changing font size based on screen width

/* Default styles */
body {
    font-size: 18px;
}

/* When screen width is 600px or less */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

3.3 Using Flexbox for Responsive Layouts

Flexbox makes layout designs flexible and adaptable.

Example: Two columns that adjust on smaller screens

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
        }
        .box {
            flex: 1;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" style="background-color: lightblue;">Box 1</div>
        <div class="box" style="background-color: lightcoral;">Box 2</div>
    </div>
</body>
</html>

How it Works?
✅ On large screens, the two boxes appear side by side.
✅ On small screens (below 600px), they stack on top of each other.

3.4 Using Grid for Responsive Layouts

CSS Grid is another powerful layout tool.

Example: A 3-column grid that turns into 1 column on small screens

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
    }
}

4. Best Practices for HTML and CSS Integration

✔ Use external CSS for better organization.
✔ Avoid inline styles to keep HTML clean.
✔ Use semantic HTML (<header>, <nav>, <section>, etc.) for better structure.
✔ Minimize CSS duplication by using classes instead of IDs for styling.
✔ Use media queries to ensure responsiveness on all devices.
✔ Test on different devices using Chrome DevTools or online testing tools.

Conclusion

In this chapter, we covered:

  • Different ways to add CSS to HTML
  • Class vs. ID selectors for styling
  • Basic concepts of Responsive Web Design (RWD)
  • Media queries, Flexbox, and Grid for responsive layouts

By understanding these techniques, you can build modern, structured, and responsive web pages.

👉 We will learn CSS in more detail in the upcoming CSS tutorials, where we will cover advanced styling techniques, animations, and layout strategies.

Scroll to Top