{"id":136992,"date":"2024-10-11T13:02:41","date_gmt":"2024-10-11T07:32:41","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136992"},"modified":"2024-10-16T14:34:58","modified_gmt":"2024-10-16T09:04:58","slug":"shorthand-syntax-layout-with-css-grid","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/","title":{"rendered":"Shorthand syntax | Layout with CSS Grid"},"content":{"rendered":"\n<p>Shorthand syntax is a concise way to write CSS properties that have multiple values. It can help you write cleaner and more efficient code, especially when dealing with properties like margin, padding, border, font, and background.<\/p>\n\n\n\n<p><strong>Common Shorthand Properties<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>margin:<\/strong> Sets the top, right, bottom, and left margins of an element in a single declaration.<\/li>\n\n\n\n<li><strong>padding:<\/strong> Sets the top, right, bottom, and left padding of an element.<\/li>\n\n\n\n<li><strong>border:<\/strong> Sets the width, style, and color of the border for an element.<\/li>\n\n\n\n<li><strong>font:<\/strong> Sets the font family, font size, font weight, font style, and line height in a single declaration.<\/li>\n\n\n\n<li><strong>background:<\/strong> Sets the background color, image, position, attachment, and repetition in a single declaration.<\/li>\n<\/ul>\n\n\n\n<p><strong>Basic Syntax<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; margin: 10px; \/* Sets all margins to 10px *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Multiple Values<\/strong><\/p>\n\n\n\n<p>You can specify different values for each side of the element:<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; margin: 10px 20px; \/* Top and bottom margins are 10px, left and right margins are 20px *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Omitting Values<\/strong><\/p>\n\n\n\n<p>If you omit a value, it defaults to the previous value. For example:<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; margin: 10px 20px 30px; \/* Top margin is 10px, right and left margins are 20px, bottom margin is 30px *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Using Keywords<\/strong><\/p>\n\n\n\n<p>You can use keywords like inherit, initial, and unset to set the property to its inherited value, initial value, or unset value, respectively.<\/p>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; margin: inherit; \/* Inherit the margin from the parent element *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Benefits of Using Shorthand Syntax<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Improved readability:<\/strong> Shorthand syntax can make your CSS code more concise and easier to read.<\/li>\n\n\n\n<li><strong>Reduced typing:<\/strong> You can save time by writing fewer characters.<\/li>\n\n\n\n<li><strong>Better organization:<\/strong> Shorthand syntax can help you organize your CSS properties more efficiently.<\/li>\n<\/ul>\n\n\n\n<p>Shorthand syntax is a valuable tool for writing efficient and readable CSS code. By understanding the basic syntax and common shorthand properties, you can improve the maintainability and readability of your responsive web designs.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/auto-fit-and-auto-fill-layout-with-css-grid\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/allowing-nested-elements-to-take-part-in-the-grid-layout-with-css-grid\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shorthand syntax is a concise way to write CSS properties that have multiple values. It can help you write cleaner and more efficient code, especially when dealing with properties like margin, padding, border, font, and background. Common Shorthand Properties Basic Syntax CSS .element { &nbsp; margin: 10px; \/* Sets all margins to 10px *\/ }&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-136992","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Shorthand syntax | Layout with CSS Grid - Tutorial<\/title>\n<meta name=\"description\" content=\"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!\" \/>\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.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shorthand syntax | Layout with CSS Grid - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T09:04:58+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/\",\"name\":\"Shorthand syntax | Layout with CSS Grid - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-11T07:32:41+00:00\",\"dateModified\":\"2024-10-16T09:04:58+00:00\",\"description\":\"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shorthand syntax | Layout with CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shorthand syntax | Layout with CSS Grid - Tutorial","description":"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!","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.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/","og_locale":"en_US","og_type":"article","og_title":"Shorthand syntax | Layout with CSS Grid - Tutorial","og_description":"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T09:04:58+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/","name":"Shorthand syntax | Layout with CSS Grid - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-11T07:32:41+00:00","dateModified":"2024-10-16T09:04:58+00:00","description":"Achieve success on your first try! Prepare for the Certified Responsive Web Design Exam with the latest study guide. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/shorthand-syntax-layout-with-css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Shorthand syntax | Layout with CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=136992"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136992\/revisions"}],"predecessor-version":[{"id":137342,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136992\/revisions\/137342"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}