Menu
My CSS is not showing in my browser, only the HTML is. Everything is linked up correctly (I think) but no browser shows the CSS. Now if I used something like live-server plugin in visual studio code the CSS is displayed correctly and works as intended.
Here is my css:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body{
background-color: rgb(35, 35, 35);
color: white;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.top{
text-align: center;
}
header{
align-items: center;
}
h1 span{
color: red;
}
p span{
color: red;
}
p{
font-weight: bold;
}
.explain{
color: white;
}
.explain p{
color: red;
}
.forum-container{
background-color: rgb(32, 32, 32);
margin: 1em 30em 1em 30em;
text-align: center;
align-items: center;
border-radius: 3em;
padding-top: 1.1em;
}
label{
display: block;
color: white;
font-weight: bold;
font-size: 1.4em;
}
input[type="text"]{
border: solid grey;
outline: none;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="number"]{
outline: none;
border: solid grey;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="button"]{
border: none;
outline: none;
background-color: red;
color: white;
border-radius: 3em;
font-weight: bold;
text-align: center;
padding-top: 1.1em;
padding-bottom: 1.1em;
width: 30%;
margin: 1.1em 1.1em 1.1em 1.1em;
cursor: pointer;
}
input[type="button"]:hover{
background-color: rgb(211, 5, 5);
}
Here is the part where I am calling my css file too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.png"><title>title</title>
</head>
I only started learning HTML and css today so if you are taking a look at this and see some things I am doing wrong please do let me know.
931
asked Jan 21 '26 23:01
Are you able to see the CSS file loaded in the Network tab of your browser?
How to:
Developer Console > Network
In order for the above to work, open the developer console for your browser (here is a good link to find out for your browser: Check Opening Browser Developer Console)
If the CSS file is showing up in the Network tab, it means your CSS selectors are not correct.
If the CSS file isn't showing up, your path isn't correct. As a test put the entire url (absolute) in the src', like this:
<link rel="stylesheet" href="https://mywebsite.com/css/main.css">
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
