#CSS

Cascading Style Sheets (CSS) is a language used to describe the style of HTML or XML documents (including SVG, XHTML, etc.). The basic format of CSS is:

selector {
    property: value;
}

The selector determines which elements are affected. It can be set to h1, h2, p, etc.
The property and value define the style, e.g., color: red sets the text color to red.

There are three ways to apply CSS in HTML:

Inline style – uses the style attribute within an HTML element with CSS content.
Internal style – uses a <style> element inside the <head> of the HTML document.
External style – uses a <link> element inside the <head> to load an external CSS file.

#Inline Style

Inline CSS applies style to a single HTML element via the style attribute.

Since it applies to the element itself, no selector is needed.

<p> 
    This is a paragraph with
    <span style="color:red">red</span>
    <span style="color:yellow">yellow</span>
    <span style="color:blue">blue</span>
    <span style="color:green">green</span>
    characters.
</p>

Inline CSS Example

#Internal Style

Internal CSS applies styles to a single HTML document via the <style> tag.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="utf-8"/>
        <style>
            h1 {
                color: red;
            }

            p {
                color: green;
            }
        </style>
    </head>

    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph</p>
    </body>
</html>

Internal CSS Example

#External Style

External CSS applies styles to an HTML document by linking to a CSS file using the <link> tag.

<link rel="stylesheet" href="URL of CSS file"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://xplanc.org/view/view.css"/>
    </head>

    <body>
        <p class="view-text-miku">view-text-miku</p>
        <p class="view-text-red">view-text-red</p>
        <p class="view-text-pink">view-text-pink</p>
        <p class="view-text-purple">view-text-purple</p>
        <p class="view-text-indigo">view-text-indigo</p>
        <p class="view-text-blue">view-text-blue</p>
        <p class="view-text-cyan">view-text-cyan</p>
        <p class="view-text-teal">view-text-teal</p>
        <p class="view-text-green">view-text-green</p>
        <p class="view-text-yellow">view-text-yellow</p>
        <p class="view-text-orange">view-text-orange</p>
    </body>
</html>

External CSS Example