If a CSS file that starts with a #import url() containing a link to a stylesheet hosted on a external server and the request to load that file fails, will the subsequent CSS rules in the rest of the file be applied?
For example:
/* main-styles.css */
#import url("//external-url.com/styles.css")
h1 {
color: red;
}
Will the <h1> element be colored red?
use this in your head section..
<link rel="stylesheet" type="text/css" href="external-url.com/styles.css">
instead of using import..
After testing in both Chrome and Firefox browsers it appears that having the #import url() request fail does not impact any styles contained in the rest of the CSS file from being applied correctly.
I want to use a custom font on my website. I am using the custom font on one CSS sheet and I have already specified it with
#font-face{
}
I'm using the same font on another CSS page. Do I have one again specify the font with the #font-face on the other CSS page? Or is specifying it on just one styling sheet enough?
There is no such thing as "CSS pages". There are HTML pages, which can use CSS stylesheets. You write a stylesheet that includes your #font-face rules as well as normal styling rule, and then include those on your HTML page using
<link rel="stylesheet" href="yourstylesheet.css">
and you add that to every HTML page that needs to load that particular set of CSS instructions. So, say you have two pages, "index.html" and "about.html", both html files need that <link...> code.
(Also note that in HTML5, there is no .../> or ...></link> at the end of that)
Following on from a previous question, I have managed to get the 'screen' version (HTML) of a document into PDF format using the <cfdocument format="pdf"> tag. I need the styling of the PDF to be different to that of the screen version for obvious reasons (e.g. different header styles).
I know that you can use Media Queries in CSS so that different styles are applied for printing, screen, tv etc. But how do I supply a different set of CSS styles to the <cfdocument> tag so that it renders correctly?
My initial solution was to apply a class to the containing div of the <cfdocument> tag called .pdf and then write new styles for the content based on that class inside my main CSS file. So for example a style would be .pdf h1 {font-size:20px;}. The CFML would look like this:
<cfdocument type="pdf">
<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
<div class="pdf">
<h1>Document Title</h1>
... {document body here} ...
</div>
</cfdocument>
Is there a better way to do this at all? Is there anyway to pass a different stylesheet just for PDF rendering? Can it be done with Media Queries perhaps?
How are you generating the PDF, via a parameter in the querystring? Something like index.cfm?page=foo&format=pdf? If you aren't, you could easily add a parameter like that, then in your CFM:
<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
<cfif structKeyExists(url, "format") AND url.format EQ "pdf">
<link href="/css/pdfStyleSheet.css" rel="stylesheet" type="text/css">
</cfif>
pdfStyleSheet.css would contain only the CSS overrides for the PDF.
I am beginner in SAPUI5. I am building SAPUI5 application with HTML5 in Eclipse. In index.html page I am creating a html5 page, I have created css folder under WebContent. In index.html I added to refer css file. But properties in css are not affecting in html page. Do I need to add any other code to refer CSS file.
Css:
#CHARSET "ISO-8859-1";
body {
background-image: "image/splash-sunrise.jpg";
background-size: 100px 100px;
background-repeat:no-repeat;
}
To use CSS within the SAPUI5 environment you should link your controls to a specific CSS class. You can do it like this:
var myButton = new sap.m.Button();
myButton.addStyleClass("myButtonStyle");
And your CSS could look like this:
#CHARSET "ISO-8859-1";
.myButtonStyle {
color:#FFCCDD;
}
Make sure that you load the CSS file into your application, for example like this in your html file:
<link href="css/style.css" type="text/css" rel="stylesheet" />
Of course you can use this for your whole page as well. For your needs you could also take a look at the App control which provides some utilities for background images if you´re using mobile controls.
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.