{"id":56,"date":"2026-04-06T17:37:09","date_gmt":"2026-04-06T17:37:09","guid":{"rendered":"https:\/\/gigz.pk\/css\/?post_type=lesson&p=56"},"modified":"2026-04-18T09:09:48","modified_gmt":"2026-04-18T09:09:48","slug":"css-syntax-and-structure","status":"publish","type":"lesson","link":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/","title":{"rendered":"CSS Syntax and Structure"},"content":{"rendered":"\n

CSS syntax is the foundation of styling web pages. It defines how styles are written and applied to HTML elements. Understanding this structure is important for anyone learning web development.<\/p>\n\n\n\n

A CSS rule consists of a selector and a declaration block. The selector targets the HTML element you want to style. The declaration block contains one or more declarations that define how the element should look.<\/p>\n\n\n\n

Each declaration includes a property and a value. The property is the aspect you want to change such as color or font size. The value specifies how you want it to appear.<\/p>\n\n\n\n

For example a paragraph can be styled by selecting the paragraph element and applying a color and font size. This allows you to control the appearance of text on your webpage.<\/p>\n\n\n\n

Selectors are used to target elements. There are different types of selectors such as element selectors class selectors and id selectors. Element selectors target all elements of a specific type. Class selectors target elements with a specific class name. Id selectors target a unique element.<\/p>\n\n\n\n

The structure of CSS follows a clear pattern where the selector is written first followed by the declarations. This structure helps browsers understand how to apply styles correctly.<\/p>\n\n\n\n

Proper formatting is also important in CSS. Writing clean and organized code makes it easier to read understand and maintain. Developers often write each declaration on a new line for better clarity.<\/p>\n\n\n\n

CSS can be added to a webpage in three ways. Inline CSS is applied directly inside an HTML element. Internal CSS is written within a style section inside the HTML file. External CSS is written in a separate file and linked to the HTML document. External CSS is the most recommended method because it keeps code organized and reusable.<\/p>\n\n\n\n

Learning CSS syntax and structure is the first step toward creating visually appealing and professional websites. Once you understand how CSS rules work you can move on to more advanced styling techniques and layouts.<\/p>\n\n\n

Home<\/a><\/span> \u00bb CSS Fundamentals (Beginner) > Introduction to CSS > CSS Syntax & Structure<\/span><\/span><\/div>\n\n\n
<\/strong>

<\/p> <\/div> <\/div>\n\n\n\n

<\/strong>

<\/p> <\/div> <\/div>\n","protected":false},"menu_order":0,"template":"","class_list":["post-56","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\nCSS Syntax and Structure - CSS learning mastery<\/title>\n<meta name=\"description\" content=\"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Syntax and Structure - CSS learning mastery\" \/>\n<meta property=\"og:description\" content=\"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/\" \/>\n<meta property=\"og:site_name\" content=\"CSS learning mastery\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-18T09:09:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/css-syntax-and-structure\\\/\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/css-syntax-and-structure\\\/\",\"name\":\"CSS Syntax and Structure - CSS learning mastery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\"},\"datePublished\":\"2026-04-06T17:37:09+00:00\",\"dateModified\":\"2026-04-18T09:09:48+00:00\",\"description\":\"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/css-syntax-and-structure\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/css-syntax-and-structure\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/css-syntax-and-structure\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Fundamentals (Beginner) > Introduction to CSS > CSS Syntax & Structure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\",\"name\":\"CSS learning mastery\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gigz.pk\\\/css\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Syntax and Structure - CSS learning mastery","description":"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively","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:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/","og_locale":"en_US","og_type":"article","og_title":"CSS Syntax and Structure - CSS learning mastery","og_description":"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively","og_url":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/","og_site_name":"CSS learning mastery","article_modified_time":"2026-04-18T09:09:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["WebPage","FAQPage"],"@id":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/","url":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/","name":"CSS Syntax and Structure - CSS learning mastery","isPartOf":{"@id":"https:\/\/gigz.pk\/css\/#website"},"datePublished":"2026-04-06T17:37:09+00:00","dateModified":"2026-04-18T09:09:48+00:00","description":"Learn CSS syntax and structure with simple examples. Understand selectors properties and rules to style websites easily and effectively","breadcrumb":{"@id":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gigz.pk\/css\/lesson\/css-syntax-and-structure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gigz.pk\/css\/"},{"@type":"ListItem","position":2,"name":"CSS Fundamentals (Beginner) > Introduction to CSS > CSS Syntax & Structure"}]},{"@type":"WebSite","@id":"https:\/\/gigz.pk\/css\/#website","url":"https:\/\/gigz.pk\/css\/","name":"CSS learning mastery","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gigz.pk\/css\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson"}],"about":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/types\/lesson"}],"wp:attachment":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/media?parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}