Trouble embedding CSS in my simple HTML navigation bar code with external ways of embedding
So im new to coding and I was wonder if its possable to embed css into HTML. I looked it up and they said to use the external ways. They said to use this
<link rel="stylesheet" type="text/css" href="mystyle.css">
but when I tried It didn't didn't do anything. I tried looking it up but was confused by all the the different ways and such. Here is my code.
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}I know this seems like a stupid question and mabey it is but I could really use some hemp beucase I love coding and I really want to be able to have both Javascript and CSS in a HTML code. Any help would be greatly appreciated. (I am pretty sure what part is wrong but I don't know how to format it)
javascript html css formatting embed
asked Nov 25 '18 at 3:53
bobbob
61
add a comment |
So im new to coding and I was wonder if its possable to embed css into HTML. I looked it up and they said to use the external ways. They said to use this
<link rel="stylesheet" type="text/css" href="mystyle.css">
but when I tried It didn't didn't do anything. I tried looking it up but was confused by all the the different ways and such. Here is my code.
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}I know this seems like a stupid question and mabey it is but I could really use some hemp beucase I love coding and I really want to be able to have both Javascript and CSS in a HTML code. Any help would be greatly appreciated. (I am pretty sure what part is wrong but I don't know how to format it)
javascript html css formatting embed
asked Nov 25 '18 at 3:53
bobbob
61
add a comment |
So im new to coding and I was wonder if its possable to embed css into HTML. I looked it up and they said to use the external ways. They said to use this
<link rel="stylesheet" type="text/css" href="mystyle.css">
but when I tried It didn't didn't do anything. I tried looking it up but was confused by all the the different ways and such. Here is my code.
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}I know this seems like a stupid question and mabey it is but I could really use some hemp beucase I love coding and I really want to be able to have both Javascript and CSS in a HTML code. Any help would be greatly appreciated. (I am pretty sure what part is wrong but I don't know how to format it)
javascript html css formatting embed
asked Nov 25 '18 at 3:53
bobbob
61
So im new to coding and I was wonder if its possable to embed css into HTML. I looked it up and they said to use the external ways. They said to use this
<link rel="stylesheet" type="text/css" href="mystyle.css">
but when I tried It didn't didn't do anything. I tried looking it up but was confused by all the the different ways and such. Here is my code.
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}I know this seems like a stupid question and mabey it is but I could really use some hemp beucase I love coding and I really want to be able to have both Javascript and CSS in a HTML code. Any help would be greatly appreciated. (I am pretty sure what part is wrong but I don't know how to format it)
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}javascript html css formatting embed
javascript html css formatting embed
asked Nov 25 '18 at 3:53
bobbob
61
asked Nov 25 '18 at 3:53
bobbob
61
asked Nov 25 '18 at 3:53
bobbob
61
asked Nov 25 '18 at 3:53
bobbob
61
asked Nov 25 '18 at 3:53
bobbob
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Yes there is and it's called Inline Styling but you do not want to do this as this will not only take longer to code for your website but will make it harder to make changes for your website - the reason why this isn't working is because your css and html need to be two separate files.
<link rel="stylesheet" type="text/css" href="mystyle.css">
^ The reason why this doesn't work is because your css is in the same file as the html the html and css need to be separated in two files like this
(the above href path needs to refer to the path of your where your css file is located so if it is in the same directory as your html it will be href="mystyle.css" If not and is located in a folder it will be href:"/folder name/mystyle.css"):
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}Secondly, I'm not sure if you have noticed but your code only has a head tag, usually a website requires a head, body and footer for it to function normally.
Looking at this quite simple to fix.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>Your link ref needed to be at the top of the page, you didn't include a title, you needed to include the characters you are using for the page and there you go you have what should be functioning code I believe.
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464509%2ftrouble-embedding-css-in-my-simple-html-navigation-bar-code-with-external-ways-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes there is and it's called Inline Styling but you do not want to do this as this will not only take longer to code for your website but will make it harder to make changes for your website - the reason why this isn't working is because your css and html need to be two separate files.
<link rel="stylesheet" type="text/css" href="mystyle.css">
^ The reason why this doesn't work is because your css is in the same file as the html the html and css need to be separated in two files like this
(the above href path needs to refer to the path of your where your css file is located so if it is in the same directory as your html it will be href="mystyle.css" If not and is located in a folder it will be href:"/folder name/mystyle.css"):
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}Secondly, I'm not sure if you have noticed but your code only has a head tag, usually a website requires a head, body and footer for it to function normally.
Looking at this quite simple to fix.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>Your link ref needed to be at the top of the page, you didn't include a title, you needed to include the characters you are using for the page and there you go you have what should be functioning code I believe.
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
add a comment |
Yes there is and it's called Inline Styling but you do not want to do this as this will not only take longer to code for your website but will make it harder to make changes for your website - the reason why this isn't working is because your css and html need to be two separate files.
<link rel="stylesheet" type="text/css" href="mystyle.css">
^ The reason why this doesn't work is because your css is in the same file as the html the html and css need to be separated in two files like this
(the above href path needs to refer to the path of your where your css file is located so if it is in the same directory as your html it will be href="mystyle.css" If not and is located in a folder it will be href:"/folder name/mystyle.css"):
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}Secondly, I'm not sure if you have noticed but your code only has a head tag, usually a website requires a head, body and footer for it to function normally.
Looking at this quite simple to fix.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>Your link ref needed to be at the top of the page, you didn't include a title, you needed to include the characters you are using for the page and there you go you have what should be functioning code I believe.
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
add a comment |
Yes there is and it's called Inline Styling but you do not want to do this as this will not only take longer to code for your website but will make it harder to make changes for your website - the reason why this isn't working is because your css and html need to be two separate files.
<link rel="stylesheet" type="text/css" href="mystyle.css">
^ The reason why this doesn't work is because your css is in the same file as the html the html and css need to be separated in two files like this
(the above href path needs to refer to the path of your where your css file is located so if it is in the same directory as your html it will be href="mystyle.css" If not and is located in a folder it will be href:"/folder name/mystyle.css"):
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}Secondly, I'm not sure if you have noticed but your code only has a head tag, usually a website requires a head, body and footer for it to function normally.
Looking at this quite simple to fix.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>Your link ref needed to be at the top of the page, you didn't include a title, you needed to include the characters you are using for the page and there you go you have what should be functioning code I believe.
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
Yes there is and it's called Inline Styling but you do not want to do this as this will not only take longer to code for your website but will make it harder to make changes for your website - the reason why this isn't working is because your css and html need to be two separate files.
<link rel="stylesheet" type="text/css" href="mystyle.css">
^ The reason why this doesn't work is because your css is in the same file as the html the html and css need to be separated in two files like this
(the above href path needs to refer to the path of your where your css file is located so if it is in the same directory as your html it will be href="mystyle.css" If not and is located in a folder it will be href:"/folder name/mystyle.css"):
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}Secondly, I'm not sure if you have noticed but your code only has a head tag, usually a website requires a head, body and footer for it to function normally.
Looking at this quite simple to fix.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>Your link ref needed to be at the top of the page, you didn't include a title, you needed to include the characters you are using for the page and there you go you have what should be functioning code I believe.
<header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><header>
<div class="container">
<h1 class="logo"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title>
</head>
<header>
<div class="container">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
edited Nov 25 '18 at 4:29
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
answered Nov 25 '18 at 4:08
StaffbaneStaffbane
163
163
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464509%2ftrouble-embedding-css-in-my-simple-html-navigation-bar-code-with-external-ways-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
