CSS can provide a wonderful toolbox to present your design ideas to the world. Using CSS to alter the elements of a page can feel like magic on display. Those HTML elements of a web page sit in containers or “boxes” that can be altered by various CSS properties.
However, some of the various properties and their applied values can be somewhat confusing upon first glance. A commonly misunderstood property in that vein is the CSS display. This property has neat options such as making a div hidden or setting the CSS to “display none”.
In this brief guide, you will learn what the CSS display property is and how to use it. Sample code and images will be provided to help you out along the way. If you need a quick introduction to CSS before you start, check out this blog post to get you going.
What is the CSS Display Property?
The CSS display property is used to alter and manage the visual presentation of the HTML elements on a web page. More directly, it works with the layout of the element in regards to the page setup.
Three common details the CSS display property will deal with are the values of “inline” and “block” and “ display none” for layout needs. Essentially, these values will manage how target HTML elements are positioned on the page. These will be covered in the following sections in detail.
CSS Display Property: Inline
The CSS display value of “inline” sets the target HTML element to be positioned as inline. While that is rather direct, you may ask just what the word “inline” means in the context of CSS or HTML.
When an element is considered to be inline, that means it does not create a new box or container of it’s own on another line. This is notable as the properties of width and height will not affect it per normal rules. This means that your visible output can be quite different when inline is active or not.
In the example below a single div has been set up to be worked within the HTML code. An id tag was also added for this example. For more information on using ids or classes see this article.
<body> <div id="target">This is a div element.</div> </body>
Here is the CSS code that is applied to the div. Some minor styling was added for visibility’s sake. If you want to follow along, you can copy the code below but it is not necessary.
#target {
color: white;
background-color: blue;
width: 200px;
padding: 100px;
text-align: center;
font-weight: bolder;
font-size: 50px;
border-style: solid;
border-color: darkgoldenrod;
border-width: 15px;
}This will provide the following output one the page:
You can see that the width property of 200px is being enforced in the image above. Now, with the addition of the CSS display property set to the value of “inline”, the output will be a bit different. You can add the display property with the rest of the previous CSS or on its own as shown below.
#target{
display: inline;
}Now the div is presented like this:
The div is now considerably wider than the previous example. This is because the inline value is forcing it to not create a new line on the page. The entire element is contained to its own refined space. It will only take as much space as needed to achieve the CSS styling.
As the inline display property does not create a new line, it will work to add any elements onto the same line as directed. In the sample HTML code below, three divs are placed within the main body.
<body> <div id="target1">This is a div element 1.</div> <div id="target2">This is a div element 2.</div> <div id="target3">This is a div element 3.</div> </body>
Each one of these divs are provided with the CSS display property of “inline” to have them placed vertically as opposed to horizontally. The results are shown below.
Consider how this could work well for certains site elements like buttons or navigation displays.
CSS Display Property: Block
Next we are going to discuss the “block” CSS property value. The next CSS display property value to discuss is block. A block value tells the browser to take the HTML element on a new line. This also places that element at the full width available for that line as well. If that element is a child of a parent element, then it will take any remaining width available.
In the example below, we will take the save div from before and change the display value to “block” to get a better idea of how it works.
#target{
display: block;
}This gives you the following HTML result:
You can see it looks much like the original image when no CSS display property was assigned. This is because the CSS still contains the width property setting of 200px. Unlike the “inline” value, The “block” value does allow the width property to affect the HTML element.
When the width property is removed from the CSS, the block value interprets that as an okay go-ahead to use all remaining width for that element.
#target {
color: white;
background-color: blue;
padding: 100px;
text-align: center;
font-weight: bolder;
font-size: 50px;
border-style: solid;
border-color: darkgoldenrod;
border-width: 15px;
}
#target{
display: block;
}This provides the following result:
As you can see, the div element with display set to block and no width property set, will expand out to cover its own line as far as possible. An easy take away on the difference is to remember that the CSS display value of block does get affected by a set width value.
Lastly, since the block value is creating a new line for the content, you will see with horizontal stacking of elements instead of vertical. The same three sample divs were added again inside the body again.
<div id="target1">This is a div element 1.</div> <div id="target2">This is a div element 2.</div> <div id="target3">This is a div element 3.</div>
This provides you with a horizontal stack as shown below.
CSS Display Property: None
Setting the CSS display “none” informs the browser that you do not want the target elements to be shown on the page. This works in context with other elements as well as they will ignore any elements with the display “none” set in relation to their own layout needs.
Note the code change in the CSS code below on the display property. It is now set to CSS display none.
#target{
display: none;
}This will generate the following output on the HTML page:
You might wonder why you want to do this in the first place. Setting CSS display none seems to be a way to remove an element, so why not just delete it altogether? There are times when javascript or jQuery elements need to be hidden or other times when you just want to test how certain elements fit on a page without outright deleting them from the HTML code.
Another topic to consider when using the CSS display none value is that screen readers will obviously not see the element in question. This can be an issue of design when used improperly. Consider if someone who was visually impaired tried to use a site you designed and some of the important parts were hidden from the screen reader. If you only wanted to hide information from a section like an image tag or a form label, then using more creative design options would suit it better. Whereas hiding either of those could break the site’s usage for that person altogether.
Advance into Greater Layouts
Knowing how to display elements and where that leaves them in relation to the HTML layout is a great skill to have. However, there is more to dive into such as interesting list options and styles formats to use them with. Consider how altering the padding and margins of an element can make it fit just perfectly with your overall scheme. Delving deeper into the layouts themselves with knowledge of Flexbox and Grid support opens those small items into massive opportunities. Even setting the CSS display none property can be used in other creative options to only appear when triggered by something like a hover.
You can also expand the overall power at your hands by experimenting with javascript to manipulate the DOM or create some amazing dynamic pages. With whatever path you choose to take, you can rest assured that each destination will only make you a better designer in the end. Remember to take it easy and have fun with all the tools you find along the way.
____________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
