I have a CSS file called "stylesheet.css"
p {
margin: 0%;
font-family: cursive;
font-size: 1cm;
}
h1 {
font-family: sans-serif;
}
And I have an html file in the same folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<p>Test</p>
<h1>Test</h1>
<div>
<style scoped>
#import "stylesheet.css";
</style>
<p>Test (Supposed to be bigger and different font)</p>
<h1>Test (Should have a different font)</h1>
</div>
</body>
</html>
But for some reason, the style rules that I had imported in a scoped style tag in a div leaks out to the body and styles the p tag above:
Browsers do not support scoped which has been deprecated.
Even if they did support it, your CSS is targetting the body element and there isn't a body element inside the div that you are scoping the CSS to (and can't be, since a body element isn't allowed there).
Write your CSS to target the elements you actually have.
#scopeTarget {
margin: 0%;
font-family: cursive;
font-size: 1cm;
}
<p>Test</p>
<div id="scopeTarget">
<p>Test (Supposed to be bigger and different font)</p>
</div>
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
So I'm new to programming and I've been learning on my own through the Odin Project. The first project I've been working on is a recreation of the Google search site. I've got some of the basic HTML layout but my CSS is not being applied, I originally started this project on codepin and everything worked. When I switched to vscode... nothing. Here's what I have so far for HTML and CSS.
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
<!DOCTYPE html>
<html>
<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>Google</title>
<style>
#import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
This is my first post so hopefully its a good question. Any and all help is appreciated. Thanks!
You forgot to link your css file to your html file. Add a link tag at the end of the head tag, in case you have the html and css files in the same directory and your css file's name is styles, you can do like this:
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
The reason it works on Codepen is because they do the linking work for you, so the html, js and css file are automatically connected to each other
Looking at CSS code it seems like it is in different file. So in this case you have to link CSS to HTML file you can do this by using <link rel="stylesheet" href="yourfilepath"> inside head tag.
-- You have to call the css file that you made with:
<link rel="stylesheet" href="the file of the css">
<style type="text/css">
h2{background:gray;font-family:"Microsoft YaHei";font-size:50px}
h3{background:blue;font-family:"Microsoft YaHei";font-size:50px}
p{background:red;font-family:"Microsoft YaHei";font-size:50px}
</style>
<html>
<head>
<meta charset="UTF-8">
<title>Link to external style sheet</title>
<link rel="stylesheet" type="text/css" href="link-css1.css">
</head>
<body>
<h2>This is the H2 demo</h2>
<h3>This is the H3 demo</h3>
<p>This is the p demo</p>
</body>
</html>
And the result?
IE enter image description here
why my css style doesn't work on the first line?
You don't need <style> tags in your CSS file. You only need to use that if you're including CSS in HTML. Those tags will be invalid in a CSS file, and will break the rule that comes after them.
h2{background:gray;font-family:"Microsoft YaHei";font-size:50px}
h3{background:blue;font-family:"Microsoft YaHei";font-size:50px}
p{background:red;font-family:"Microsoft YaHei";font-size:50px}
<html>
<head>
<meta charset="UTF-8">
<title>Link to external style sheet</title>
<link rel="stylesheet" type="text/css" href="link-css1.css">
<!-- this is how you would include styles in HTML, and when you need to use the <style> tag
<style>
h2{background:gray;font-family:"Microsoft YaHei";font-size:50px}
h3{background:blue;font-family:"Microsoft YaHei";font-size:50px}
p{background:red;font-family:"Microsoft YaHei";font-size:50px}
</style>
-->
</head>
<body>
<h2>This is the H2 demo</h2>
<h3>This is the H3 demo</h3>
<p>This is the p demo</p>
</body>
</html>
This works if you remove the style tags from the CSS. They shouldn't be there unless you are adding CSS in your HTML, like this:
<html>
<head>
<meta charset="UTF-8">
<title>Link to external style sheet</title>
<style>
h2 {
background: gray;
font-family: "Microsoft YaHei";
font-size: 50px
}
h3 {
background: blue;
font-family: "Microsoft YaHei";
font-size: 50px
}
p {
background: red;
font-family: "Microsoft YaHei";
font-size: 50px
}
</style>
</head>
<body>
<h2>This is the H2 demo</h2>
<h3>This is the H3 demo</h3>
<p>This is the p demo</p>
</body>
</html>
But as you have a stylesheet link, you obviously don't need <style> tags.
h2 {
background: gray;
font-family: "Microsoft YaHei";
font-size: 50px
}
h3 {
background: blue;
font-family: "Microsoft YaHei";
font-size: 50px
}
p {
background: red;
font-family: "Microsoft YaHei";
font-size: 50px
}
<html>
<head>
<meta charset="UTF-8">
<title>Link to external style sheet</title>
<link rel="stylesheet" type="text/css" href="link-css1.css">
</head>
<body>
<h2>This is the H2 demo</h2>
<h3>This is the H3 demo</h3>
<p>This is the p demo</p>
</body>
</html>
If you're using external file as CSS, then not needed put the css code inside style tag.
Not sure how your h3 and p tags got the color, but try closing all your declarations with a semicolon. https://www.w3schools.com/css/css_syntax.asp
h2{background:gray;font-family:"Microsoft YaHei";font-size:50px;}
Yes the ; is necessary or it might not get the styles.
I am trying to apply a style for the HTML <head> tag. But it is not working.
Here is the code:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
home page
</head>
</html>
And here is the css/style.css part:
#head {
font-size: 15 px;
font-family: helvetica;
font-color: blue;
text-align: center;
};
You have four problems.
The property is color not font-color
There shouldn't be a space between the number and unit part of a length
You are trying to target an element with id="head" but no such element exists in the document
The head element cannot include free text, so the parsing rules for HTML convert the document into this DOM:
.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
home page
</body>
</html>
… so the content isn't in the head anyway:
You could style elements in the head if it was valid HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo title</title>
<style>
head { display: block; }
head title { display: block; color: blue; }
</style>
</head>
<body>
<h1>Demo heading</h1>
This is generally a poor idea though. You should use proper semantic HTML in the body for content you want to display in the main viewport.
You should also make use of an HTML validator and a CSS validator.
I think this is what you were aiming for, head is not rendered :-)
header {
font-size: 15px;
font-family: helvetica;
color: blue;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<header>
home page
</header>
</html>
You're trying to modify the head tag. The head tag is hidden and contains information about the page like meta tags, the title, stylesheets, etc.
What you want to do is this:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
<title>Home Page</title>
<style>
/* selecting the header tag*/
header {
font-size: 15 px;
font-family: helvetica;
color: blue;
text-align: center;
};
/* Selecting the header id */
#header {
font-size: 15 px;
font-family: helvetica;
color: blue;
text-align: center;
};
</style>
</head>
<body>
<header id="header">
This is the header
</header>
<div class="body-text">
</div>
<footer id="footer"></footer>
</body>
</html>
Here's a handy list of 30 CSS selectors. The article says you need to memorize them but I still reference this blog all the time when using very specific selectors.
I am testing some css and have found that the browsers (Chrome, firefox) will not show the ::after content I am specifying. Fiddler show is correctly, but the browser will not.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/test.css">
</head>
<body>
<div id="testdiv">
<main>
<section>
<p>
I want to put number '123' here:
</p>
<p>
And I want it here too:
</p>
</section>
</main>
</div>
</body>
</html>
CSS:
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
#testdiv main p::after { content:'123'; }
Fiddle: (shows correct)
https://jsfiddle.net/bg1tg8nc/
Any help appreciated.
HA I figured out how to fix the issue!
If you take the above CSS code and reorder it like this:
#testdiv main p::after { content:'123'; }
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
it works fine.
Can anyone explain why?