CSS file not getting loaded on IE 10 and Google Chrome - html

I have just started learning html and css.
I have an html file "index.html" with code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>
I have a css file "style.css" file with code:
.description {
color: red;
}
Both are in the same file location -
C:\Users\ravalesmita\Desktop\Portfolio\toplist\index.html
C:\Users\ravalesmita\Desktop\Portfolio\toplist\style.css
Using IE 10 and google chrome.
Expected: text should have red color when loaded on the browser.
Actual: text color doesn't change.
Can anyone point out why is the text within class description not showing red color?

Have you saved the file previously in another folder, before you made a change to red? If so the browser may be reading that file instead of the one you are wanting it to. Try running it like this. If it works its not finding your css file for some reason.
<!DOCTYPE html>
<html>
<head>
<style>
.description {
color: red;
}
</style>
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>

Related

external CSS, test on local computer, css file not found

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;
}

Either my CSS file is not linking to my HTML properly or Jumbotron won't change text colors

I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.

Is this what my page should look like?

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
}

Can somebody tell me how I am using the class selector incorrectly?

HTML file:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body>
<p>Red</p>
</body>
</html>
CSS file:
p {
color: red;
}
The word 'Red' does not change to red text when I open the page in a browser. If anyone would know why my CSS file isn't linking to the HTML file that would be greatly appreciated. The files are in the same directory.
The code you have provided has no errors.
Fiddle: https://jsfiddle.net/9n97Lz69/
Please copy & paste the following code into your html file and verify this works:
index.html:
<style>
.menu p {
color: red;
}
</style>
<div class="menu">
<p>This sentence should be red.</p>
</div>
Fiddle: https://jsfiddle.net/21umj65u/
Then move the CSS to mystyle.css and verify this works:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<div class="menu">
<p>This sentence should be red.</p>
</div>
mystyle.css:
.menu p {
color: red;
}
Please check the file location of mystyle.css and verify against the url in index.html:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Your code seems fine, perhaps "p" is already defined in your css file.Try this
.menu p {
color: red !important;
}

Linking CSS to HTML using Aptana Studio 3

I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}