Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?
Here is what I mean: http://www.webdevout.net/test?01I
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
noscript {display:inline !important;}
</style>
</head>
<body>
<p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
</body>
</html>
I would recommend a different approach over using script/noscript tags.
Something like this works best:
<!DOCTYPE html>
<html class="noJS">
<head>
<title>noJS Demo</title>
<style type="text/css">
html.noJS .jsRequired,
html .noJS{
display: none !important;
}
html.noJS span.noJS{
display: inline !important;
}
html.noJS div.noJS{
display: block !important;
}
</style>
<script type="text/javascript">
function onDocumentLoad(){
var html = document.getElementsByTagName("html")[0];
html.className = html.className.replace("noJS", "");
}
</script>
</head>
<body onLoad="onDocumentLoad();">
<p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
</body>
</html>
Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:
$(document).ready(function(){
$("html").removeClass("noJS");
});
Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:
"Insert the following code into the <head> section of your Web page:
<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>
When you need to use <noscript> inline, use <span class="noscript"> instead."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">document.write('<p>This is some text</p>');</script>
<noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
</body>
</html>
Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.
Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.
Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.
As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.
Related
So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!
You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>
You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}
Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}
Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}
<!DOCTYPE html>
<html>
<head style="border:2px solid black;">
<p>dgdgsdg</p>
</head>
</html>
Why cannot head element in this code be styled ? Is it because head element can only have metadata and hence cannot be styled ?
It can. It is just display: none by default because it doesn't contain any data that should be part of the display. (Elements that have display: none aren't rendered, so any border on them would not be shown.) It only contains things like references to stylesheets and the <title> (which is rendered outside of the viewport).
head {
display: block;
border:2px solid black;
height: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>dgdgsdg</title>
</head>
</html>
In your example you have tried to put a <p> element inside the <head>. This is invalid HTML.
The start tag for the <p> implicitly ends the head element and starts the body element. Then your </head> tag gets discarded because it doesn't match any open element.
Use a markup validator to find this kind of error.
You might be confusing the head element with the header element.
As you said, head is kind of container for metadata, therefore its contents are not displayed. As far as i know, only following elements can go inside <head> tag:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
The <head> is a container for metadata, don't get confused by <header>, which is inside the <body>, and it normally contains the Logo, Navigation Menu, etc.
https://www.w3schools.com/html/html_head.asp
For some odd reason when I try styling this html page with a backround in css nothing appears.
Any Ideas on how to fix
-Thanks
<html>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
<style>
body {background-color:#b0c4de;}
</style>
</body>
</html>
It should look something like this (notice I moved the style tag within the head tag):
<head>
<style>
body{
background-color:#color;
}
</style>
<head>
Why is your style tag in your <body> tag? It should be in the <head> tag:
<html>
<head>
<style type="text/css">body { background-color: red; }</style>
</head>
<body>
</body>
</html>
Or even better, put your css in a separate .css file.
First of all that's not how css works or how html works. You should put your style tags in html head section. And you should determine html element where you want to set background-color.
<html>
<head>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
</html>
Usually the syntax is like so:
<html>
<head>
<style>
body { background: #121212; }
</style>
</head>
</html>
With the style tag in the head tag.
You will want to move your <style> tag inside of your <head> tag.
Try this code:
CODE
<style>
body {
background-color:#b0c4de;
}
</style>
<body>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
SAMPLE
http://jsfiddle.net/Uy2Zb/
(Everything is tested in the latest firefox.)
This html-code creates an almost screen-filling red box:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
But adding a doctype declaration disables relative heights and makes the div's height zero:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.
A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).
Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.
You can do it this way: http://cdpn.io/aHlCd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
You can also just set height on the div rather than min-height.
The above is the answer to why, if you were looking for a fix, setting the position to absolute and applying top,right,left and bottom should do the trick:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>
My page is referencing an CSS style sheet with the definition:
html {background-color:#FFFFFF;background-image:url('../images/Background.png');background-repeat:repeat-x; }
How do I overwrite the background-image element at the page level? I need to overwrite the setting for just one page in my application.
Add a class to the html element and then use some inline styling to override the external stylesheet's styling. You could also place the inline style in an external style sheet which would be best practice.
<html class="myHtmlTag">
<head>
<link href="externalStyle.css" rel="stylesheet"/>
<style>
html.myHtmlTag{
background: none !important;
background-image:none !important;
}
</style>
</head>
<body></body>
</html>
If you are targeting only the html tag without any other selectors than you can simply include another html style AFTER the main css. Per CSS specificity - they will only have the value of 1 tag each (no ids, no classes) - so the latter one will style the element.
<html>
<head>
<link rel="stylesheet" href="main.css" />
<!-- anywhere from here down you can include a style to over ride html -->
Here's a quick demo:
html {background-color:#000;background-image:url('http://lxmpro.com/cms/wp-content/uploads/2012/01/site-background-pattern-07.jpeg');background-repeat:repeat-x; }
/* second reference to html tag overrides the first */
html {background-image:url('http://www.noupe.com/wp-content/uploads/2009/10/wallpaper-pattern.jpg');}
Working Demo - http://jsfiddle.net/K68D3/
Use the !important property on the background background-image style like so:
html{background-color:#000000 !important;background-image:url('your/image/path') !important;...}
Can you apply a class to the body tag? IE:
<body class="home">
<body class="articlepage">
Otherwise, you technically could use jQuery, assuming you have access to drop code on the page to do the function but are locked out
<script>$("body").addClass("home");</script>
----or------
<script>$("body").addClass("articlepage");</script>
These allow you to do classes:
body.home {background-image:url(homebg.jpg);}
body.articlepage {background-image:url(articlebg.jpg);}
Basic inline style override of class background color:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city" style="background-color: tomato;">London</h2>
<p>London is the capital of England.</p>
</body>
</html>