Tech Ocean Hub

Posted by manasvisawant45 on July 21, 2023 12:08 am

Inline, internal, and external stylesheets

Inline, internal, and external stylesheets are three ways of applying CSS (Cascading Style Sheets) to HTML documents to control the appearance and layout of web pages.

Inline Styles: Inline styles are applied directly to individual HTML elements using the style attribute. The CSS rules are defined within double quotes or single quotes and are directly added to the specific HTML tag. For example:

<p style="color: red; font-size: 16px;">This is a paragraph with inline styles.</p>

Using inline styles is not recommended for large-scale styling because it mixes presentation with content and can make the code hard to maintain.

Internal Stylesheet: Internal stylesheets are defined within the <head> section of an HTML document using the <style> element. The CSS rules are placed between the <style> tags, affecting the entire document or specific sections of it. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal Stylesheet Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Hello, this is a heading!</h1>
    <p>This is a paragraph with internal styles.</p>
</body>
</html>

Internal stylesheets are more organized than inline styles but still apply to a single HTML document only.

External Stylesheet: An external stylesheet is a separate CSS file that is linked to an HTML document using the <link> element. This allows you to keep the CSS code in a separate file, making it easy to manage and apply to multiple HTML documents. For example:

Create a file named “styles.css” with the following content:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}
p {
    font-size: 18px;
}

Then, link the external stylesheet in the HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>External Stylesheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, this is a heading!</h1>
    <p>This is a paragraph with external styles.</p>
</body>
</html>

Using an external stylesheet is the most recommended method as it promotes better code organization, reusability, and maintainability across multiple HTML documents. Changes to the CSS will apply universally without needing to modify each HTML file individually.

Menu

Inline, internal, and external stylesheets

Course Category

Archieve