Search notes:
CSS: Experiment with the HTML and BODY tag
I was surprised that the
<html> tag can be styled in with
CSS , although all rendered content is placed as direct or indirect child of the
<body> tag.
The following example tries to demonstrate two findings of the experiments I conducted with these two tags. The following is a simple
HTML :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>The HTML and BODY Tag</title>
<style type='text/css'>
html {
border : red 2px solid;
left : 20px;
top : 10px;
height : 200px;
position : absolute;
background-color: yellow;
overflow : auto;
}
body {
height : 300px;
overflow : auto;
border : blue 4px dotted;
background-color: lightgreen;
}
</style>
</head>
<div>I am not in the body</div>
<body>
<div>one </div>
<div>two </div>
<div>three </div>
<div>four </div>
<div>five </div>
<div>six </div>
<div>seven </div>
<div>eight </div>
<div>nine </div>
<div>ten </div>
<div>eleven </div>
<div>twelve </div>
<div>thirteen </div>
<div>fourteen </div>
<div>fiveteen </div>
<div>sixteen </div>
<div>seventeen</div>
<div>eigtheen </div>
<div>nineteen </div>
<div>twenty </div>
</body>
</html>
In a
browser , it might be rendared like so:
Two obersvetations are, imho, noteworthy. • Although the <html> tag is limited in size (height attribute and red border around the html area), the value of its background-color attribute controls the entire browser viewport. • Similarly, the scroll bars are not attached immeditatly to the right of the html area, but to the borders of the browser window.
