In this tutorial you will learn how to write css for div tag, set div heigh and width, position div in center of the page, position div side by side using CSS style.
DIV CSS style Example: CSS style for DIV and Span is often useful; you can directly set standard style for DIV, Span, but that may not be good idea because div and span object are used multiple places with different style, so here we learn how to write class and apply on div and span .
Here are few divHere is css class ".myDiv" for Div
.myDiv { border:solid 1px #0094ff; padding:10px; margin:5px; font-size:15px; font-family:Verdana; text-align:center; border-radius:10px; } .myDiv:hover { background-color:#808080; color:#fff; font-weight:bold; }
You can also specify how any text with hyperlink will look like in your div.
Here is the CSS code.
.myDiv a { color:red; text-decoration:none; } .myDiv a:hover { color:yellow; text-decoration:none; }
Floating Div is very useful for web page designing, using floating div we can any type of responsive website, very simple to set elasticity to a webpage
<div style="float:left;width:25%;"> </div> <div style="float:right;width:70%;"> </div> <div style="clear:both;"></div>
After using float you must use clear style like style="clear:both;"
In this context you should also understand how DIV element can be used HTML and JavaScript
.myDiv { border: solid 1px #0094ff; padding: 10px; border-radius: 10px; }
.myDivCiecle { width: 100px; height: 100px; background-color:blue; border-radius: 50%; }
.myDivOval { width: 140px; height: 50px; background-color: blue; border-radius: 100px / 50px; }
.myDiv { background-color: #808080; color: #fff; font-weight: bold; }
.myDiv { background-image:url('myimage.png'); background-attachment:fixed; background-repeat:no-repeat; background-position-x:center; background-position-y:center; }
.myDiv { vertical-align:middle; }
.myDivBoxStyle { box-shadow: 10px 5px 5px red; }
Learn more about CSS Box model