<!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
Related
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
I'm new to coding in general, and I'm just beginning to code my first website, but when I run this code in Brackets Live Preview, the page shows up blank. Not sure if I'm missing something, or if I have an error in the code. Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<title>My Finger Slipped</title>
</head>
<body bgolor="#000" text="#FFF">
<h1>My Finger Slipped</h1>
</body>
</html>
Actually your pages isn't blank just that you make your body text the color white so you think its blank. Try highlighting the page you will see that there is text there. Typically you would wanna make a separate CSS page for you HTML and link it this way you can change your whole website by just adding div and id's.
HTML
<title>My Finger Slipped</title>
</head>
<body>
<h1>My Finger Slipped</h1>
</body>
</html>
CSS
body {
background-color: #E5DAD3;
}
h1 {
color: white;
}
So I was experimenting with internal stylesheets on the latest version of chrome and it seems that there is a bug that breaks the code.
For some reason, I can not add any comments before background-color:rgb(51,51,51) without causing the code to fail.
Here is my code (background color doesn't change):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
width:100%; <!--browser screen must be fixed width-->
height:100%; <!--and height-->
margin:0px; <!--removes uneven margin added to row's margins-->
background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
}
</style>
</head>
<body>
<h1>
Headline
</h1>
</body>
</html>
Here is my other code (this time background works):
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
width:100%; <!--browser screen must be fixed width-->
height:100%; <!--and height-->
margin:0px; <!--removes uneven margin added to row's margins-->
}
</style>
</head>
<body>
<h1>
Headline
</h1>
</body>
</html>
Notice that the comments might not make sense (I removed extra code but kept the comments). So what exactly is going on? What am I doing wrong?
As defined in CSS2 specification:
Comments begin with the characters "/*" and end with the characters "*/"
So you should use /* */ comments in CSS.
However HTML style comments <!-- --> are also possible, but the only valid position for them is wrapping entire CSS rules block:
<style>
<!--
body {
background-color:rgb(51, 51, 51);
width:100%;
height:100%;
margin:0px;
color: red;
}
-->
</style>
<!-- --> delimiters are used to to prevent CSS blocks from being displayed by browsers that don't support HTML 3.2. (this is the same as wrapping Javascript code with <!-- -->). These are very ancient user-agents though.
You are using wrong comment syntax , use block comment
/* my comment */
in css you dont comment this way like html, use comment this way instead
/* background: grey ; */
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>
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.