I have the following html:
<!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">
<head>
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span class="print">Print only</span> - <span class="noprint">Display Only</span>
</body>
</html>
main.css
#import url("screen.css") screen;
#import url("print.css") print;
screen.css
.print
{
display:none;
}
print.css
.noprint
{
display: none;
}
span.print
{
display: inline !important;
}
div.print
{
display: block !important;
}
When I view the page in the browser then as expected the "Display Only" span displays and the "Print Only" one doesn't.
However, when I go to print preview, or print the page, it doesn't appear to be using print.css?
I'm using IE8, which I thought supported #import?
Apparently IE doesn't support the "print" on the end of the #import line.
Use this instead:
#import url("screen.css");
#import url("print.css");
then add the "#media" rule into the stylesheet itself.
#media print
{
.noprint
{
display: none !important;
}
span.print
{
display: inline !important;
}
div.print
{
display: block !important;
}
}
Related
I'm trying to use a Jupyter notebook to teach HTML and CSS. I can create an HTML block in a Jupyter notebook with %%html. However, when I try to include a SOME CSS tag the CSS doesn't take effect. (I can use embedded CSS).
EXAMPLE that works
The following works and the content is displayed as an h1 and the color is blue:
%%html
<h1 style="color=blue;">Hello</h1>
EXAMPLE that does NOT work
The following does NOT work.
The content IS displayed as an h1 BUT the color is NOT blue:
%%html
<style>
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
Other things that I've tried
None of the following work either:
I tried using type="text/css"
%%html
<style type="text/css">
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
I tried using the --isolated option
%%html --isolated
<style type="text/css">
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
I tried using an entire HTML document.
%%html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1: { color: blue; }
</style>
</head>
<body>
<h1>hello</h1>
</body>
</html>
I tried using the IPython HTML function - the CSS in the tag doesn't get rendered.
from IPython.core.display import HTML
HTML("""
<style>h1: { color: blue; }
</style>
<h1>hello</h1>
""")
To sum up:
Is there any way I can use a Jupyter notebook to teach CSS ?
you have a typo in your css,
you have add : after h1
h1 : { ... }
%%html
<style>
h1 { background-color: yellow; }
</style>
<h1>hello</h1>
Here is a example HTML page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Test iframe</title>
<style type="text/css">
#node1 {
color: red;
}
#media only screen {
#node2 {
color: blue;
}
}
#media only print {
#node2 {
color: yellow;
}
}
</style>
</head>
<body>
<div id="node1">Hello</div>
<div id="node2">World</div>
</body>
</html>
When using cefsharp to open the page and use webbrowserextensions::printtopdfasync to print it to PDF, I want the color of #node2 is blue. But actually, the color is black.
Is there any way to make the css for screen media type to function in the printed PDF?
I have the css code below but it doesn't apply the css to html in general only to h1 and h3 i have used the same type of looking code before but it worked
html {
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
html is as follows I could not find a error in it.
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Official Volleball</title>
<link href="VolleyB/CssforVB.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Official volleyball team score</h1>
<h3>Wins:1 Losses:0</h3>
<h2>Number of spikes by shawn</h2>
<h4>Spikes:3</h4>
</body>
</html>
You're applying styles to html that you appear to be wanting applied to body.
Change html to body in your CSS so that the styles apply to the correct element.
body { /* Change html to body */
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
I have html file width css file included in head section that has been minified with cssmin, additionally the html has been minified with htmlmin grunt task succesfully, but there is a little problem with html minified, the css and javascript included directly on the head secction is not minified by htmlmin, obiously this task if for html, not for css or javascript.
How I can minify css and javascript included in head section?
for example: this is my Dummy initial html file:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Some title</title>
<link href="mycss.min.css" type="text/css" rel="stylesheet">
<style>
.class1 {
color: black;
/* some other properties */
}
.class2 {
color: white;
/* some other properties */
}
/* more and more classes */
</style>
</head>
<body>
Some html code
</body>
</html>
When I run htmlmin grunt task the result are this:
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>Some title</title><link href="mycss.min.css" type="text/css" rel="stylesheet"><style>
.class1 {
color: black;
/* some other properties */
}
.class2 {
color: white;
/* some other properties */
}
/* more and more classes */
</style></head><body>Some html code</body></html>
Notice that all is minified except the css and some javascript code that I has omitted in this example in the head section
I have a textbox. When i hover upon it, using chrome, it works fine. However, none of the IE versions are seems to recognize the hozer effect. Here is my css file.
.myOnlyTextbox
{
background-color:White;
}
.myOnlyTextbox:focus
{
background-color: #FFDFBF;
font-weight: bold;
}
.myOnlyTextbox:disabled
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover:enabled
{
background-color: #FFB66C;
}
and here is my master file
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server" >
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
and in the child pages, I am using this header:
asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../Styles/myTextbox.css" rel="stylesheet" type="text/css" />
</asp:Content>
and in the body tag, i define textbox like this.
<asp:TextBox ID="txtSearchByBowzerNo" runat="server" ValidationGroup="ByNo"
CssClass="myOnlyTextbox"></asp:TextBox>
How can I use this css in almost all browsers? any idea?
:enabled and :disabled aren't supported in IE < 9; so a fall-back might be required... Try to use selectivizr.js.... CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. http://selectivizr.com/
maybe try without multiple pseudo-elements :
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}
Try changing your rules to the following
[disabled].myOnlyTextbox, [readonly].myOnlyTextbox
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}