I just approached HTML and CSS.
I wrote a little HTML5 file and a CSS file, but my HTML doesn't get any info from CSS because nothing is styled.
I'm using Eclipse, there is a directory "WebContent" where there is the HTML file, and the CSS is in WebContent/WEB_INF/CSS/file.css.
HTML file:
<html lang="it">
<head>
<link rel="stylesheet" href="/WEB-INF/CSS/NewFile.css" type="text/css">
<title>Strumenti musicali</title>
<meta charset="UTF-8">
<meta name="description" content="Negozio di strumenti musicali">
<meta name="keywords" content="strumenti, musicali, negozio">
<meta name="author" content="Paolo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
and the CSS file:
head {
display: none;
}
body {
background-color: lightblue;
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
h1 {
color: white;
text-align: center;
}
nav {
display: block;
}
p {
font-family: verdana;
font-size: 20px;
}
I don't know how the CSS file has to be indicated, because the file .html is in the directory "WebContent"; The CSS file in WebContent/WEB-INF/CSS/NewFile.css; The path I used is "/WEB-INF/CSS/NewFile.css" and still doesn't work.
EDIT:
It seems to work on Chrome and Edge, but neither in Firefox, nor in Eclipse.
Try to use the path "/WEB-INF/CSS/NewFile.css", that's to say a relative path from the html file to the css one.
The path to your CSS file is incorrect. Assure that the relative path and filename match that of your intended CSS file.
In your case the path specified in html file points to "NewFile.css" which does not match "file.css", as Blackbam has mentioned. Other issues exist in the directory names as well. Fixing this will fix your issue.
I would also add that StackOverflow is not intended as a website to debug your issues.
Related
I am looking for support editing stylesheet of my website
I have the below in the file main.css
.bg-danger, .bg-success {
padding: 0 5px;
}
a {
color: #EF1F2F;
text-decoration: none;
}
Then there is a header file header.php with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?=isset($title) ? $title : null;?></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
My requirement is to change the background, font etc.
I am not familiar with working on stylesheets. Requesting support from other members.. Thanks in advance
Into your main.css file you can start with adding some minimum properties like :
body {
background-color: #yourHexCodeColor;
font-family: "Helvetica", sans-serif;
}
Then learn the very basics of css right here => https://learn.shayhowe.com/html-css/getting-to-know-css/
Unfortunately, you can't edit CSS code coming from an external source.
So what you have to do is to overwrite the styles you need to be changed in another stylesheet. In your case, it would be the main.css file.
So if there is a style in the bootstrap file that looks like this:
body {
background-color: #fff;
}
You can make a copy of that style in your own file (main.css) and change the value. So in your file, you have this:
body {
background-color: #f7f7fe;
}
I am trying the code in the link shown below for responsive layout design.
1) As it it, if the CSS code is included in the html code displays perfectly as expected
2) But if I move the exact CSS code as a different file and link to it from the html code, visually the boxes layout don't work so well. The result seems similar in different browsers.
Would someone know the reason for that? I was expecting to get more similar visual results
Also would it be good in general for a website html code to include the css in the html code as in (1) or as a different file as in (2)
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
Here is the code I used to link to css file
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
here is the top code of the CSS sheet
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
And here is a screenshot of the result
edit
reviewed css sheet code after Lunex answer (top part)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
Create a css file. Let's say you name it "style.css".
In this file you put all the content which is in the < style > tag.
In your html file inside the head tag you add:
<link rel="stylesheet" href="style.css">
This should be working, considering you've done everything right.
Edit for your edit:
You don't need html tags in your css file.
The content of the html file should be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
The content of your css file should be:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
I really hope you can help me because I spent 2 days now looking for my mistake. I want to link an external css stylesheet into my html website but the website opens without css affecting it. I already validated both codes and checked spelling 1000 times, still not working. I tried with FF Chrome and IE:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset = "UTF-8"/>
<link rel="icon" type="image/png" href="bilder/favicon.png" />
<title>Die Hauskatze</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
Stylesheet:
#charset "UTF-8";
body{
background: url(bilder/background.jpg);
}
img {
border: 4px black;
}
your css file is probably is in another folder than your bilder folder. Be sure to specify this in the path.
If the css file is in a css folder for example, you need to go one folder up then in you bilder folder.
body{
background: url("../bilder/background.jpg");
}
for the border you need to specify the border 'style' (solid, dotted, etc)
border: 4px solid black;
https://www.w3schools.com/cssref/pr_border-style.asp
For starter you can try to add quotes to your URL here
body{
background: url(bilder/background.jpg);
}
change it to:
body{
background: url("bilder/background.jpg");
}
If that doesn't help it is quite likely that your path is wrong.
You can see it inside your developer console once the page is being loaded.
In case of wrong url you will get an error that the img file was not found.
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
I'm having issues with IE10 applying CSS styles I've specified for HTML5 elements (and their children when targeting the child using the HTML5 element tag name in the selector), so I broke it down into a simpler example and put together a simple JSFiddle example to demonstrate the issue, but when I tested the JSFiddle, IE10 decided to apply the styles properly. So, I took the exact source code of the JSFiddle's resulting iframe, and copied it into a file hosted on my server and alas it failed to properly apply the styles once again.
JSFiddle's source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
header, nav, main, footer {
display: block;
background: gray;
padding: 10px;
margin: 1px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<header>
<img src="http://placehold.it/300x80&text=Logo" />
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<main>
<p>This is filler content inside the <code><main></code> element. The <code><header></code>, <code><main></code> and <code><footer></code> should each have a gray background and be displayed as a block.</p>
</main>
<footer>
<p>Copyright © 2013, All Rights Reserved</p>
</footer>
</body>
</html>
What's the deal with IE10? It can't possibly be the code, since it works fine in an iframe, or do iframes get the same treatment as their parent page?
What's causing IE10 to trip up here? Could it possibly be something server related? That doesn't make much sense, but this is an odd one.
Naturally, any fixes would surely be appreciated.
According to the Developer tools it's running in IE8 mode on your server. Try adding this code to your <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
You can also set this on your server:
Apache:
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
</IfModule>
Your web server has an "X-UA-Compatible" header set to "IE=8", which forces IE to IE8 document mode. You need to either remove it or set it to "edge".
If you don't have access to server settings you could try adding modernizr to your page which should allow you to style HTML5 elements in older IEs.