So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...
Related
I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
I am working with my first CSS assignment and i need to use and EXTERNAL css file. Everything is saved on my hard drive. I my HTML is not picking up my stylesheet and i have no clue what im doing wrong.
Code:
Browser console:
Well the better way to ask would be to to post the code in the question itself, but no worries! As much as I can see, there are 2 errors in the code:
You have used the link tag within the style tag. Everything within the style tag is read as CSS and not HTML. So the link tag is considered as invalid CSS. Solution: remove the style tag.
Your css file is styles.css and you have linked stylesheet.css. Solution: Change the name of the linked file to styles.css.
So, the code should be:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="C:\users\dilli\CTS 110\Project 1\CSS\styles.css">
</head>
How do I link a CSS sheet to a HTML sheet.
I have
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<h1> Hi </h1>
</body>
</html>
And my CSS page is
h1 {
color: orange;
text-align: center;
}
my CSS page is called "CSS" and HTML page is called "HTML"
I right clicked the HTML Doc and pressed open with google chrome i only see a black heading level 1 of "Hi"
Your CSS file needs to be in the same folder as your html page. It also needs to be the exact same case, capital CSS lowercase css extension. (CSS.css)
folder/index.html
folder/CSS.css
A few things could be the issue here:
Keep your filenames lowercase. Linux servers are case sensitive where windows servers are not. Keeping your filenames in lowercases avoids problems should you ever need to switch.
Make sure you have a doctype set up, otherwise your browser will revert to quirks mode and likely cause problems.
Make sure your files are in the appropriate locations. Because your html links directly to CSS.css and uses no relative pathing, they should be within the same folder.
I am using YSlow to measure overall page performance. However, CSS are declared in Head section of the document still YSlow finds css in the body of the document and suggests to put CSS at top. What may be the reason for the same?
I am not using CSS property in hard code or inline style, for inline style I am applying class to that div like <div class="header"></div>. Also in head tag there is external CSS attched like
<head>
<link rel="stylesheet" type="text/css" href="/css/menu.css" />
</head>
But YSlow finds css in body part rather than head section.
Your question is not clear, but I would guess you probably have in line CSS tags
Something like
<div style="float:left">asf asdf</div>
So, your document could be
<html>
<head>
<!--CSS declarations and title etc-->
</head>
<body>
<!--body code etc referencing the exteranl CSS sheets or the CSS declared in the header-->
<div style="color:#366;">These words are in this color</div>
</body>
</html>
I encountered this problem, and found that it was due to having an A tag before my css imports (for claiming Google Plus identity). I moved that tag to just before the closing HEAD tag, and YSlow no longer flags the issue.
I'm learning CSS/HTML and am trying to import a simple css class into the html document, but something appears to have gone awry. Here is Logo.css:
.logo{
color:rgb(255,232,57);
background-color:rgb(0,0,75);
font:ChopinScript;
font-size:96pt;
}
and my html document:
<head>
<link rel="stylesheet" href="Logo.css" type="text/css">
</head>
<div class="logo">
<p class="logo">This text should look like my logo!</p>
</div>
<img src="404-tumblebeast.jpeg" align=center valign=center />
The image shows up fine in Safari, but the text is just generic text. Does the link tag not import as I thought? How would I do the equivalent of #import or #include, if isn't taking care of that?
end the link tag (see below: the /> instead of >).
<link rel="stylesheet" href="Logo.css" type="text/css"/>
Verify that the Logo.css is in the same directory as the html file or use the correct path to the Logo.css file. Just in case you are doing this, you can't put the css under the WEB-INF directory.
You only need the class on the div element or on the p element, not both.
Edit:
I was poking around and found some info about embedding fonts in a page: http://jonrohan.me/guide/css/font-face/