top of page

List of CSS Properties of Box Model


List of CSS Properties

CSS properties can be categorized into various groups based on their functionality. Here are the main categories of CSS properties: Explore a comprehensive list of CSS properties categorized for easy reference. From fundamental layout essentials like width and height to advanced features like grid layout and animations, discover the building blocks of modern web design. Examples of each CSS property in the Box Model

1. width:


/* Example Width */
.box {
  width: 200px; /* Sets the width of the element to 200 pixels. */
}

2. height:


/* Example Height */
.box {
  height: 150px; /* Sets the height of the element to 150 pixels. */
}

3. margin:


/* Example Margin */
.box {
  margin: 10px; /* Sets a margin of 10 pixels for all sides of the 
                  element. */
}

4. padding:


/* Example Padding */
.box {
  padding: 20px; /* Adds 20 pixels of padding to all sides of the 
                   element. */
}

5. border:


/* Example Border */
.box {
  border: 2px solid #999; /* Creates a solid 2-pixel border with the 
                            color #999. */
}

6. box-sizing:


/* Example Box Sizing */
.box {
  box-sizing: border-box; /* Includes padding and border in the total 
              width and height of the element. */
}

These examples showcase how each property in the Box Model influences the layout of an element. The width and height determine the size, margin creates space around the element, padding adds space inside the element, border creates a border around the element, and box-sizing alters how the size is calculated by including or excluding padding and border.

List of CSS Properties

Let's create a real-world example of a CSS box model for a simple card component. In this example, we'll use various properties to style a card with a heading, content, and a button.

HTML Structure:


<div class="card">
  <h2>Card Title</h2>
  <p>This is the content of the card.</p>
  <button>Read More</button>
</div>

CSS Styling:


/* Box Model Example */.card {
  width: 300px; /* Set the width of the card. */
  height: 200px; /* Set the height of the card. */
  margin: 20px; /* Add margin around the card. */
  padding: 15px; /* Add padding inside the card. */
  border: 1px solid #ccc; /* Add a border to the card. */
  box-sizing: border-box; /* Include padding and border in the total 
                          width and height. */
  background-color: #f9f9f9; /* Set the background color of the card.*/
}

.card h2 {
  color: #333; /* Set the color of the heading. */
}

.card p {
  color: #666; /* Set the color of the content text. */
}

.card button {
  background-color: #336699; /* Set the background color of the 
                        button.*/
color: #fff; /* Set the text color of the button. */
padding: 10px; /* Add padding to the button. */
border: none; /* Remove the default button border. */
cursor: pointer; /* Change the cursor on hover. */
}

.card button:hover {
  background-color: #254061; /* Change button color on hover. */
}
  
In this example, we've utilized various CSS box model properties to create a styled card component. The width, height, margin, padding, border, and box-sizing properties are applied to the card. Additionally, we've used color, background color, and padding for the heading, content, and button elements. This results in a visually appealing and well-structured card on a webpage.
12 views0 comments

Recent Posts

See All

Comments


bottom of page