HTML CSS

CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of HTML documents (or other markup language documents like XML). CSS is responsible for the styling of web pages, while HTML is responsible for the structure. Separating structure from style is one of the core principles of modern web development.

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

Inline CSS
Internal CSS
External CSS

1. Inline CSS

Inline styles are written directly in the style attribute of an HTML element. This method's scope is limited to a single element.

Pros:

Simple and direct, suitable for quick testing or applying unique styles to a single element.

Cons:

Mixes style and structure, violating the separation of concerns principle.
Hard to maintain; if you need to modify the same style across multiple elements, you must change each one individually.
Cannot utilize CSS caching mechanisms.

Example:

html

<h1 style="color:blue; text-align:center;">This is a blue centered heading</h1>
<p style="color:red;">This is a red paragraph.</p>

2. Internal CSS

Internal stylesheets use the <style> tag to write CSS rules directly in the <head> section of the HTML document. These style rules apply to the entire page.

Pros:

Centralizes all styles in one place, easier to manage than inline styles.
Can define styles for multiple elements, improving code reusability.

Cons:

Styles only apply to the current page. If multiple pages need the same styles, you must duplicate them in each page.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Internal Stylesheet Example</title>
    <style>
        body {
            background-color: linen;
        }
        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

3. External CSS

External stylesheets save all CSS rules in a separate .css file, then use the <link> tag in the <head> section of the HTML document to include it. This is the most recommended method.

Pros:

Complete separation: Achieves complete separation of HTML structure and CSS styling, making code cleaner and easier to maintain.
Reusability: The same .css file can be referenced by multiple HTML pages, achieving global style consistency.
Caching: Browsers can cache .css files, so when users visit other pages on the site, styles don't need to be re-downloaded, speeding up page load times.

Steps:

Create a file named styles.css (or any name you prefer).

Write your CSS rules in the styles.css file:

css

/* styles.css */
body {
    background-color: lightblue;
}
h1 {
    color: navy;
    text-align: center;
}

In the HTML file's <head>, use the <link> tag to include it:

html

<!DOCTYPE html>
<html>
<head>
    <title>External Stylesheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

Style Cascading Order

If the same element has styles applied in multiple ways, the browser determines the final style according to the following priority (from highest to lowest):

Inline styles (in the style attribute)
External and internal stylesheets (in <head>). If both exist, the rule that appears later will override the one that appeared earlier.
Browser default styles

Therefore, an inline style will override any styles defined in <head>.

HTML CSS ​

1. Inline CSS ​

2. Internal CSS ​

3. External CSS ​

Style Cascading Order ​

HTML CSS

1. Inline CSS

2. Internal CSS

3. External CSS

Style Cascading Order