DIV CSS Style Example

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.

Write CSS Style for DIV tag

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 div
My DIV 1
My DIV 2
My DIV 3
My DIV 4

Here 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 Example

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

More Div CSS Example
  • css for div border radius
    .myDiv {
        border: solid 1px #0094ff;
        padding: 10px;            
        border-radius: 10px;
    }
    
  • css for div Circle, radius Circle Css
         .myDivCiecle {
            width: 100px;
            height: 100px;
            background-color:blue;
            border-radius: 50%;
        }
    
  • css for div Oval shape, radius Oval Css
     .myDivOval {
        width: 140px;
        height: 50px;
        background-color: blue;
        border-radius: 100px / 50px;
        }
    
  • css div background color
    .myDiv {
        background-color: #808080;
        color: #fff;
        font-weight: bold;
    }
    
  • css div background image
    .myDiv {
        background-image:url('myimage.png');
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-position-x:center;
        background-position-y:center;
    }
    
  • css div vertical align middle
    .myDiv {
        vertical-align:middle;   
    }
    
  • css div shadow, CSS Shadow Effects
    CSS Shadow Effects
    .myDivBoxStyle {
        box-shadow: 10px 5px 5px red;
    }
    

    Learn more about CSS Box model


You may also read following tutorials to understand the use of div tag and difference between span and div tag.

CSS Style Examples