{"id":36445,"date":"2018-02-26T03:01:12","date_gmt":"2018-02-25T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36445"},"modified":"2018-02-26T08:46:08","modified_gmt":"2018-02-25T22:46:08","slug":"css-style-display-and-visibility-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tutorial\/","title":{"rendered":"CSS Style Display and Visibility Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Style Display and Visibility Tutorial<\/p><\/div>\n

In yesterday’s Emoji Name Search Geo Chart WorldBank Tutorial <\/a> we mentioned the CSS topic of “invisibility” as a topic of interest in our “reveal”<\/a> thought patterns.<\/p>\n

Two of the best known ways in CSS to control invisibility (and, hence, visibility) are …<\/p>\n\n\n\n\n
Invisible (style=)<\/th>\nVisible (style=) Block Element<\/th>\nVisible (style=) Inline Element (eg. span, a, img)<\/th>\n<\/tr>\n
display:none;<\/td>\ndisplay:block;<\/td>\ndisplay:inline;<\/td>\n<\/tr>\n
visibility:hidden;<\/td>\nvisibility:visible;<\/td>\nvisibility:visible;<\/td>\n<\/tr>\n<\/table>\n

The W3Schools display and visibility<\/a> CSS topic webpage is succinct in telling you the difference, as below …<\/p>\n

\nHiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:
\n
\nExample
\nh1.hidden {
\n display: none;
\n}
\n
\nvisibility:hidden; also hides an element.
\n
\nHowever, the element will still take up the same space as before. The element will be hidden, but still affect the layout\n<\/p><\/blockquote>\n

Which got us to go back to a previous tutorial called CSS Style Display Primer Tutorial<\/a> where we wrote some HTML and CSS and Javascript to show the display<\/i> CSS property “in action”, that we “flesh out” today, adding in the layer of CSS property visibility<\/i> into the mix as well.<\/p>\n

In terms of “reveal” thoughts though, it may be more the go for you (with a project you are working on) to just use one or the other CSS property depending on whether you want to …<\/p>\n