Day 15 Progress Update

Today, I focused on some crucial aspects of CSS:

1. Display Property: I learned about the display property in CSS, which determines how elements are rendered on the page. Key values include block, inline, inline-block, flex, and grid, each serving different purposes in layout design.

2. Inline-Block Attribute: I explored the inline-block value for the display property. This value allows elements to behave like inline elements (i.e., they flow within the text and do not start on a new line) but also allows them to have block element characteristics, such as setting width and height.

3. Units in CSS: I delved into relative units in CSS:

   • % (Percent): A relative unit that is a percentage of the parent element's size.

   • em: A relative unit based on the font size of the element. One drawback of em is the "snowball effect," where nested elements inherit the font size from their ancestors, leading to potentially unpredictable sizes.

   • rem: A relative unit based on the root element's font size, avoiding the issues associated with em in nested contexts.

/* Demonstrating display properties and inline-block */
div {
    height: 200px;
    width: 200px;
    background-color: greenyellow;
    border: 2px solid black;
    margin: 5px;
    display: inline-block; /* Inline-block display */
}

/* Demonstrating font size units and padding */
#outer {
    height: 400px;
    width: 400px;
    background-color: pink;
    font-size: 10px; /* Font size in pixels */
}

#inner {
    height: 100px;
    width: 100px;
    background-color: cornflowerblue;
    font-size: 3em; /* Font size in em units */
    padding: 1em; /* Padding in em units */
}

button {
    font-size: 100px; /* Font size in pixels */
    border-radius: 15px;
    border: 5px solid black;
    padding-left: 1em; /* Padding in em units */
    padding-right: 1em; /* Padding in em units */
}

I made sure to practice applying these properties and units in various exercises to solidify my understanding.