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
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>
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;
}
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
I can not get a simple CSS to apply to my jsp page. The page displays, but just black on white (no underline). The TOMCAT localhost_access_log shows the GET of the CSS is successful (200).
using Tomcat with directories:
web-apps/myapp
--jsp -- cat_list.jsp
--css -- main.css
--WEB-INF
main.css:
h3 {
background-color: blue;
text-decoration: underline;
}
cat_list.jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Category List</title>
<LINK rel="stylesheet" type="text/css" href="css/main.css" media="screen">
</head>
<body>
<h3> Test Text </h3>
</body>
</html>
What am I missing?
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;
}
}