My css file is not changing the thhing i need:
Here's my 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">
<script src="/www/style.index.html.css"></script>
<title>Test</title>
</head>
<body>
<h1 class="test">Server Test</h1>
</body>
</html>
and here's my css:
.test{
font: optional;
color: red;
}
the class test is not working, and I have no Idea why. if you have an answer, please help! :)
Bob
PS: sorry for the weird ass title.. The bot is just stupid
You add/import/link your css file as follows <link href="./file_name.css" rel="stylesheet" />
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">
I am new to VSCode. I tried using the Emmet to get a HTML5 boilerplate. When I type ! for Emmet, it does not give the full boilerplate. I got this boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
but I expected this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Document</title>
</head>
<body></body>
</html>
The <meta https-equiv /> line is missing.
I am on Windows 7.
Don't use any other extensions for HTML and CSS auto complete.
If you have already installed please remove it.
I had the same problem and all I do is update the newest VScode version and it fixed. Now the code looks like this.
<!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>
So, I've been trying to make the header responsive as it should but it does not seem to work at all.
Any help would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>This is just a test page that does not work on three tested devices any help would be nice.</h2>
</body>
</html>
Enusure to add this <meta name="viewport" content="width=device-width, initial-scale=1">
You can use bootstrap head and it will do it for you.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Bootstrap is amazing for creating websites: https://www.w3schools.com/bootstrap/default.asp
It was once not responsive so had to reconfigure to do figure it.
What could be the issue?
<!DOCTYPE html>
<html lang="en" class="testTheme">
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="img\logo.ico">
<title>Testing Website</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>
Based on the above comments, your issue is how you're redirecting your custom domain to your heroku deploy. See heroku's docs for a setup that will work for you!