Learning Web Dev with GPT

Introduction

CSS styles can be applied to HTML in 3 ways:

External Stylesheet (style.css)
Internal <style> tag
Inline Styles (bad unless absolutely necessary)

The Basic syntax for CSS is selector { property: value; }

Selectors that can be used include element, id and class

External Stylesheet

If using an external stylesheet, it should be called something like "style.css". It can then be linked to in the <head> section of the page with:
<link rel="stylesheet" href="style.css">

This page has been styled in this way using:

lesson-4-style.css
body {
    background-color: rgb(32, 29, 29);
    color: rgb(180, 180, 180);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

pre {
    border: 1px solid rgb(26, 97, 32);
    max-width: 100%;
    padding: 4ch;
    font-family: monospace;
}

pre code {
    display: block;
    white-space: pre-wrap;                                
}
                             
a {
    color: rgb(38, 116, 38);
}

Internal CSS

Instead of using an external stylesheet, for basic styling of a single page, styles can be set directly in the <head> section of the page.
Internal styles will override external style settings

This section has been styled in this way to modify the background, font color and font style:

Head Block:
<head>
    <title>Learning Web Dev with GPT</title>
    <link rel="stylesheet" href="lesson-4-style.css">
    <style>
        #internal-css {
            p {
                color: rgb(56, 170, 66);
                font-style: oblique;
                }
            background-color: rgb(34, 37, 34);
        }
    </style>
</head>

It is applied to this specific section buy making the section a class called "internal":
<section id="internal-css">

Note: Nesting in CSS works in most modern browsers, but may cause issues with some older ones, it is still controversial.

Inline Style

Styles can be applied inline; for example changing text color inline:
<span style="color: darkgoldenrod;">for example changing text color inline:</span<>
Inline styles will override both external and internal styles.

This is not a desirable way to apply styles, as it is much harder to maintain. It is also more difficult to create a consistent theme by doing this.

A Note on Style

It is easy to add colors and other styles to a web page. adding good colors and styles is an entirely different matter

How not to be an Edgelord, or: What NOT to do...