CSS (Case Cade Style)

1. Inline CSS

CSS written directly in HTML elements using the style attribute.

Syntex:

<element style="property: value; property: value;">

<p style="color: #333; line-height: 1.6; font-family: Arial;">
    This is a paragraph with inline styles.
</p>

2. Internal CSS (Embedded)

CSS written within <style> tags in the HTML document's <head>.

Syntax:

<head>
    <title>intertnal Css</title>
   <style>
        h1{
            color: red; 
            background-color: aqua; 
        }
    </style>
</head>

3. External CSS

CSS written in separate .css files and linked to HTML documents.

project/
├── index.html
├── styles/
   ├── main.css
   ├── components.css
   └── responsive.css

<head>
    <link rel="stylesheet" href="path/to/style.css">
</head>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    color: #2c3e50;
}

.first {
    margin-bottom: 1rem;
}

Selector in external CSS:

Tag selector

h1{
    background-color: blue;
}

Id selector

#first{
    color: rgba(0, 0, 0);
}

class Selector

.second{
    background-color: green;
    font-style: italic;
}