I've to source a css file on my html5 file but out of the millions of ways I've seen on the internet none seem to work.
(Btw my css file is in the same folder as the html file.)
To load a css ressource in an HTML5 document, use the link element inside the head element.
In the following example, the ressource style.css is located in the same folder than the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
</body>
</html>
Related
I've just started using astro and have been finding a weird behavior when building my site. Specifically, although the build process creates a .css file in an assets folder and that is linked in the resulting .html file, my browser does not recognize the presence of this folder of .css file.
My index.astro looks like this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style> body {color: red;}</style>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
The resulting directory structure from npm run build is the following:
dist/assets/index.css
dist/index.html
Where index.html looks like the following:
<!DOCTYPE html>
<html lang="en" class="astro-5LR5QOZY">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Astro v1.7.2">
<title>Astro</title>
<link rel="stylesheet" href="/assets/index.css" />
</head>
<body class="astro-5LR5QOZY">
<h1 class="astro-5LR5QOZY">Astro</h1>
</body>
</html>
And index.css has one line, body {color:red;}. When I open index.html in Chrome, styling is plain and assets is not found within the directory structure:
Any help?
I've tried using type="text/css" and that didn't fix the problem.
It looks like you are double clicking the index.html file to view the file locally in your browser using the file:// protocol but websites are meant to be served from a server to view them properly using http:// | https://, Astro provides the npm run preview command which will run a server locally for you to view your build in /dist at http://127.0.0.1:3000/
<!DOCTYPE html> <!-- This lets the browser know it is a html5 document -->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Synta and Coding Style</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- This is the external stylesheet that links to the page and alters the feel and look of the page -->
1.close and tags.
2.select full address of your css or use base tag.
My Grails project structure:
my-app/
grails-app/
<mostly typical grails-app structure>
views/
web/
index.gsp
app/
admin/
layouts/
main.gsp
<rest of project structure is like any other Grails app>
So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.
My application.properties:
app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1
One section of my UrlMappings.groovy:
"/"(view:"/web/index")
My main.gsp layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="MyApp"/></title>
<g:resource dir="css" file="myapp.css" />
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<g:resource dir="js" file="myapp.js" />
</body>
</html>
My index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
/css/myapp.css
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
/js/myapp.js
</body>
</html>
So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.
I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?
I don't sure that tag into tag will be work correctly, so write like this:
<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>
According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.
Use the resources tag inside script or link tags to get your css/js loaded in your page like,
<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>
You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation
I am starting out at writing my own website and following a few tutorials on HTML5 and CSS. I am using netbeans to create and edit my project.
Here is my index.html file
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="newcss" href="newcss.css" type="text/css">
</head>
<body>
<p>This is css</p>
</body>
</html>
Here is my css file, called newcss.css
p {
color: #FFF;
}
I have my css file in the root folder of the webpage, same as the index file. All I am trying to do is change the colour of the text so I can see my style sheet is working. I am sure it is something really simple but can't seem to see it at the moment.
Thanks in advance for any help,
Mash
From the validator (assuming you add an HTML 5 Doctype):
Error Line 7, Column 57: Bad value newcss for attribute rel on element
link: The string newcss is not a registered keyword.
<link rel="newcss" href="newcss.css" type="text/css">
To load a stylesheet you have to use the stylesheet relationship, not the newcss relationship (which doesn't exist).
Fix your rel attribute.
Try the below one
<link rel="stylesheet" href="newcss.css">
Change your rel="stylesheet"
Change link rel:
<link rel="newcss" href="newcss.css" type="text/css">
to:
<link rel="stylesheet" href="newcss.css" type="text/css">
I am trying to link a css i created in eclipse to the jsp and when i run the project i get no results in my browser. I've tried it in multiple ways, by putting
<link rel="stylesheet" href="css/first.css" type="text/css">
<link rel="stylesheet" href="boe/WebContent/first.css" type="text/css">
<link rel="stylesheet" href="(my full path to the file)" type="text/css">
I've tried so much that i don't remember how i got it to not error out. i am getting this
Tag (link) should be an empty-element tag.
as the caution error.
i can not find any step by steps on creating the css and making it link to the jsp, so it can show up in my browser.
here is my code for both the jsp and the css.
jsp:
<?xml version="1.0" encoding="UTF-8" ?>
<%# page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/first.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TestPage - Test1</title>
</head>
<body>
<div id="page-container">Hello World</div>
<%Date d = new Date(session.getLastAccessedTime());%>
this page was last viewed <%= d.toString() %>
</body>
</html>
css:
#CHARSET "UTF-8";
html, body {
margin:0;
padding:0;
}
#page-container {
width: 760px;
margin: auto;
background: red;
}
any help on finding a step by step or if you have a good explanation, it would be much appreciated. Thank you
Tag (link) should be an empty-element tag.
This error message is telling you that your link tag needs a closing slash:
<link rel="stylesheet" href="css/first.css" type="text/css" /> <-- see the closing '/'
If that doesn't fix it, my guess is that your path is not quite right.
I changed in the
<head>
<link rel="stylesheet" href="css/first.css" type="text/css">
to
<head>
<style type="text/css">
<%#include file="css/first.css" %></style>
</head>
and in my eclipse project explorer under the "WebContent" file i added a folder named "CSS" and moved first.css to that folder.
Although from what i read, this is a very inefficient way of linking it because it imports the entire css.
In the above code replace 'css' with the full path of the css file
u can get the full path by right click on .css file -> properties->location
copy that and paste in above code in place of 'css'