CSS | Notion

Linking the styles to document:

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

Internal

<style>        
        p {
            color: blue;
        }
</style>
<p>Internal Styling</p>

inline

<p style="color: cadetblue;">This is Inline CSS</p>

External

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>External Styling</p>
</body>
</html>

style.css

p{
	color: coral;
}

selector{
	property: name;
	property: name;
	...............
}

Used to provide the element with unique identifier, so that it can be used to select it and give specific styles to that unique element.
id=”UniqueID” and to select that id element we use: #title{…….}

#title{
    color:rgb(189, 132, 25);
    font-size: 50px;
}

<h1 id="title">Hii</h1>

This is used to assign a class to the element, allowing us to select and target all elements with that class.
class=”NameOfClass” and to select that class elements we use: .headings{……}

.headings{
    color:rgb(199, 23, 61);
    font-size: 50px;
}