CSS Styles in HTML

Inline Styles

Directly apply styles to an element using the style attribute:

<p style="color: red;">This text is red.</p>

Internal Stylesheet

Define styles within the <head> section of your document:

<style>
    body {
        background-color: lightblue;
    }
    p {
        color: navy;
    }
    </style>

External Stylesheet

Link to an external CSS file for your styles:

<link rel="stylesheet" href="styles.css">

Styling Text

Styles can control various aspects of text appearance:

p {
        font-family: "Arial", sans-serif;
        font-size: 16px;
        color: darkgray;
        text-align: center;
    }

Advanced Styling: Flexbox

Use Flexbox to center content on the page:

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .centered-text {
        font-size: 2em;
        color: purple;
        font-weight: bold;
    }