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.
Related
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
I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.
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 jsp file that holds html elements, it has a table in it with a specific id. When I add the border: 1px; styling internally then it works, but when I want to use a css file that specifies styling, then it doesn't, there's no border at all as a result.
the relevant part of the jsp file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet" type="text/css" href="styles/PassengerStyle.css"/>
</head>
<body>
<table id="main" width="1300px">
...
</table>
</body>
</html>
the PassengerStyle.css file:
#main {
border: 1px solid black;
}
the css file is in the styles folder that is in the same folder as the jsp file.
What did I miss?
It probably can't find the stylesheet, i.e. the url is wrong. Have you tried navigating to where the code in 'view source' thinks the file is located? That's probably different then where it is.
You can also try adding body { background-color: red; } to see if any styles from that stylesheet apply.
I would try to see if any other styles from the stylesheet apply (or do a test), if they do, then I would wonder is the table dynamically generated? If other styles do work, I would try giving the table to be styled a class in the tag versus using the id reference in the style sheet and see if that works. If nothing applies, probably a broken style sheet link.
I would also recommend putting the 'width=1300px' in the css style sheet along with the other css styles.
You can use Firebug or Chrome developer tools to see if your CSS is being overridden by different rule, and you can use the network tab of those tools to see if there were any errors loading the external stylesheet.
Adding !important to your css style can help in debugging, although I don't recommend it for production use.
Also try clearing your cache to see if a previous version of the stylesheet is being used.
Try this:
#main {
border: 1px solid black !important;
}
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