Very simple task that doesn't seem to be working for some reason. I am getting no results when I view in the browser, my styles are not being applied to my HTML. My style sheet is in the same folder as main document with the html. I am previewing the code in chrome on a localhost. Not sure what is going wrong here, any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
My styles are placed in a separate document called mystyles.css
<style>
.main {
color: blue;
}
</style>
Test in one file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
.main {
color: blue;
}
</style>
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
Or as Tushar said: remove <style> and </style> from your css file
Where is the location of your CSS file?
For your code to be correct, they need to be in the same folder, otherwise you will need to tell the computer which directory to look in by using ../ for each directory back, and then you need to tell it where to look after, ie.
../STYLES/main.css
u just need to remove the opening and closing style tag as it predefined with the link tag.
update your mystyles.css
Related
I'm currently having problems with linking things on VS Code. I created a folder for a project and put all files really organized inside, linked everything right and still get nothing.
Folder with all the files
The code is this one:
<!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">
<link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
<script src="/assets/scripts/card-hover-animation.js"></script>
<title>Spider-Man | Multiverse</title>
</head>
<body>
<nav class="s-menu">
<ul>
<li class="s-menu__item">
Homepage
</li>
<li class="s-menu__item">
Tobey Maguire
</li>
<li class="s-menu__item s-menu__icon">
<img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
<li class="s-menu__item">
Tom Holland
</li>
<li class="s-menu__item">
Andrew Garfield
</li>
</ul>
</nav>
And the CSS is huge but a preview is This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this..
I've also tried extremely simple codes like this 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">
<link rel="stylesheet" href="/test/style.css">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
with this CSS:
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
And if I link it as a style.css file, I get no stylization. And the problem is not with CSS because if I put 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">
<style>
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
</style>
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
It works perfectly. AND if I link an external link 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>
<h1>H1</h1>
<p>Lorem ipsum</p>
<img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>
It also works. (the external link, the internal still nothing).
I've looked for this problem everywhere but didn't find a solution and tried some answers like this one, this one and adding the dot before the direction (like ./folder/file.css instead of /folder/file.css) and I even reinstalled VS Code but it didn't work :(
Please help!
Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./, like this:
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../ as many times as needed depending on how deep the folder goes like this:
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
But the first approach is the more understandable one.
In the same manner, the link and script files should be referenced this way:
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>
As this answer states you must use ../ before picking any images and on vs code you don't need to write the whole file name just use ../ and it will show you all folder and file in that particular folder. you just need to pick it.
or the simple solution to this problem is that just copy the image in the same folder as the main html file is and just write the image name vs code will identify it, just pick it from there.
<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
According to your shared screenshot i assume your index.html is in the same directory like your images folder. Then this will work localy.
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">
In this tutorial:
https://www.youtube.com/watch?v=Zz6eOVaaelI
They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.
Which, it does not seem to be doing; here's the HTML:
<!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=edge"/>
<link rel="stylesheet" href="style.scss"/>
<title>Sassy</title>
</head>
<body>
<header>
<h1>Hello!</h1>
<button>Hello--again!</button>
</header>
<div class="contact">
<button>Submit</button>
<div class="info">
<h1>Our contact info</h1>
<p>This is our info</p>
</div>
</div>
</body>
</html>
Here is the SASS:
header {
background: lightblue;
};
However, when I open a live server, the background does not appear light blue; just basic white.
Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.
<link rel="stylesheet" href="style.scss"/>
You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.
<link rel="stylesheet" href="style.css"/>
I have 3 <a> tag link to 3 pages. I set hover state is red and now I want after I click and go to a pages will keep background-color of this <a> like hoverstate.How can i do it?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
and CSS:
header > nav > a{
background-color:while;
}
header > nav > a:hover{
background-color: rgb(255, 204, 164);
}
I mean after I click to Teams will change background-color of Teams like hover state
It's a bit unclear about what technology you are using, but on the face of what you would do is have three seperate pages (index.html, teams.html, history.html).
Each of these would share the boilerplate you have here, but change which link has the 'active class'.
Eg.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
teams.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Teams</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html" >Home</a>
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
history.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - History</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
You then use the .active class to style that way.
eg
a:hover, a.active {
background-color: red;
}
Now, copy pasting code like this probably isn't sustainable, so that's where you might start using a templating enging like pug, or be doing some kind of backend rendering or whatever.
But this is the gyst of it.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<!--Title and Banner-->
<header>
<title>
<h1>Flip 'n' Sell</h1>
<title>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>`
Here is my html for my page so far
and here is my css. As you can see, all that I have done is styled it to where the default margin and
padding is nonexistent. What when I load this up and look at the webpage, there's nothing, nothing at all. What am I doing wrong. I still new to this all by the way.
* {
margin: none;
padding: none;
box-sizing: border-box;
}
Move the opening <html> tag to under the Doctype declaration before the <head> tag, and change or remove the <title> tag from your body.
The title tag is defining a title for the entire document (what's shown on the browser tab) and may be causing some confusion when rendering the page.See W3 School's post on the title tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Title and Banner-->
<header>
<h1>Flip 'n' Sell</h1>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>
The fix was your title tag was not terminated. Needed the corresponding </title> but in reality the title tag does not belong there and should be removed as I did in my example.
I try to make a page after tutorial and I have a question why my page jums or moves during refreshing when I clik for example on the bar? On the tutorial the page isn't jump and my jumps??? Click on the blue bar and the page jums or moves what is wrong with it?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Wojciech Bukowski">
<meta http-equiv="X-Ua-Compatible" content="IE-edge,chrome=1">
<title>Philosophia Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<h1>Philosophia Blog</h1>
</div>
<nav>
<div id="topbar">
<ul>
<li>Strona Główna</li>
<li>Pierwszy raz tutaj?</li>
<li>Dlaczego filozofia?</li>
<li>O autorze</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
After seeing your code, if you don't want this to happen remove the href in your anchor tag. However, by the looks of your code, you're trying to make a navbar. So for now, don't worry about what's happening and keep going with the tutorial!