CSS in HTML

Question 1

What is CSS and what is its primary role?

Answer 1

CSS stands for Cascading Style Sheets and it is used to style and layout HTML elements.<br></br><br></br><b></b>

[Deep Dive]</b><br></br>While HTML provides the structure (DOM) CSS provides the visual presentation. When the browser loads a page it builds a “CSSOM” (CSS Object Model) to map styles to elements before painting pixels.

Question 2

What is “Inline CSS” and when should you use it?

Answer 2

Inline CSS is writing styles directly inside an HTML element’s ‘style’ attribute. It should generally be avoided in modern development.

<br></br><br></br><b>[Deep Dive]</b><br></br>Syntax: <code>&lt;h1 style='color:blue;'&gt;</code><br></br>It has the highest priority but causes messy code and makes maintenance difficult because you cannot reuse the style.

Question 3

What is “Internal CSS” and where is it defined?

Answer 3

Internal CSS is defined within the <code>&lt;style&gt;</code> tags inside the <code>&lt;head&gt;</code> section of a specific HTML file.

<br></br><br></br><b>[Deep Dive]</b><br></br>It is useful for single-page prototypes or email templates but bad for large apps because the styles are stuck on that one page and cannot be shared across the application.

Question 4

What is “External CSS” and why is it the professional standard?

Answer 4

External CSS involves linking a separate .css file to your HTML using the <code>&lt;link&gt;</code> tag.

<br></br><br></br><b>[Deep Dive]</b><br></br>Syntax: <code>&lt;link rel='stylesheet' href='styles.css'&gt;</code><br></br>It promotes the “Separation of Concerns” principle allowing you to change the look of an entire application by modifying a single file.

Question 5

What is the “Cascading” rule of priority in CSS?

Answer 5

The “Cascade” determines which style wins when there are conflicts. The general rule is: Inline > Internal/External.

<br></br><br></br><b>[Deep Dive]</b><br></br>1. Inline styles (Highest Priority)<br></br>2. ID Selectors<br></br>3. Class Selectors<br></br>4. Tag Selectors (Lowest Priority)<br></br><i>Note: !important overrides everything but should be used sparingly.</i>

Question 6

How does Angular handle CSS compared to standard HTML pages?

Answer 6

Angular uses a hybrid approach with “Component Styles” and “Global Styles”.

<br></br><br></br><b>[Deep Dive]</b><br></br>1. <b>Global:</b> <code>styles.scss</code> acts like standard External CSS for the whole app.<br></br>2. <b>Component:</b> Angular encapsulates styles (e.g. <code>login.component.css</code>) so they only affect that specific component acting like “Internal CSS” that doesn’t leak out.