a. src - image is not loading in firefox when i used "img src". loading in chrome and IE.
b. href - it is not working while i am trying to add css file externally.
mystyle.css
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
css.htm
<head>
<link type="text/css" href="C:\Divakar_Repository\html_learning\mystyle. css">
</head>
<h1>CHEcking the css style</h1>
but it is displaying the output as "CHEcking the css style" in black color.
actuallly the output should be as "checking the css style" in blue color.
c. import - it is not working.
import.htm
<head>
#import "C:\Divakar_Repository\html_learning\mystyle.c ss";
</head>
<h1> CHEking the css file </h1>
But it is returning the output as below.
#import "C:\Divakar_Repository\html_learning\mystyle.c ss";
CHEking the css file
Any help would be really appreciated.
Thank you....
You have to use #import where you use your CSS, not just in the head element, and with a properly format.
You can #import css files in the style element or in your css file this way:
#import url(mystye.css);
Your syntax is more Sass/less related, not CSS.
And also take care about file names.
Also before opening a h1 tag you should open a body tag first.
Use relative paths when referencing your stylesheets:
<link type="text/css" href="mystyle.css">
The link is relative the position of the document you link from in your directory structure, so make sure the path is correct. Also make sure there are no spaces in weird places.
The #import function only works from within a stylsheet, so either you use it in a .css file or wrap it in <style> tags:
<style>
#import url(mystyle.css);
</style>
Onelast note, in the <head> section, it is required to have a <title> element. You cannot skip this.
Thanks to all.
it worked if i have #import between style element.
and link element is worked after i add the property rel="stylesheet".
but i have some questions.
back slash wont work except IE? because if i point to file with path like c:\ it is not working in firefox and chrome
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
So i have this weird problem that any css i write doesn't work. I tried to create multiple pages and link css but it simply doesn't apply.
If i download a template of the internet if i run the page, their html works.
Here is an example of the most basic code i've written that doesn't work, even though i've run it through validators. It doesn't matter what element im trying to apply styling to it doesn't work.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Test Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Sup! </h1>
</body>
</html>
CSS
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
}
I have tried numerous solutions i've found online, but none of them work.
Can you check your network tab that your style.css is fetched from server and there is no 404 not found.
I would say try "/styles.css"
1. Check your Devtool, see if any error in network, make sure that style.css successfully loaded.
2. Try - Importing External Style Sheets
Write in html head tag:
<style>
#import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
This could be because of the folder structure. So maybe try and make sure your html file and css file are on the same level.
Or you could try "../styles.css" - Again this depends on where your files are in your dir
Everyone has given almost everything that I know. Sometimes its the silly things that we missed out that gives us tough time. Do try and follow this:
make sure both the html and css are under the same folder, in my case the folder is named "ROUGH"
Check for any white spaces before and after the file name. Example: "style " has one white space after the name, it should just be "style"
Using "/" inside the href. Example below href = "/style.css"
So, finnaly figured it out. The encoding was set to utf-16 and everything rendered as chinese kanji. This is the problem solution. Stylesheet taken-over/replaced by Chinese characters
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 ...
I know that inline styles are strongly discouraged, and mostly we should use <style> tags in <head> or an external CSS file.
What I am not clear on is the usage of <style> tags in a .html file and actual .css files.
Should I move all style code from home.html to home.css and include it via the <link> tag?
Or using <style> tags in <head> perfectly acceptable? My boss says I should include all code in .css files.
Note:
I am not looking from a best-performance standpoint; rather clean code and best practices while writing HTML/CSS and facilitating better debugging/reading.
this below is example to separate ......
/* .css file */
a {
color: green;
text-decoration: none;
}
<!-- .html file -->
Google
You should definitly take a look at this site: Best practice of CSS (not every point is compulsory in any case)
Probably to add is that you should if your project gets bigger split
your whole css file into multiple.
Especially when splitting your files its getting usefull then its extremly convenient if you decided to separate your html and css. Otherwhise you're getting a huge html file und youre loosing the readability.
If you worked onces with css files of 8000lines youre thankful that you splitted up your css
I prefer you create a seperate css file then you call the url in your html file inside the head tags like this:
...html file
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Google
</body>
</html>
...CSS file
a { color: green; text-decoration: none;}
Having an external CSS is very much helpfull because you can call the file whenever you want to style another page without having to rewrite the code form scratch.
I have a small CSS file with contents:
<style type="text/css">
li {
padding: 10px;
font-family: Arial;
}
</style>
Supposed to leave some space between list elements and change the font. Now, If I include this CSS file in the HTML like below:
<link rel="stylesheet" href="./css/lists.css" type="text/css" />
it does not work :(.
However, if I include the actual CSS code inside the html "head" block, it works.
I really prefer sourcing CSS (so different files can share the code). Any idea whats wrong and how to fix?
regards,
JP
You are supposed to omit the
<style type="text/css">
and
</style>
tags from your .css files, as those are tags used only in HTML to denote CSS styles if you're including them in your page <head>. If you include them, the browser will attempt to treat them as CSS code, which it isn't, and that causes your stylesheet to not work.
You shouldn't use script tag in your css files. Just li {..} is enough.
Also, checking path (./css/lists.css) might help. If it has mistake, nothing will be included.