I can not get a simple CSS to apply to my jsp page. The page displays, but just black on white (no underline). The TOMCAT localhost_access_log shows the GET of the CSS is successful (200).
using Tomcat with directories:
web-apps/myapp
--jsp -- cat_list.jsp
--css -- main.css
--WEB-INF
main.css:
h3 {
background-color: blue;
text-decoration: underline;
}
cat_list.jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Category List</title>
<LINK rel="stylesheet" type="text/css" href="css/main.css" media="screen">
</head>
<body>
<h3> Test Text </h3>
</body>
</html>
What am I missing?
Related
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
I've just started learning CSS and am following a YouTube tutorial Learn CSS in 12 Minutes, however I am stuck at minute 4:49 - the title should show a blue background but mine doesn't?
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.cs
</head>
and on my stle.css sheet I have:
#header {
background-color: #66CCFF;
}
I expected the area behind 'title' to be blue when I view in browser.
you need to create a header tag to make it turn blue using css.
In css, you can apply style to a tag by simply copying its name (here header, not #header), and apply style to id or class by indicating their #name (for id) or their .name (for classes).
The title tag display a text in tab and program title (like here).
Your html code should look like this (I closed the link element):
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>My blue text</header>
And your css:
header{
background-color: #66CCFF;
}
If you want to learn css, you can find some fantastic tutorials :)
Try by closing the link rel=stylesheet tag completely, and actually calling div id header in body, and defining height of that header if you don't have any content in it or you won't be able to see it.
As #metaDesign mentioned, you should consider taking a lot longer than 12 minutes to learn CSS...
#header {
background-color: #66CCFF;
height: 100px;
}
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
</div>
</body>
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
I cannot load .css from a separate file.
For example if I have html:
<!DOCTYPE html>
<html>
<link href "style.css" rel="stylesheet" type = "text/css">
<head>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
The css does not load
however if I have css within the same html file the css loads properly. What am I doing wrong?
EDIT:
Changed HTML To code below as suggested by several people. Still has not effect. sytle.css is in the same directory as my source html.
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
css style sheet:
<style>
body
{
background-color:#b0c4de;
}
</style>
Your link tag is malformed and should be in the head (as opposed to the root of the document):
<link href "style.css" rel="stylesheet" type="text/css">
Should be (notice the href= correction):
<link href="style.css" rel="stylesheet" type="text/css">
try this
<link href="style.css" rel="stylesheet" type = "text/css">