CSS Color, Margin, and Padding properties Example

Ashutosh Patel 753 24 Mar 2025

1 Answers

Ashutosh Patel 24 Mar 2025

Here is a simple example that demonstrates the use of CSS properties: color, padding, and margin in an HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Colors, Padding, and Margin</title>
   <style>
       /* Applying Colors */
       body {
           background-color: #f4f4f4; /* Light gray background */
           color: #333; /* Dark gray text */
           font-family: Arial, sans-serif;
       }
       .container {
           background-color: white; /* White background for the content */
           color: black; /* Black text */
           padding: 20px; /* Adding space inside the container */
           margin: 50px auto; /* Centering the container with top & bottom margin */
           width: 80%; /* Setting width */
           border-radius: 10px; /* Rounded corners */
          
       }
       .heading {
           color: #007BFF; /* Blue color for heading */
           margin-bottom: 15px; /* Space below the heading */
       }
       .paragraph {
           padding: 10px; /* Inner spacing */
           background-color: #e9ecef; /* Light gray background */
           border-left: 5px solid #007BFF; /* Blue left border */
       }
       h3{
        color: blue;
       }
       .margin-text span {
     border: 1px solid black;
     display: inline-block; /* Allow margins to take effect */
     padding: 5px; /* Optional: Add padding for better visibility */
 }
 .margin-text .top-margin {
     margin-top: 40px;
 }
 .margin-text .bottom-margin {
     margin-bottom: 40px;
 }
 .margin-text .right-margin {
     margin-right: 40px;
 }
 .margin-text .left-margin {
     margin-left: 40px;
 }
   .padding-text span {
     border: 1px solid black;
     display: inline-block; /* Allow margins to take effect */
     padding: 5px; /* Optional: Add padding for better visibility */
 }
 .padding-text .top-padding {
     padding-top: 40px;
 }
 .padding-text .bottom-padding {
     padding-bottom: 40px;
 }
 .padding-text .right-padding {
     padding-right: 40px;
 }
 .padding-text .left-padding {
     padding-left: 40px;
 }
   </style>
</head>
<body>
   <div class="container">
       <h2 class="heading">CSS Styling Example</h2>
       <p class="paragraph">
           This is a paragraph inside a styled container. We have applied different CSS properties like colors, padding, and margin.
       </p>
       <h3>Text with different Margins</h3>
       <table class="margin-text">
         <tr class="table-row">
          <td><span class="top-margin">Text with Margin top only</span></td>
          <td><span class="bottom-margin">Text with bottom margin</span></td>
          <td><span class="right-margin">Text with right margin</span></td>
          <td><span class="left-margin">Text with left margin</span></td>
         </tr>
       </table>
       <h3>Text with different Paddings</h3>
       <table class="padding-text">
         <tr class="table-row">
          <td><span class="top-padding">Text with Margin top only</span></td>
          <td><span class="bottom-padding">Text with bottom margin</span></td>
          <td><span class="right-padding">Text with right margin</span></td>
          <td><span class="left-padding">Text with left margin</span></td>
         </tr>
       </table>
   </div>
</body>
</html>

Explanation

color: this CSS property change the text color.

background-color: this CSS property change the background color of HTML elements

margin: This CSS property is used to add the space from outside of the contents in a specific or all direction

padding: This CSS property is used to add space inside of the HTML elements in a specific or all directions

Output