{"id":14883,"date":"2021-01-06T22:20:34","date_gmt":"2021-01-07T06:20:34","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14883"},"modified":"2023-12-01T04:07:51","modified_gmt":"2023-12-01T12:07:51","slug":"css-hide-element","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-hide-element\/","title":{"rendered":"CSS Hide Element: A Step-By-Step Guide"},"content":{"rendered":"\n<p><em>You can hide an element in CSS using the CSS properties display: none or visibility: <\/em><em>hidden<\/em><em>. display: none removes the entire element from the page and mat affect the layout of the page. visibility: <\/em><em>hidden<\/em><em> hides the element while keeping the space the same.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>You may encounter a scenario where you want to hide an element on the web page. For instance, you may have a block of text that you want to remain hidden and appear when a user clicks a button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Hide Element<\/h2>\n\n\n\n<p>There are two main approaches for hiding an element in CSS, using:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The display: none attribute.<\/li><li>The visibility: hidden attribute.<\/li><\/ul>\n\n\n\n<p>The first approach may affect the layout of your web page. But, the second method is nonetheless popular.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Hide Element: display<\/h2>\n\n\n\n<p>The display property controls how an element is displayed on a web page. Every element in an HTML document has a default value for the display property, although that value depends on the element. For most elements, the default display value is either <em>block<\/em> or <em>inline<\/em>.<\/p>\n\n\n\n<p>If you don\u2019t want an element to display on an element at all, you can set the value of the <em>display<\/em> property to none.<\/p>\n\n\n\n<p>The following style rule hides an element on a web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>display: none;<\/pre><\/div>\n\n\n\n<p>When you set the value of <em>display<\/em> to none, the affected element will disappear. This means the element will no longer take up any space on the web page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">display: none Example<\/h3>\n\n\n\n<p>Suppose we are designing an <em>About Us<\/em> web page for a local cookery club. In our initial design, we added an image of a cake to the page. Now the club wants us to hide the image because they are not sure about the final design.<\/p>\n\n\n\n<p>We could hide the image on the page using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;div&gt;\n&lt;h1&gt;About Us&lt;\/h1&gt;\n&lt;img src=&quot;https:\/\/images.unsplash.com\/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot; height=&quot;200&quot; width=&quot;200&quot; \/&gt;\n&lt;p&gt;The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\nimg {\n\tdisplay: none;\n}\n&lt;style&gt;<\/pre><\/div>\n\n\n\n<p>Click the&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We defined three elements within a <a href=\"https:\/\/careerkarma.com\/blog\/html-div\/\">HTML &lt;div&gt; tag<\/a>. The &lt;h1&gt; element is used to create our header, and contains the text <em>About Us<\/em>. Our <a href=\"https:\/\/careerkarma.com\/blog\/html-image\/\">HTML &lt;img&gt; element<\/a> creates an image of a cake, which is 200px tall and 200px wide. The &lt;p&gt; element contains a short description of the club.<\/p>\n\n\n\n<p>In our CSS code, we use the &#8220;img&#8221; selector to select all image tags on our page. This rule sets the display property of all &lt;img&gt; tags to <em>none<\/em>. Or, in other words, the style rule hides our image.<\/p>\n\n\n\n<p>Although our image is hidden, it still exists on our web page. If we want to bring our image back, we can either delete the <em>display:none;<\/em> style. Or, we can specify another display style (like <em>block<\/em> or <em>inline<\/em>).<\/p>\n\n\n\n<p>You could define this rule as an inline HTML attribute:<\/p>\n\n\n\n<p>&lt;img style=&#8221;display: none;&#8221; src=&#8221;https:\/\/images.unsplash.com\/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&#8243; height=&#8221;200&#8243; width=&#8221;200&#8243; \/&gt;<\/p>\n\n\n\n<p>To learn more about inline HTML and CSS properties, check out our <a href=\"https:\/\/careerkarma.com\/blog\/css-inline\/\">inline CSS guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Hide Element: visibility<\/h2>\n\n\n\n<p>The CSS visibility property is used to control whether an element is visible on the web page.<\/p>\n\n\n\n<p>By default, the value of the <em>visibility<\/em> property is <em>visible<\/em>. However, if you want to make an image invisible, you can set the value of <em>visibility<\/em> to <em>hidden<\/em>.<\/p>\n\n\n\n<p>The following style rule sets the visibility of an element to hidden:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>visibility: hidden;<\/pre><\/div>\n\n\n\n<p>Let\u2019s return to the cooking club example from earlier. Suppose we want to hide the image of the cake on our <em>About Us<\/em> web page. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;div&gt;\n&lt;h1&gt;About Us&lt;\/h1&gt;\n&lt;img src=&quot;https:\/\/images.unsplash.com\/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot; height=&quot;200&quot; width=&quot;200&quot; \/&gt;\n&lt;p&gt;The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\nimg {\n\tdisplay: visibility;\n}\n&lt;style&gt;<\/pre><\/div>\n\n\n\n<p>Click the\u00a0<img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>Our HTML code is the same in this example. In our CSS file, instead of using the <em>display<\/em> property, we used <em>visibility<\/em> to hide our element. As you can see above, our image has been hidden from the web page.<\/p>\n\n\n\n<p>While our image is gone, there is now a space between our header and our paragraph where the image would have been placed. This is a feature of the <em>visibility: hidden;<\/em> style. The space of the original element is still kept by the web page. But, the element is hidden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Visibility vs. Display<\/h2>\n\n\n\n<p>The two methods we have discussed of hiding an element appear to be the same, but there is a difference between the two.<\/p>\n\n\n\n<p>The <em>display: none<\/em> rule removes an element from an HTML document. While the code for the hidden element is still present, the element itself will not be displayed.<\/p>\n\n\n\n<p>The <em>visibility: hidden<\/em> rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element\u2019s space on the web page, using the <em>visibility: hidden;<\/em> rule is best.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The <em>display: none<\/em> rule removes an element from a document and hides it from view. The <em>visibility: hidden<\/em> rule hides an element on a document and leaves the space in which the element would have appeared empty.<\/p>\n\n\n\n<p>Do you want to learn more about CSS? Read our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS<\/a> guide. This guide is full of actionable advice on how to learn CSS. You&#8217;ll also find a list of top resources you can use to advance your knowledge.<\/p>\n","protected":false},"excerpt":{"rendered":"You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same. You may encounter a scenario where you want to hide an&hellip;","protected":false},"author":240,"featured_media":14884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14883","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Hide Element: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Hide Element: A Step-By-Step Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-07T06:20:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:07:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Hide Element: A Step-By-Step Guide\",\"datePublished\":\"2021-01-07T06:20:34+00:00\",\"dateModified\":\"2023-12-01T12:07:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\"},\"wordCount\":904,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\",\"name\":\"CSS Hide Element: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg\",\"datePublished\":\"2021-01-07T06:20:34+00:00\",\"dateModified\":\"2023-12-01T12:07:51+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-hide-element\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hide-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Hide Element: A Step-By-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Hide Element: A Step-By-Step Guide | Career Karma","description":"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-hide-element\/","og_locale":"en_US","og_type":"article","og_title":"CSS Hide Element: A Step-By-Step Guide","og_description":"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-hide-element\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-07T06:20:34+00:00","article_modified_time":"2023-12-01T12:07:51+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Hide Element: A Step-By-Step Guide","datePublished":"2021-01-07T06:20:34+00:00","dateModified":"2023-12-01T12:07:51+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/"},"wordCount":904,"commentCount":1,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-hide-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/","url":"https:\/\/careerkarma.com\/blog\/css-hide-element\/","name":"CSS Hide Element: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg","datePublished":"2021-01-07T06:20:34+00:00","dateModified":"2023-12-01T12:07:51+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS display: none; and visibility: hidden; properties allow you to hide an element on a web page. On Career Karma, learn how to hide an element using CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-hide-element\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-hide-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Hide Element: A Step-By-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14883"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14883\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14884"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}