SimpleTuts.com
Login Register

CSS Div more properties

Previous Next

We learned about <div> in the last chapter. Here we are going to learn more about the properties

This tutorial covers various properties of the <div> element using CSS. Explore the effects of background-color, dimensions (width and height), margins, padding, and borders.

HTML Structure


<html>
<head>
    <title>Div more properties</title>
    <link rel="stylesheet" href="div-more.css">
</head>
<body>
    <div class="box1">
        <p>This program is free software; you can redistribute it 
        and/or modify it under the terms of the GNU General Public 
        License as published by the Free Software Foundation; either 
        version 3 of the License, or at your option any later version.</p>
    </div>
</body>
</html>
Run Code

CSS Code


div.box1 {
    background-color: aqua;
    
    /* Dimensions */
    width: 500px;
    width: 50%;

    height: 300px;
    height: 40%;
    
    /* Margin */
    margin: 50px;
    margin: 20px 80px;
    margin: 30px 80px 40px 60px;
	margin-left:20px;

    /* Padding */
    padding: 30px;
    padding: 20px 30px;
    padding: 80px 10px 40px 60px;
	padding-top:30px;

    /* Border styles */
    border-style: solid;
    border-style: dotted solid;

    /* Border colors */
    border-color: red;
    border-color: red green blue yellow;

    /* Border widths */
    border-width: 10px;
    border-left-width: 50px;

    /* Border shorthand */
    border: 5px solid indigo; /* border short hand */

}
Run Code

Explaining the Properties

1. Background Color

background-color: aqua;

Sets the background color of the <div> to aqua.

2. Width and Height

Width:

width: 500px; /* Static width */
width: 50%; /* Relative to the parent container */

Height:


height: 300px; /* Static height */
height: 40%; /* Relative to the parent container */

3. Margin

The margin property defines the space around the element.


margin: 50px; /* All sides: 50px */
margin: 20px 80px; /* Top-Bottom: 20px, Left-Right: 80px */
margin: 30px 80px 40px 60px; /* Top: 30px, Right: 80px, Bottom: 40px, Left: 60px */
margin-left: 20px; /* Overrides the left margin */

4. Padding

The padding property adds space inside the element between its content and its border.


padding: 30px; /* All sides: 30px */
padding: 20px 30px; /* Top-Bottom: 20px, Left-Right: 30px */
padding: 80px 10px 40px 60px; /* Top: 80px, Right: 10px, Bottom: 40px, Left: 60px */
padding-top: 30px; /* Overrides the top padding */

5. Border

Borders define the edges of an element. Here are various ways to style borders:

Border Style:


border-style: solid; /* A solid line */
border-style: dotted solid; /* Top-Bottom: Dotted, Left-Right: Solid */

Border Color:


border-color: red; /* Same color for all sides */
border-color: red green blue yellow; /* Top: Red, Right: Green, Bottom: Blue, Left: Yellow */

Border Width:


border-width: 10px; /* All sides: 10px */
border-left-width: 50px; /* Overrides left border width */

Border Shorthand:


border: 5px solid indigo; /* Width: 5px, Style: Solid, Color: Indigo */

Key Observations

Previous Next