I am trying to use Visual Studio Code (VSC) to practice on. When I update my index.html file, the live server will change. When I update my style.css file, the live server will not change. Is something wrong with the way I'm doing CSS?
My code so far in index.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>Product Landing Page</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/12_powerhouse_vegetables_slideshow/intro_cream_of_crop.jpg"
alt="logo"
class="logo-image">
</div>
<div class="links">
How it's Done
Available
Buy
</div>
</nav>
</body>
Code in style.css:
* {
margin: 0;
}
body {
background-color: white;
color: rgb(70, 69, 69);
font-family:Arial, Helvetica, sans-serif;
}
.navbar {
position: fixed;
top: 0;
min-height: 60px;
padding: 0px 20px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffffee;
}
Issue 1
Import style.css with <link> tag inside <head> tag. For exapmle,
<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>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
Issue 2
Maybe this is a typo:
❌background-color: #ffffffee;
✅background-color: #ffffee;
You haven't linked your style.css file with index.html so that is why it is not updating live. To do that create this code under Meta tag.
hope it resolves the issue.
Related
I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.
If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/
When you use a separate CSS file, you need to link that CSS file to the html document.
<!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>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</body>
</html>
I am working on a simple website for studying purposes. My goal is to keep all the code in a HTML5 format and use the new semantic tags as much as possible. In the code below the font and size changes that I make are not being reflected to the website, so no changes in the css is applied to the html page. I am not sure what is going on:
Here is the html and css
<!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>Dasmoto's Arts & Crafts</title>
</head>
<body>
<header>
<span>Dasmoto's Arts & Crafts</span>
<img src="./resources/images/pattern.jpeg" alt="">
</header>
</body>
</html>
header {
position: relative;
}
header span {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: khaki;
}
header img {
position: absolute;
width: 100%;
height: 150px;
}
I'm trying to add the white i on blue button information emoji to a webpage and I'm only seeing the i on a white background. Hoping someone can help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=“UTF-8”>
</head>
<body>
<p>For more information ℹ</p>
</body>
</html>
You missed the meta charset on the top. Don't forget to include that. Also from your question it seems like you missed the color style. Here's the full code
a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background-color: #00a6ed;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
border-radius: .5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/global_styles.css" rel="stylesheet" />
<meta charset=“UTF-8”>
</head>
<body>
<p>i</p>
</body>
</html>
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
<!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">
<title>Test 2</title>
<link href="./test2.css" rel="stylesheet" />
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
I need to separate articles in only css file. Without adding any attirbutes or something. Without touching to this HTML file.
article[value = 'First'] {
color: red;
}
article:text('First'){
color: red
}
article[text$="Second"]{
color: red
}
I tried them and they are not working.
Use the :nth-of-type selector.
article:nth-of-type(2) {
background: red;
}
article:nth-of-type(5) {
color: blue;
font-weight: bold;
}
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
<article>Fifth</article>
<article>Sixth</article>