CSS

Link a css file to HTML

<head>
    <link rel="stylesheet" href="master.css">
</head>

Boostrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Source: https://getbootstrap.com/docs/5.3/getting-started/download/

Bascis


body{
    font-family: Tahoma
    font-size: 100%;
}
h1{
    text-align: center;
}

p{
    background-color: green;
}

div{
    border-width: 20px;
    border-style: dashed;
}

span{
    color: red;
}

Selectors

<p id="one"> this is red</p>

<div class="myclass">
    <p>this is pink</p>
</div>
# class uses dot
.myclass{
    color:pink;
}

# id uses hashtag
#one{
    color:red;
}

CSS Box Model

#one{
    padding:10px;
    margin-left:10px;
}

Use Googel Fonts

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
    body {
    font-family: 'Crimson Pro', serif;
    font-size: 48px;
    }
</style>