CSS basics

Hello, the purpose of this blog is to show people how to add CSS to an HTML file and how to select elements.

First you'll need to add this to your HTML file.

<link rel="stylesheet" type="text/css" href="style.css">

href="style.css"

style.css is the name of my CSS file in this example.

Awesome now your HTML and CSS is connected. What next?

Let's say this is your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>


    <div class="div-class">
        <card>
            <p id="p-tag">
                </p>
            </card>
        </div>

</body>
</html>

To select the div we can use the class selector. This will change any elements with the same class name.

.div-class {}

To select the card we can use the element selector. This will change any elements of the same tag name.

card {}

To select the p tag we can use the id selector. This will only change the element with the selected id.

#p-tag {}

Once you have something selected to change you can do some cool things such as changing their color.

#p-tag {
color: green;
}

Play around with CSS and see what you can make!

Blog

Joelle

Join Our Newsletter. No Spam, Only the good stuff.

Related