{"id":1791,"date":"2023-08-15T18:45:04","date_gmt":"2023-08-15T18:45:04","guid":{"rendered":"https:\/\/easycodingschool.com\/?p=1791"},"modified":"2023-08-15T07:05:21","modified_gmt":"2023-08-15T07:05:21","slug":"css-syntax","status":"publish","type":"post","link":"https:\/\/easycodingschool.com\/blog\/css-syntax\/","title":{"rendered":"CSS Syntax"},"content":{"rendered":"<p>CSS syntax includes a selector, a property, and its value. The selector points to an HTML element where the CSS style is applied. The CSS property and value are connected by semicolons. This involves matching the selector name with its associated property-value definition.<\/p>\n<h2>Syntax:<\/h2>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>selector { Property: value; }<\/code><\/pre>\n<\/div>\n<h3><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS_Property-300x251.jpg\" alt=\"CSS_Property\" width=\"300\" height=\"251\" class=\"size-medium wp-image-1803 aligncenter\" srcset=\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS_Property-300x251.jpg 300w, https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS_Property.jpg 658w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/h3>\n<p>Let&#8217;s clarify each of these terms:<\/p>\n<ul>\n<li><strong>Declaration:<\/strong> This is made up of a property and the value it should have.<\/li>\n<li><strong>Selector:<\/strong> It pinpoints which HTML elements to style.<\/li>\n<li><strong>Property:<\/strong> It determines the exact feature of an element you&#8217;re changing.<\/li>\n<li><strong>Value:<\/strong> It&#8217;s the assigned setting for a property, deciding how the element should look or act.<\/li>\n<\/ul>\n<p>Also read, <a href=\"https:\/\/easycodingschool.com\/blog\/why-should-you-study-javascript\/\">Why should you Study JavaScript?<\/a><\/p>\n<h3>Example:<\/h3>\n<p><span>In this example, <\/span><span>we&#8217;ll take it step by step, using clear and easy explanations.<\/span><\/p>\n<div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;!-- Style on h1 elements --&gt;\r\n&lt;style&gt;\r\nh1 {\r\ncolor: red;\r\ntext-align: center;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n\r\n\r\n&lt;body&gt;\r\n&lt;h1&gt;Easy Coding School&lt;\/h1&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<h3>Explanation:<\/h3>\n<ul>\n<li>\u00a0h1 is the selector of h1 tags.<\/li>\n<li>\u00a0it selects the h1 element<\/li>\n<li>The color is a property and red\u00a0is the value of that property, a similar text-align is the property, and the value of that property is the center.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. CSS properties and values are linked using semicolons, matching selector names with their property-value meanings. <\/p>\n","protected":false},"author":1,"featured_media":1808,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[77,87,25],"tags":[88,44,28,24,17,32],"class_list":["post-1791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-development","category-programming","tag-cascading-style-sheets","tag-css","tag-front-end-developer","tag-programming","tag-technology","tag-web-developer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Syntax - Easy Coding School<\/title>\n<meta name=\"description\" content=\"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties &amp; values are linked by semicolons.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Syntax - Easy Coding School\" \/>\n<meta property=\"og:description\" content=\"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties &amp; values are linked by semicolons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\" \/>\n<meta property=\"og:site_name\" content=\"Easy Coding School\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-15T18:45:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"gauravkumarjha19@gmail.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"gauravkumarjha19@gmail.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\"},\"author\":{\"name\":\"gauravkumarjha19@gmail.com\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/9cabe8e90728da7f26676cbd1744558b\"},\"headline\":\"CSS Syntax\",\"datePublished\":\"2023-08-15T18:45:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\"},\"wordCount\":168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg\",\"keywords\":[\"Cascading Style Sheets\",\"css\",\"front-end developer\",\"Programming\",\"Technology\",\"web Developer\"],\"articleSection\":[\"CSS\",\"Development\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\",\"url\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\",\"name\":\"CSS Syntax - Easy Coding School\",\"isPartOf\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg\",\"datePublished\":\"2023-08-15T18:45:04+00:00\",\"description\":\"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties & values are linked by semicolons.\",\"breadcrumb\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/easycodingschool.com\/blog\/css-syntax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage\",\"url\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg\",\"contentUrl\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg\",\"width\":660,\"height\":350,\"caption\":\"CSS Syntax\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/css-syntax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/easycodingschool.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Syntax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#website\",\"url\":\"https:\/\/easycodingschool.com\/blog\/\",\"name\":\"Easy Coding School\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/easycodingschool.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#organization\",\"name\":\"Easy Coding School\",\"url\":\"https:\/\/easycodingschool.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/07\/New-Project-10.png\",\"contentUrl\":\"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/07\/New-Project-10.png\",\"width\":310,\"height\":114,\"caption\":\"Easy Coding School \"},\"image\":{\"@id\":\"https:\/\/easycodingschool.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/9cabe8e90728da7f26676cbd1744558b\",\"name\":\"gauravkumarjha19@gmail.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6846a3cc9bd6cb5b779aef260fe379c4b93fa20e1a4c753eb023ff7c08d7c668?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6846a3cc9bd6cb5b779aef260fe379c4b93fa20e1a4c753eb023ff7c08d7c668?s=96&d=mm&r=g\",\"caption\":\"gauravkumarjha19@gmail.com\"},\"sameAs\":[\"https:\/\/easycodingschool.com\/blog\"],\"url\":\"https:\/\/easycodingschool.com\/blog\/author\/gauravkumarjha19gmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Syntax - Easy Coding School","description":"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties & values are linked by semicolons.","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:\/\/easycodingschool.com\/blog\/css-syntax\/","og_locale":"en_US","og_type":"article","og_title":"CSS Syntax - Easy Coding School","og_description":"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties & values are linked by semicolons.","og_url":"https:\/\/easycodingschool.com\/blog\/css-syntax\/","og_site_name":"Easy Coding School","article_published_time":"2023-08-15T18:45:04+00:00","og_image":[{"width":660,"height":350,"url":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg","type":"image\/jpeg"}],"author":"gauravkumarjha19@gmail.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"gauravkumarjha19@gmail.com","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#article","isPartOf":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/"},"author":{"name":"gauravkumarjha19@gmail.com","@id":"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/9cabe8e90728da7f26676cbd1744558b"},"headline":"CSS Syntax","datePublished":"2023-08-15T18:45:04+00:00","mainEntityOfPage":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/"},"wordCount":168,"commentCount":0,"publisher":{"@id":"https:\/\/easycodingschool.com\/blog\/#organization"},"image":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg","keywords":["Cascading Style Sheets","css","front-end developer","Programming","Technology","web Developer"],"articleSection":["CSS","Development","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/easycodingschool.com\/blog\/css-syntax\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/","url":"https:\/\/easycodingschool.com\/blog\/css-syntax\/","name":"CSS Syntax - Easy Coding School","isPartOf":{"@id":"https:\/\/easycodingschool.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage"},"image":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg","datePublished":"2023-08-15T18:45:04+00:00","description":"CSS syntax involves a selector, a property, and its value. Selectors aim at HTML elements for styling. Properties & values are linked by semicolons.","breadcrumb":{"@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/easycodingschool.com\/blog\/css-syntax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#primaryimage","url":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg","contentUrl":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/08\/CSS-Syntax.jpg","width":660,"height":350,"caption":"CSS Syntax"},{"@type":"BreadcrumbList","@id":"https:\/\/easycodingschool.com\/blog\/css-syntax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/easycodingschool.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Syntax"}]},{"@type":"WebSite","@id":"https:\/\/easycodingschool.com\/blog\/#website","url":"https:\/\/easycodingschool.com\/blog\/","name":"Easy Coding School","description":"","publisher":{"@id":"https:\/\/easycodingschool.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/easycodingschool.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/easycodingschool.com\/blog\/#organization","name":"Easy Coding School","url":"https:\/\/easycodingschool.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/easycodingschool.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/07\/New-Project-10.png","contentUrl":"https:\/\/easycodingschool.com\/blog\/wp-content\/uploads\/2023\/07\/New-Project-10.png","width":310,"height":114,"caption":"Easy Coding School "},"image":{"@id":"https:\/\/easycodingschool.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/9cabe8e90728da7f26676cbd1744558b","name":"gauravkumarjha19@gmail.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/easycodingschool.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6846a3cc9bd6cb5b779aef260fe379c4b93fa20e1a4c753eb023ff7c08d7c668?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6846a3cc9bd6cb5b779aef260fe379c4b93fa20e1a4c753eb023ff7c08d7c668?s=96&d=mm&r=g","caption":"gauravkumarjha19@gmail.com"},"sameAs":["https:\/\/easycodingschool.com\/blog"],"url":"https:\/\/easycodingschool.com\/blog\/author\/gauravkumarjha19gmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/posts\/1791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/comments?post=1791"}],"version-history":[{"count":15,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/posts\/1791\/revisions"}],"predecessor-version":[{"id":1807,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/posts\/1791\/revisions\/1807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/media\/1808"}],"wp:attachment":[{"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/media?parent=1791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/categories?post=1791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/easycodingschool.com\/blog\/wp-json\/wp\/v2\/tags?post=1791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}