If I use css code directly inside of the html code it works.If I use by linking css file inside of the html by tag it is not working.But I tried with ffox viewsource and link for css redirects to the perfect CSS.Please enlight me in this Case.Thanks in Advance.
CSS(POStyle.css) File included like this in HTML :
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
POStyle.css has
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
CSS inside the html directly :
<style type="text/css">
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
</style>
When using:
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
The browser uses the string literal $contextpath/css/yes/POStyle.css to request the CSS file. There is no replacement that occurs as you would expect in JSP files or some other view technology.
You must use either an absolute or relative url to the file:
Relative
<link href="../css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Absolute
<link href="http:/www.mydomain.com/context/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Use {$contextpath} instead of $contextpath. It is a smarty variable.
Related
For example, a.html
<link rel="stylesheet" href="a.css">
a.css
.bg {
width: 100%;
background: url(/a.gif) bottom repeat-x;
}
The browser will get a.html first, then a.css, then a.gif.
Is there anyway to put a.gif in html so the browser can request a.css and a.gif at the same time?
Yes, you can use the prefetch tag, like this in your <head>:
<link rel="prefetch" href="/a.gif">
I'm just new to CSS and I want to run this particular animation but not sure yet how to call it in my html file
http://www.impressivewebs.com/demo-files/css3-animated-scene/
Type in the CSS code in a file named `style.css
Then include it as shown:
<link rel="stylesheet" href="style.css">
Place style.css and a HTML page, for examplepage.html in the same folder and open `page.html. Should work :)
I have set up a JS fiddle for you:
http://jsfiddle.net/kr2XU/
You have to link your CSS in the HTML file like this:
<link rel="stylesheet" href="style.css">
For the future, you should know very easy and good way of animating content in your HTML files is using an Adobe product called Edge Animate. It is available with a free Creative Cloud membership.
You can learn more about it here.
About calling CSS selectors, let's have an example:
main.css
.class1
{
background-color: #fff;
border: 1px solid #000;
}
#another_selector
{
background-color: #eee;
border: 1px solid #666;
}
In your HTML file, you will have:
<div class="class1"> This div has the CSS class ".class1" </div>
<div id="another_selector"> This div has the "#another_selector" id </div>
See here a JSFiddle that will help you figure out what's going on with those classes and ids.
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
So I'm kind of a programming noob, but I thought I had CSS referencing down...apparently not. I've referenced stylesheets, I've done it externally, internally, you know, the works. For some reason, however, when I went back to tweak an older app I had worked on that had the CSS initially included within the HTML and moved the CSS out, then referenced it, the CSS oddly stopped working altogether. I've got the directory set up as follows:
App name (folder)
static (folder)
main.css
templates (folder)
template_referencing_css.html
main.py
app.yaml
So here are the various references I've tried with main.css being inside the static folder:
<link type="text/css" rel="stylesheet" href="../static/main.css" />
<link type="text/css" rel="stylesheet" href="/static/main.css" />
Here is what I tried when I moved main.css to templates folder with the template referencing it:
<link type="text/css" rel="stylesheet" href="main.css" />
The css file is just a longer version of things like:
body {
font-family:sans-serif;
width: 850px;
background-color: #F0F8FF;
color: #008B8B;
margin: 0 auto;
padding: 10px;
}
.error {
color: red;
}
label {
display: block;
font-size: 20px;
}
remove the leading slash -
<link type="text/css" rel="stylesheet" href="static/main.css" />
In general this isn't necessarily a good idea, but try to use the full absolute path (like "C:/Whatever/another_dir/main.css"). At least this will tell you if the problem is finding the css file or not.
I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?
<html>
<body>
<style type="text/css">
body
{
font-size: 62.5%;
background-color:black;
}
h1
{
color: red;
}
#media print
{
body{
background-color:yellow;
}
h1 {
color: black;
}
}
</style>
<h1>This is just a test</h1>
</body>
</html>
The easiest way would be to create a print.css style sheet that's normally included with print media specified.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Then on your print preview screen, you could use the same print.css with screen media set:
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.