I'm looking to use 'root' or '~' within a style tag to keep all my styles together and in one location.
Instead of having to rely on '../../' notation, can this be achieved?
My current code..
<style type="text/css">
#import url(../../../styles_dev.css);
#import url(../../styles/AssessHome.css);
li{font-size: 14px;}
</style>
Is there a way to convert this to something like this...
<style type="text/css">
#import url(~/styles_dev.css);
#import url(~/styles/AssessHome.css);
li{font-size: 14px;}
</style>
Thanks for any help!
No you can not use the ~ symbol there, is not going to be translate.
Alternative you can use the root of your server and run and debug your site on local iis, or use the relative paths as you all ready do.
Other solution is to render in code behind this lines using a custom handler for css.
Related
I have a wordpress theme that within one of its CSS files uses the #import function to bring google fonts I would like to replace it in a more optimal way and that fulfills the same functions ....
I leave some code to see if you can help me.
#import url (https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
#import url (https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.font_weight300 {font-weight: 300! important}
.font_weight400 {font-weight: 400! important}
I had thought of doing something like that
<link href = "https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel = "stylesheet">
but that code seems to me that it goes more in an html file for example, but this code with #import goes in a .css file so that's where my doubt goes.
how to best code for css file.
this is the right way to add a font to your project import is for importing a css file if you have the font locally you can put the address in src
see more about font-face on Mozilla Developers Network (MDN)
#font-face {
font-family: "CustomFont";
src: url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
}
and also for using important on a css property you should do this
.font_weight400 {font-weight: 400 !important}
I've just started using LESS to simplify my CSS stuff. I want to be able to define the colours in one file, so I can have several colour schemes that I can switch between just by changing which file is being referenced.
I tried something like this:
<link rel="stylesheet/less" href="/css/colours.less" />
<link rel="stylesheet/less" href="/css/styles.less" />
But I get "variable not defined" errors in the styles.less file.
I can "fix" this by using import "/css/colours.less" at the start of styles.less, but I have to do this for every single LESS file, and it makes it much, much harder to change what file is being used.
Is there any way to define variables in one file and use them in another? Or any way to auto-import the colours.less file at the start of the other files?
You should be compiling your .less files into a single .css file and including it once on every page (i.e. styles.less compiled to styles.css). That way the browser doesn't have the overhead of recompiling the CSS every page load. Also the .css file can be cached.
Instead of adding:
<link href="/css/colours.less" />
<link href="/css/styles.less" />
<link href="/css/forms.less" />
<link href="/css/widgets.less" />
...etc...
It should be:
<link href="/css/styles.css" />
And in styles.less you should have:
#import 'colours';
#import 'forms';
#import 'widgets';
...etc...
Otherwise, if you want to reuse colours.less in multiple .less stylesheets, you'll need to #import them in each stylesheet.
For development purposes, I recommend using a single, primary .less file that contains only variable declarations and #import statements. That way it's easy to find where additional scripts are added. LESS makes it very easy to add or remove stylesheets to keep the code organized.
For example, style.less might look something like:
// import statements
#import 'core';
#import 'mixins';
#import 'lists';
#import 'buttons';
#import 'forms/form';
#import 'forms/search';
#import 'forms/contact-us';
#import 'modules/module';
#import 'modules/archive';
#import 'modules/events';
// variables
#image-path: '/assets/images/';
#font: Helvetica, Arial, sans-serif;
#black: #000;
#dark-grey: #333;
#grey: #888;
#light-grey: #CCC;
#white: #FFF;
#red: #F00;
This structure makes it easy to add a new stylesheet, such as when adding a new module:
...
#import 'modules/events';
#import 'modules/foo'; //add another module
...
It also makes it very easy to remove styles if they're no longer being used. If the foo module was to be removed, it's easy to remove all the foo styles simply by removing the #import 'modules/foo'; statement.
I imported another stylesheet using #import in the main style sheet file. I would like the changes I have made in the #import stylesheet to override the main style sheet. Is this possible?
If your goal is to override styles by importing another stylesheet, you should use the order of precedence.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Here the style.css is the original and style-override.css would contain your new custom css. These styles will override the styles from style.css. This means you won't need to use !important because the style is overwritten.
Avoid !important whenever you can.
To do #import
<style type="text/css">
#import url("style.css");
#import url("style-override.css");
</style>
Also as a side note if you would rather remove all styles from the page, use a css reset.
<style type="text/css">
#import url("style.css");
#import url("reset.css");
#import url("style-override.css");
</style>
Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.
#import the second stylesheet at the end of the first.
You're confusing !important and #import
This solution working perfect for me.
Make copy of your main.css and rename it to style.css.
In main.css delete all and past :
#import url("style.css");
#import url("style-override.css");
Thats all.
If your second stylesheet uses the same selectors, then it should override the first without any problem.
CSS has a very strict order of precedence for determining which one should be used, but if all else is equal and two styles have exactly the same precedence level, then it will use the one which was specified last. This allows you to override a style simply by repeating the same selector later on.
The only exception to this is if the first style was specified as !important. In this case, it is much harder to override it. Even specifying another style as !important may not always work (I've seen cases where it worked in some browsers but not others).
So if the previous stylesheet used !important then you may have problems overriding it. But if not, it should be fairly simple.
You can also use more specific class name - for example if you want to change
div#sample {
max-width: 75%;
}
on new css use
body div#sample {
max-width: 75%;
}
Just keep in mind, that overqualified selectors are not the best idea ;)
I have a set of Styles that were first created inside the style attribute on a page.
I want to move it from being on the page itself into a stylesheet.
however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.
This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?
Am I missing something? I am not changing any of the code, its simply a copy and paste.
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
Make sure you're linking to your stylesheet using a link tag in the head of the HTML document.
If you had:
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
Some common newbie mistakes include:
<style type="text/css" src="path/to/style.css">: because it's a similar syntax to the <script> tag, which would make sense, but is invalid
<link rel="stylesheet" src="path/to/style.css">: but link elements use href not src
placing link elements within the body: although browsers will tend to manage link elements in the body, there are likely going to be some errors, and it's not a defined behavior
not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.
You should make sure the stylesheet is properly imported.
Sometimes the #import doesn't work well if not used accordingly, so always reference your stylesheet:
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
Always remember to close the <link> tag as it's a self-close tag. I think #zzzzBov forgot to mention that.
Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head> section) something like:
<style type="text/css">
body { background: blue; }
* { color: red; }
</style>
and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.
Good luck!
I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.
I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.
So basically
background-image: url('patterns/debut_dark.png');
had to be changed to
background-image: url('../patterns/debut_dark.png');
Don't include <style type="text/css"></style> in your .css file.
I had the same issue and was quite frustrating. I had a css file that was properly referenced, however not all the elements were being loaded from it. As it turns out, it was a cache problem in Chrome. After clearing it and restarting the window, the css elements were working correctly.
Ran across same problem. Found there were lines in my css file that should have been commented out (a block of colour palette information that I had cut and paste to the top of the file for quick reference).
If all your syntax seems fine, then its most likely a browser cache problem that we can easily fix. In your html/php file, reference your new .css style sheet (e.g. styles.css) by adding an extra random parameter. This will force browsers visiting your page to fetch your latest styles.css.
In the of your html/php file, you should have something like this to load your new styles.css file:
<link rel="stylesheet" type="text/css" href="styles.css" />
simply change it to be like this:
<link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />
that extra "?ref=v1" will prevent browsers from re-using the styles.css file they have cached, and will force browsers to get your very latest styles.css file. As you make updates to the styles.css file and upload them to your web server, just change the "v1" to "v2" etc. or whatever naming system you like so that browsers are forced to reload the latest styles.css. Note adding this "?ref=v1" to the link does not need you to change the name of your styles.css file (you can change the file name but i find that gets messy). This is a simple and clean way to force browsers into re-fetching your very latest .css file.
Is it possible to include one CSS file in another?
Yes:
#import url("base.css");
Note:
The #import rule must precede all other rules (except #charset).
Additional #import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.
Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the #import rule.
#import "mystyle.css";
#import url("mystyle.css");
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS 'hack' to hide CSS styles from older browsers.
Refer to this list for browser support.
The #import url("base.css"); works fine but bear in mind that every #import statement is a new request to the server. This might not be a problem for you, but when optimal performance is required you should avoid the #import.
The CSS #import rule does just that. E.g.,
#import url('/css/common.css');
#import url('/css/colors.css');
Yes.
#import "your.css";
The rule is documented here.
In some cases it is possible using #import "file.css", and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
Yes, use #import
detailed info easily googled for, a good one at http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
yes it is possible using #import and providing the path of css file
e.g.
#import url("mycssfile.css");
or
#import "mycssfile.css";
#import("/path-to-your-styles.css");
That is the best way to include a css stylesheet within a css stylesheet using css.
The "#import" rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
<!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" lang="EN" dir="ltr">
<head>
<title>Using #import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#import url("main.css");
</style>
</head>
<body>
</body>
</html>
CSS File "main.css" Contains The Following Syntax:
#import url("fineprint.css") print;
#import url("bluish.css") projection, tv;
#import 'custom.css';
#import url("chrome://communicator/skin/");
#import "common.css" screen, projection;
#import url('landscape.css') screen and (orientation:landscape);
To insert in style element use createTexNode don't use innerHTML but:
<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
#import 'fineprint.css' print;
#import 'bluish.css' projection, tv;
#import 'custom.css';
#import 'chrome://communicator/skin/';
#import 'common.css' screen, projection;
#import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
Import bootstrap with altervista and wordpress
I use this to import bootstrap.css in altervista with wordpress
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
and it works fine, as it would delete the html link rel code if I put it into a page
#import url('style.css');
As opposed to the best answer, it is not recommended to aggregate all CSS files into one chunk when using HTTP/2.0
I have created main.css file and included all css files in it.
We can include only one main.css file
#import url('style.css');
#import url('platforms.css');
Yes You can import easily one css to another (any where in website)
You have to use like:
#import url("url_path");
sing the CSS #import Rule
here
#import url('/css/header.css') screen;
#import url('/css/content.css') screen;
#import url('/css/sidebar.css') screen;
#import url('/css/print.css') print;
For whatever reason, #import didn't work for me, but it's not really necessary is it?
Here's what I did instead, within the html:
<link rel="stylesheet" media="print" href="myap-print.css">
<link rel="stylesheet" media="print" href="myap-screen.css">
<link rel="stylesheet" media="screen" href="myap-screen.css">
Notice that media="print" has 2 stylesheets: myap-print.css and myap-screen.css. It's the same effect as including myap-screen.css within myap-print.css.
I stumbled upon this and I just wanted to say PLEASE DON'T USE #IMPORT IN CSS!!!! The import statement is sent to the client and the client does another request. If you want to divide your CSS between various files use Less. In Less the import statement happens on the server and the output is cached and does not create a performance penalty by forcing the client to make another connection. Sass is also an option another not one I have explored. Frankly, if you are not using Less or Sass then you should start. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html