For some odd reason when I try styling this html page with a backround in css nothing appears.
Any Ideas on how to fix
-Thanks
<html>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
<style>
body {background-color:#b0c4de;}
</style>
</body>
</html>
It should look something like this (notice I moved the style tag within the head tag):
<head>
<style>
body{
background-color:#color;
}
</style>
<head>
Why is your style tag in your <body> tag? It should be in the <head> tag:
<html>
<head>
<style type="text/css">body { background-color: red; }</style>
</head>
<body>
</body>
</html>
Or even better, put your css in a separate .css file.
First of all that's not how css works or how html works. You should put your style tags in html head section. And you should determine html element where you want to set background-color.
<html>
<head>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
</html>
Usually the syntax is like so:
<html>
<head>
<style>
body { background: #121212; }
</style>
</head>
</html>
With the style tag in the head tag.
You will want to move your <style> tag inside of your <head> tag.
Try this code:
CODE
<style>
body {
background-color:#b0c4de;
}
</style>
<body>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
SAMPLE
http://jsfiddle.net/Uy2Zb/
Related
So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!
You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>
You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}
Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}
Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}
I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.
I was learning html and css but when I got to this css code I was stuck. I couldn't make the paragraph text blue. Is there something wrong with my html?
This is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color;blue;}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Wrong syntax of writing color;blue;
<style type="text/css">
p {color:blue;}
</style>
<style type="text/css">
p {
color: blue;
}
</style>
Wrong syntax of writing color;blue;
correct way::
<style type="text/css">
p {color:blue;}
</style>
It's right way. Instead semicolon you must write colon.
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color: blue;}
</style>
</head>
<body>
<p>This text is blue </p>
</body>
</html>
Read more about it.
example:
<html>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Or just simply - no style tag added
<p style="color:blue">This text is blue </p>
Easy error to find, just distraction.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Ohh, so close. You've used a semicolon ; instead of a colon :. Changing it would fix your issue.
p { color: blue; }
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
However, if I may, I strongly suggest specifying a specific chain to your desired paragraphs. Making a global color change to all p tags isn't considered good practice.
.paragraphs p {
color: red;
}
<div class="paragraphs">
<p>This text is red</p>
<p>And so is this</p>
</div>
<p>This paragraph's color hasn't changed.</p>
On a side note. If desired, you could add a style attribute to your p tag to change the color of that specific paragraph.
<p style="color: orange;">This text is orange</p>
<p>This paragraph's color hasn't changed.</p>
I'm coding in Windows Notepad the following:
It only display the background in Light Gray, but without showing the heading and the pareagraph!
<!doctype html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style> //style tag not end correctly check it
</head>
<body>
<h1>dfgdfd</h1>
<p>hjsdfkj</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>assignment 4</title>
<h1>Assignment4- CSS basics</h1>
<style>
.special
{
text-align:justify;
text-indent:10px;
}
Its telling me that the element style is not allowed, please help
The h1 does not belong in the head section. Instead, it should be in the body.
It should look something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>assignment 4</title>
<style>
.special {
text-align:justify;
text-indent:10px;
}
</style>
</head>
<body>
<h1>Assignment4- CSS basics</h1>
</body>
</html>
<h1> (like other content elements) cannot appear in the <head> tag.
Therefore, the parser assumes that you closed the <head> and started the <body>.
<style> tags can only appear in the <head> tag.
Since the parser earlier implicitly started the <body>, you get an error.
You need to close the head section before including any HTML content. The css should appear within the head section but the H1 tag within the body.
ie.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>assignment 4</title>
<style>
.special
{
text-align:justify;
text-indent:10px;
}
</style>
</head>
<body>
<h1>Assignment4- CSS basics</h1>
</body>
</html>