CSS Basics - Learn CSS Basics - Exploring Display Attribute

Screenshot from the tutorial

Understanding CSS Basics: Exploring the Display Attribute

CSS, or Cascading Style Sheets, is a cornerstone technology for web development. One of the foundational aspects of CSS is the display attribute, which controls how elements are rendered on the page. In this blog post, we will explore the basics of the display attribute, its various values, and how it affects the layout of your web pages.

What is the Display Attribute?

The display attribute is a CSS property that determines how an element is displayed on the browser. By altering the display value, you can change the behavior of elements in relation to their parent and sibling elements, which ultimately affects the overall page layout.

Common Display Values

1. Block

The block value makes an element a block-level element. Block elements occupy the full width available, with a new line starting after the element. Common block elements include <div>, <h1>, <p>, and <section>.

div {
    display: block;
}

2. Inline

The inline value allows an element to sit within the flow of text without breaking the line. Inline elements only take up as much width as necessary. Examples include <span>, <a>, and <strong>.

span {
    display: inline;
}

3. Inline-Block

The inline-block value combines characteristics of both block and inline elements. It allows block-level elements to sit next to each other while still permitting width and height to be set.

.button {
    display: inline-block;
    width: 100px;
    height: 50px;
}

4. Flex

The flex value enables a flexible box layout. This is extremely useful for creating responsive designs. When you apply display: flex; to a container, its children become flex items, allowing for easy alignment and distribution of space.

.container {
    display: flex;
    justify-content: space-between;
}

5. Grid

The grid value establishes a grid layout. This allows for more complex layouts, letting you create rows and columns with ease. Grid layouts are perfect for web applications and complex webpage designs.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

6. None

The none value removes an element from the document flow entirely. The element will not take up any space, and it will not be visible on the page.

.hidden {
    display: none;
}

Practical Examples

Let’s put these display values into practice. Below is a simple example illustrating how different display values can be applied to elements in a webpage.

HTML Structure

<div class="container">
    <div class="block">Block Element</div>
    <span class="inline">Inline Element</span>
    <div class="inline-block">Inline Block Element</div>
</div>

CSS Styling

.container {
    border: 1px solid #ccc;
    padding: 10px;
}

.block {
    display: block;
    background-color: lightblue;
    margin-bottom: 10px;
}

.inline {
    display: inline;
    background-color: lightgreen;
}

.inline-block {
    display: inline-block;
    background-color: lightcoral;
    width: 100px;
    height: 50px;
}

In this example, you'll see how each element behaves differently based on its display value.

Conclusion

Understanding the display attribute in CSS is essential for effective web design. By leveraging block, inline, inline-block, flex, grid, and none values, you can create layouts that are both functional and visually appealing. Experiment with these values in your projects to see how they affect your web pages!

For more in-depth learning, consider watching the video "CSS Basics - Learn CSS Basics - Exploring Display Attribute" for a visual guide on using these techniques effectively.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios