My CSS isn't appearing in my Text Editor for the Dashmoto exercise

Hey! I’m currently working on the Dashmoto project & I don’t know why, but only the HTML is appearing when I put my code in. My CSS isn’t appearing. Any reason why this may be happening? Here’s the code below:

Dashmoto's Arts & Crafts

Dasmoto's Arts & Crafts

Brushes

Hacksaw Brushes

Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts.

Available in different sizes.

Starting at $3.00 / brush.

Frames

Art Frames (assorted)

Assorted frames made of different material, including MDF, birchwood, and PDE.

Select frames can be sanded and painted according to your needs.

Starting at $2.00 / frame.

Paint

Clean Finnish Paint

Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.).

Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.

Starting at $5.00 / tube.


Can you send code you write?

I can only send 1 link at a time sadly but this is the html

What exactly do you mean the CSS isn’t appearing?


Aside, the CSS file is called index.css, not style.css.

.header {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color:khaki
}

.brushes {
background-color: mediumspringgreen;
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.frames {
background-color: lightcoral;
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.paint{
background-color: skyblue;
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.price {
color: blue;
font-family: Helvetica;
font-weight: bold;
}

file:///Users/drnrdx/Desktop/Codecademy/Dasmoto’s%20Arts%20&%20Crafts/index.html

When you link your HTML to your CSS, you are not using the correct file name.

I’m stuck on where I goofed up at

Check the <link> tag in your HTML. Check the href attribute. What is it? What is the name of your CSS file?

If you put that line into the code, the CSS should start to work.

You have entered the wrong file name on line 5.

I put in & still only HTML showing on the page.

You’re had typed style.css instead of index.css on line 5. index.css is the file that’s currently using in your directory and style.css doesn’t even exist at all.

Yeah I put in index.css, but it’s still not working sadly. I feel like i’m making this way harder than I need it to be
lol

It might be something wrong with your HTML5 Boilerplate, after you have changed it then open it up on Live Server:

Here it is the correct boilerplate →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Does it matter if i’m using Google Chrome as my browser?

It doesn’t matter. Do you have Live Server extension installed in your VS Code already?

I do now & thanks! Still not solving the css issue though. I have it was index.css as well.

You have changed the file path. I can see it from my side. You have moved your Css inside a directory call CSS.

You should consider changing the file path on link tag that you link to your CSS file.