{"id":24196,"date":"2019-06-24T21:11:43","date_gmt":"2019-06-24T13:11:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24196"},"modified":"2019-06-24T20:21:34","modified_gmt":"2019-06-24T12:21:34","slug":"css-shorthand-longhand-notations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/","title":{"rendered":"CSS Shorthand vs. Longhand &#8211; Which to Use"},"content":{"rendered":"<p>Shorthand and Longhand \u2013 one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to preserve clarity. Either way, they have their purposes, pros and cons, so to speak.<\/p>\n<p>This post will shine some light on both CSS shorthand notations and longhand notations, while concluding which is best to use for which situation<strong>.<\/strong><\/p>\n<h2>What is Shorthand Property?<\/h2>\n<p><strong>Shorthand property<\/strong> is a property that takes the values for other sets of CSS properties. For example, we can assign a value for <code>border-width<\/code>, <code>border-style<\/code> and <code>border-color<\/code> using the <code>border<\/code> property alone.<\/p>\n<p>Basically,<\/p>\n<pre>\r\nborder: 1px solid blue;\r\n<\/pre>\n<p>is the same as:<\/p>\n<pre>\r\nborder-width: 1px;\r\nborder-style: solid;\r\nborder-color: blue;<\/pre>\n<p><iframe height=\"180\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/zGNKex\/?height=180&theme-id=14457&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/zGNKex\/\" rel=\"nofollow\">zGNKex<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>With this, we don\u2019t have to declare individual property values separately (which is redundant, time- and space-consuming). It also resets the left-out properties in the declaration, something which can be taken advantage of.<\/p>\n<h3>How does it work?<\/h3>\n<p>Like previously mentioned, we write a set of other property values in shorthand, the order doesn\u2019t matter if all the property values in the shorthand <strong>are of a different kind<\/strong> like in <strong>border<\/strong>. For properties with <strong>similar kinds of values<\/strong> like margin, <strong>order does matter<\/strong>. When in doubt, remember clockwise!<\/p>\n<p>Now, what if we miss a property or two in the declaration? In the above example, let\u2019s say we ignored <code>border-style<\/code>.<\/p>\n<pre>\r\nborder: 1px blue;\r\n<\/pre>\n<p><iframe height=\"180\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/OVWRdv\/?height=180&theme-id=14457&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/OVWRdv\/\" rel=\"nofollow\">OVWRdv<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>We won\u2019t be able to see the borders anymore, not because the shorthand property didn\u2019t work but because the <code>border-style<\/code> which we left out, got the default value <code>none<\/code>. This is how that shorthand property got rendered.<\/p>\n<pre>\r\nborder: 1px none blue;\r\n<\/pre>\n<p>Now let\u2019s drop the <code>1px<\/code> for <code>border-width<\/code> and keep the other two:<\/p>\n<pre>\r\nborder: solid blue;<\/pre>\n<p><iframe height=\"179\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/YXNGBV\/?height=179&theme-id=14457&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/YXNGBV\/\" rel=\"nofollow\">YXNGBV<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>We\u2019ll be able to see the borders, only with a thicker width and that\u2019s because the <code>border-width<\/code> property got the default value <code>medium<\/code>.<\/p>\n<pre>\r\nborder: medium solid blue;\r\n<\/pre>\n<p>This concludes it for us that <strong>when a property value is left out<\/strong> in a shorthand declaration, <strong>that property takes on its default value<\/strong> (even if it has to override any previous value assigned for the same).<\/p>\n<p>If there is <code>border-width: 1px;<\/code> for an element somewhere before <code>border: solid blue;<\/code> for the same, the border width is going to be <code>medium<\/code> (the default value), not <code>1px<\/code>.<\/p>\n<p>Another thing worth mentioning is that <strong>we cannot use values like <code>inherit<\/code>, <code>initial<\/code> <\/strong>or<strong> <code>unset<\/code><\/strong>, which are available for all the CSS properties, in shorthand notation. If we use those, the browser won\u2019t be able to know exactly which property that value is supposed to represent in the shorthand \u2013 <strong>the entire declaration will be dropped<\/strong>.<\/p>\n<h3>The <code>all<\/code> property<\/h3>\n<p>There is one CSS shorthand property that can <strong>set the value for all CSS properties<\/strong>. CSS-wide values <code>inherit<\/code>, <code>initial<\/code> and <code>unset<\/code> are applicable to all of the properties and hence these are the only values accepted by the <code>all<\/code> property.<\/p>\n<pre>\r\ndiv {\r\n  all: initial\r\n}<\/pre>\n<p>This will make the <code>div<\/code> element ditch ALL of the CSS property values it had, and reset the default value in each of them.<\/p>\n<h3>\u26a0 Warning<\/h3>\n<p>Let\u2019s not misuse the <code>all<\/code> property. The need for it may arise only in very rare circumstances, when we are not able to touch any previous CSS code of an element that we wish to apply this property to.<\/p>\n<p><strong>Note:<\/strong> CSS property <code>color<\/code> takes hexadecimal value with shorthand notation if the two numbers of hex value in every color channel is the same. For example, <code>background: #445599;<\/code> is same as <code>background: #459;<\/code>.<\/p>\n<h2>What is longhand property?<\/h2>\n<p>The <strong>individual properties<\/strong> that can be included in a shorthand property are called longhand properties. Some examples are; <code>background-image<\/code>, <code>margin-left<\/code>, <code>animation-duration<\/code>, etc.<\/p>\n<h3>Why should we use it?<\/h3>\n<p>Even though shorthand alternatives are handy, they do have a disadvantage. Remember in the beginning we saw how shorthand overrides any left out properties with their default values? This can be a problem if the reset isn\u2019t desired.<\/p>\n<p>Take the <code>font<\/code> shorthand property for example. Let\u2019s use it in the <code>h4<\/code> element (which has a default browser style <code>font-weight:bold<\/code>)<\/p>\n<pre>\r\nfont: 20px \"courier new\";\r\n<\/pre>\n<p>In the above shorthand code, no value is there for the <code>font-weight<\/code> property, hence the <code>font-weight:bold<\/code>(browser default style) will be overridden by the default value <code>font-weight:normal<\/code> causing the <code>h4<\/code> element to lose its bold style, which may not has been intended.<\/p>\n<p><iframe height=\"157\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/BNpLvx\/?height=157&theme-id=14457&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/BNpLvx\/\" rel=\"nofollow\">BNpLvx<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>So, for the above example simple two longhand properties, <code>font-size<\/code> and <code>font-family<\/code> are perfect.<\/p>\n<p>Also, using shorthand for <strong>assigning only one or two property values is not very useful<\/strong>. Why give the browser extra work to interpret every single property (including the left out ones) in the shorthand, when only one is needed to work?<\/p>\n<p>Production aside, during development stage, some developers (especially beginners) may find using longhand notation a lot easier to work with than shorthand for <strong>better readability and clarity<\/strong>.<\/p>\n<figure style=\"text-align:center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg\" width=\"500\" height=\"1032\" alt=\"shorthand vs longhand\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>Nowadays with the possibility of fast coding (with the help of tools like <a href=\"https:\/\/www.hongkiat.com\/blog\/html-css-faster-emmet\/\">Emmet<\/a>) and minification, a high reliability on shorthand is not needed, but at the same time, it is a lot logical to type <code>margin:0;<\/code>.<\/p>\n<p><strong>The context in which we prefer our CSS notations will vary<\/strong> and all we have to do is figure out what notation will works best for us and when.<\/p>","protected":false},"excerpt":{"rendered":"<p>Shorthand and Longhand \u2013 one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to preserve clarity. Either way, they have their purposes, pros and cons, so to speak. This post will shine some light on both CSS shorthand notations and longhand notations,&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Shorthand vs. Longhand - Which to Use - Hongkiat<\/title>\n<meta name=\"description\" content=\"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Shorthand vs. Longhand - Which to Use\" \/>\n<meta property=\"og:description\" content=\"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-24T13:11:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"CSS Shorthand vs. Longhand &#8211; Which to Use\",\"datePublished\":\"2019-06-24T13:11:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/\"},\"wordCount\":837,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-shorthand-longhand-notations\\\/long-vs-short-notations.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/\",\"name\":\"CSS Shorthand vs. Longhand - Which to Use - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-shorthand-longhand-notations\\\/long-vs-short-notations.jpg\",\"datePublished\":\"2019-06-24T13:11:43+00:00\",\"description\":\"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-shorthand-longhand-notations\\\/long-vs-short-notations.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-shorthand-longhand-notations\\\/long-vs-short-notations.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-shorthand-longhand-notations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Shorthand vs. Longhand &#8211; Which to Use\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Shorthand vs. Longhand - Which to Use - Hongkiat","description":"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to","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:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/","og_locale":"en_US","og_type":"article","og_title":"CSS Shorthand vs. Longhand - Which to Use","og_description":"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to","og_url":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-06-24T13:11:43+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"CSS Shorthand vs. Longhand &#8211; Which to Use","datePublished":"2019-06-24T13:11:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/"},"wordCount":837,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/","url":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/","name":"CSS Shorthand vs. Longhand - Which to Use - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg","datePublished":"2019-06-24T13:11:43+00:00","description":"Shorthand and Longhand &#8211; one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-shorthand-longhand-notations\/long-vs-short-notations.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Shorthand vs. Longhand &#8211; Which to Use"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6ig","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24196"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24196\/revisions"}],"predecessor-version":[{"id":48115,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24196\/revisions\/48115"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24196"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}