Cascading Style Sheets

The "styling" or "rendering" of a web document is primarily described by CSS, this includes but is not limited to: colors, fonts, margins, borders, padding, positioning, and alignment.

CSS code can be embedded directly within HTML code or referenced to from a separate file. It is good practice to keep CSS code and HTML code in separate files to prevent unnecessary repetition of CSS code on multiple webpages for a website that shares common element styling.

To demonstrate CSS, let's start with a file named "style.css" that contains the following:

body { font-family: sans-serif; background-color: PeachPuff; }
h1 { color: Violet; }
p { color: Purple; }

Now another file, an HTML file, may contain the following:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS exmaple</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Welcome!</h1>
        <p>This webpage is stylish!</p>
    </body>
</html>

The resulting webpage has the following appearance:

Welcome!

This webpage is stylish!

CSS code that is applied to an HTML document from a separate CSS file is known as an external style sheet. CSS code applied to an HTML document from the content of a <style> element is known as an internal style sheet, the same webpage shown above could have been expressed using an internal style sheet with the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS example</title>
        <style>
            body { font-family: sans-serif; background-color: PeachPuff; }
            h1 { color: Violet; }
            p { color: Purple; }
        </style>
    </head>
    <body>
        <h1>Welcome!</h1>
        <p>This webpage is stylish!</p>
    </body>
</html>

One can have multiple stylesheets, both internal and external, applied to an HTML document; their effects are applied in the order that they are declared. An inline style is CSS code applied to a single HTML element through the value of it's style attribute:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS example</title>
    </head>
    <body style="font-family: sans-serif; background-color: PeachPuff;">
        <h1 style="color: Violet;">Welcome!</h1>
        <p style="color: Purple;">This webpage is stylish!</p>
    </body>
</html>

Here, 3 inline styles are used to manually apply a style to each element.

Generally, CSS code is composed of a collection of CSS rules. A CSS rule is composed of a selector and a sequence of declarations, specifying how an element or collection of elements are to be rendered. In the CSS rule p { color: Purple; }, the selector is p and color: Purple; is the only declaration in the rule. Within this declaration, color is a property and it's value is being set to Purple. The rule p { color: Purple; } means that all <p> will have their color set to purple.

The rule body { font-family: sans-serif; background-color: PeachPuff; has 2 declarations; for the <body> element, this rule sets it's font family to a sans serif font and it's background color to Peach Puff. These declarations also affect all nested elements of <body>, which is why the background color of the <h1> and <p> elements are also Peach Puff.