My Coding Journey: Day 5

My coding journey

Introduction

Hello and welcome back to my coding journey! Today is Day 5, and we will delve deep into the world of CSS, specifically the display property. Understanding how different parts are displayed on a webpage is essential for producing clean, responsive, and well-structured designs. Allow me to explain what I learned today.

Getting started with CSS display

CSS (Cascading Style Sheets) is a foundational technology for web development that allows us to manage the visual appearance of HTML content. The display property in CSS is important because it determines how elements are rendered in the browser. Today I explored different display settings and their implications on page layout.

The Basic: Block Vs Inline

One of the first ideas I addressed was the distinction between block and inline elements. Understanding the distinction is critical to understanding layouts.

1. Block Elements

Block Elements occupy the entire full width of the webpage and start on a new line. The common examples of Block elements are <div>, <h1>, and <p>.

Click here for a visual representation

2. Inline Elements

inline elements can occupy the width depending on their contents and do not start a new line. the common examples are <span>, <a> and <em>.

Click here for a visual representation

Exploring Inline-Block

Inline-Block is the CSS display properties capable of combining both inline and block properties. it means when the element is set to inline-block property, then the elements can be in the same line and set the width and height of the element as well.

This property of the CSS is often used for creating the horizontal navigation bar, and menus and aligning items side by side without breaking them onto new lines.

Click here for a visual representation
Click here for a visual representation

The power of Display: None;

One of the most intriguing and useful values is display: none; which removes an element from the document layout completely. This is extremely useful when building dynamic content and interactive features with JavaScript.

/*CSS*/
.hidden-element {
display: none;
}

/* This proper hides the elements on the screen */

Click here for a visual representation

Conclusion

Day 5 of my coding journey has been quite beneficial. The display property is a fundamental CSS feature that controls the layout and presentation of items on a webpage. Understanding how to adjust display provides for better freedom and creativity in web design, from simple block and inline elements to more complicated Flexbox and Grid systems.

In the following days, I’m looking forward to continuing my adventure and learning about new CSS features and strategies. Stay tuned for additional updates and insights as I explore deeper into the realm of web development!

Leave a Reply