HTML With CSS

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be visually rendered on screens, mobile displays, print paper, or across other media. CSS saves immense time and development effort by allowing you to control the design, typography, colors, and layout of multiple web pages all at once from a single file. There are three distinct ways to add CSS to HTML elements:

      Inline CSS: Applied directly to individual tags via the style attribute.

      Internal CSS: Defined in the <head> section of an HTML document within a <style> container.

      External CSS: Maintained in a separate .css stylesheet linked via the <link> tag.

---

1. Inline CSS (Element-Level Styling)

Inline CSS is used to apply a unique style to a single HTML element. An inline style is written directly inside the opening tag using the style attribute. The following example sets the text color of the <p> element to red:

Example:

<p style="color: red; font-size: 18px; font-weight: bold;">
    Welcome to Veewom HTML with Inline CSS
</p>
							

---

2. Internal CSS (Document-Level Styling)

Internal CSS is used to define styles for an entire single HTML webpage. Internal styles are written within a <style> block placed inside the <head> section of the document:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        h4 {
            color: #27ae60;
            font-size: 22px;
            font-family: Arial, sans-serif;
        }
        .highlight-text {
            color: #c0392b;
            font-size: 16px;
            background-color: #f9f9f9;
            padding: 8px;
            border-left: 4px solid #c0392b;
        }
    </style>
</head>
<body>
    <h4>Veewom Internal CSS Demonstration</h4>
    <p class="highlight-text">This paragraph is styled via document-level internal CSS classes.</p>
</body>
</html>
							

---

3. External CSS (Site-Wide Styling)

An external stylesheet is the gold standard for web development. It defines the design for an entire website comprising tens, hundreds, or thousands of web pages. To link an external stylesheet, add a <link> tag inside the <head> section of every HTML document:

File 1: styles.css (External Stylesheet)

/* styles.css */
.cl {
    color: red;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
							

File 2: index.html (HTML Document)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="cl">Welcome to Veewom Styled with External CSS</p>
</body>
</html>
							

---

Comparison Table: Inline vs Internal vs External CSS

Feature	Inline CSS	Internal CSS	External CSS (Recommended)
Location	Inside HTML tag (style="")	Inside <head> (<style>)	Separate .css file
Scope	Single element only	Single HTML page	Entire multi-page website
Browser Caching	No (downloaded every time)	No (embedded in HTML)	Yes (cached locally, speeding up site)
Maintainability	Very Poor (tedious to update)	Moderate (page-by-page)	Excellent (change once, updates everywhere)
Best Use Case	Quick debug / Email templates	Single landing pages	All professional websites & blogs

---

CSS Cascading Priority Order (Specificity Hierarchy)

What happens when the same HTML element has conflicting styles declared in different places? Browsers follow a strict Cascading Priority Rule:

1. Inline Styles (Highest Priority): Styles defined in style="..." override external and internal rules.
2. Internal Styles: Styles in <style> override external stylesheets (if declared after the link tag).
3. External Stylesheets: Styles in .css files override default browser styles.
4. Browser Defaults (Lowest Priority): Standard user-agent styles applied by Chrome, Firefox, or Safari.

---

Hands-on Practice Session for Students

Problem Statement: Create an HTML document with an internal stylesheet setting all paragraphs to blue. Then, apply an inline style on one specific paragraph setting its color to red. Observe and explain why the inline style overrides the internal rule.

Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Priority Demonstration - BCA Practical 10</title>
    <style>
        /* Internal CSS rule: targets all paragraphs */
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>CSS Cascade Hierarchy Test</h2>
    <p>Paragraph 1: Styled by internal CSS (renders in blue).</p>
    <p style="color: red; font-weight: bold;">
        Paragraph 2: Styled with an inline style (renders in red because inline styles take higher priority!).
    </p>
</body>
</html>
							

---

Viva & University Exam Questions (BCA Exam Preparation)

---

Frequently Asked Questions (FAQ)