The focus here is the div (division) tag. Div is a logical segment /block on an html page. One can apply layout, style on div sepately so as to easily control the look of a web page.
Here is an exmaple with a few divs as structured below.
-----------header----------
left menu | right text
-----------footer-----------
Note here it assigns to each div an individual id so the css can target them separately. Also class is available if it needs to apply style on multiple tags, but class is just handy not the one way to assign style to multiple tags.
<html>
<head>
<title>test css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "container">
<div id = "header" class = "header_footer">this is header</div>
<div id = "content">
<div id = "left_menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>
<div id = "right_text">
<h1>heading 1</h1>
<p>A rocket is a missile, spacecraft, aircraft or other vehicle that obtains thrust from a rocket engine. Rocket engine exhaust is formed entirely from propellant carried within the rocket.</p>
<h1>heading 2</h1>
<p>A spacecraft is a vehicle or machine designed to fly in outer space. A type of artificial satellite, spacecraft are used for a variety of purposes, including communications, Earth observation, meteorology, navigation, space colonization, planetary exploration, and transportation of humans and cargo.</p>
</div>
</div>
<div id = "footer" class = "header_footer">copyright@nothing</div>
</div>
</body>
</html>
Then use a CSS file to control the style of the html so it displays properly.
The hash #id targets an individual tag.
The .class targets a class of tags.
The default html tags (e.g. body, table, li, etc.) use the name of the tag directly.
For divs, the float propery control where a div aligns to. The margin-left and margin-right keep the container in the center.
The footeer use "clear:both" to avoid overlapping with content div.
#container {
width : 800px;
background-color : lightgray;
margin-left : auto;
margin-right : auto;
}
#left_menu {
float : left;
}
#right_text {
float : right;
width : 80%;
}
#footer {
clear : both;
}
.header_footer {
background-color : gray;
color : white;
text-align : left;
}
body {
font-weight : bold;
background-color : white;
}
Hover over
hover over a div and then change back color and cursor shape
A div element's original class:
.middle-panel {
background-color: white;
width: 10%;
}
Now add the "hover" effect, which occurs when the mouse cursor moves over the div element
.middle-panel:hover {
background-color: red;
cursor: ew-resize;
}
Use a custom cursor image on hovering over the div
This change the cursor to whatever custom cursor shape.
The png image need be small enough 16x16 or 32x32.
.middle-panel:hover {
background-color: red;
cursor: url('/path/left-arrow.png'), auto;
}
Use a secondly class to conditionally decorate the panel
On top of the base class above, further define a second class for the left-expanded condition. note the <dot> to connect a second class.
.middle-panel.left-expanded {
border: 2px blue;
background-color: red;
}
And another second class for a different condition.
.middle-panel.left-collapsed {
border: 2px yellow;
background-color: green;
}
In this way, when the div is assigned with different styles conditionally, usually through a script:
The second class follows the base class with a space in between
<div class="middle-panel left-expanded"></div>
or <div class="middle-panel left-collapsed"></div>
The div display different colors, or any other behaviors.