So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
Related
I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}
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 new to coding in general, and I'm just beginning to code my first website, but when I run this code in Brackets Live Preview, the page shows up blank. Not sure if I'm missing something, or if I have an error in the code. Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<title>My Finger Slipped</title>
</head>
<body bgolor="#000" text="#FFF">
<h1>My Finger Slipped</h1>
</body>
</html>
Actually your pages isn't blank just that you make your body text the color white so you think its blank. Try highlighting the page you will see that there is text there. Typically you would wanna make a separate CSS page for you HTML and link it this way you can change your whole website by just adding div and id's.
HTML
<title>My Finger Slipped</title>
</head>
<body>
<h1>My Finger Slipped</h1>
</body>
</html>
CSS
body {
background-color: #E5DAD3;
}
h1 {
color: white;
}
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>
I am learning to work with html and css through making an about me page. I've created a folder called blog and in there I have a file called index.html and a folder called css. In the css folder I have a file called style.css.
For some reason I can't find the error in my code that won't allow me to link my stylesheet to my index file. I am testing out the code on safari by simply opening the file.
here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Stephanie CD</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Hey! I'm Stephanie</h1>
<p>how are you doing?</p>
</body>
</html>
Here is my style.css file:
h1 {
color: blue;
}
body {
background: url("http://i.imgur.com/Gm84ZeZ.jpg?1");
background-size: cover;
background-position: center;
text-align: center;
}
I simply restarted everything, made new files, and now it works. Don't know what went wrong.
thanks
I tested my suggestion in Chrome and found that the resource in the funky quotes was not being requested.
The test is to try to load with and without the funky quotes and see which file actually attempts to load, create a HTML document with just this:
<link href=“css/style-1.css” rel=“stylesheet”>
<link href="css/style-2.css" rel="stylesheet">
and then watch the Network tab in your developer tools to see which file is actually requested by the browser.
This still may not be your specific issue but it worked for me (i.e. style-2.css attempted to load but style-1.css did not).
my case was different.
p{
background: red;
color: white;
}
h1{
background: lightblue;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css files\style.css" type="text/css" rel="stylesheet">
<!--**IMPORTANT** while on pc I had to mention the full relative
path to get the desired output.
link href="C:\Users\Arun\Documents\css files\style.css"
type="text/css" rel="stylesheet" THIS WORKED.-->
</head>
<body>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<h1>hello, hi</h1>
</body>
</html>