<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.
Related
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>
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">
body {
background-color: black;
}
h1 {
font-size: 1000px;
font-color: white;
}
p1 (
font-color: white;
)
The text won't show up when I run the code. I don't know what I'm missing but it's probably something small. Also, no, the text color is not the same as the background/
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css"/>
<script src="trackback.js" style="text/javascript"/>
</head>
<body>
<h1>About Me</h1>
<p1>This is test text</p>
</body>
</html>
There are a few issues here:
1) <script> should not be self closing. Change that to <script src="trackback.js" style="text/javascript"></script>
2) p1 is not a valid HTML element. Change that to p
3) Your CSS has p1 ( ... ) which is also invalid, as these parenthesis should be curly braces. Also, change that selector to p so that it reads p { ... }
4) You have style in your script tag, where you should have used type there.
5) Use color instead of font-color in your CSS.
Check out this working example:
body {
background-color: white;
}
h1 {
font-size: 1000px;
color: black;
}
p {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css" />
<script src="trackback.js" type="text/javascript"></script>
</head>
<body>
<h1>About Me</h1>
<p>This is test text</p>
</body>
</html>
If you use background color black, then you should use color white instead of style of font. suppose style footer
<style> footer { background-color:black; color:white; } </style>
body {
background-color: white;
}
h1 {
font-size: 1000px;
color: black;
}
p {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css" />
<script src="trackback.js" type="text/javascript"></script>
</head>
<body>
<h1>About Me</h1>
<p>This is test text</p>
</body>
</html>
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load
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.