{"id":3506,"date":"2024-05-22T10:19:46","date_gmt":"2024-05-22T10:19:46","guid":{"rendered":"https:\/\/crea.space\/?post_type=dictionary&#038;p=3506"},"modified":"2024-06-17T07:03:50","modified_gmt":"2024-06-17T07:03:50","slug":"css-cascading-style-sheets","status":"publish","type":"dictionary","link":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets","title":{"rendered":"CSS (Cascading Style Sheets)"},"content":{"rendered":"\n<p>CSS stands for Cascading Style Sheets, which is a language that we use to describe the appearance and formatting of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall visual presentation of web pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-key-concepts-of-css\">Key concepts of CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-selectors\">1. Selectors<\/h3>\n\n\n\n<p>Selectors are patterns used to select the elements you want to style. For example, you can select elements by their tag name, class, or ID.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>: <code>p<\/code> selects all <code>&lt;p&gt;<\/code> (paragraph) elements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-properties\">2. Properties<\/h3>\n\n\n\n<p>Properties are aspects of the elements that you want to change. Each property has a name and a value.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>: <code>color<\/code>, <code>font-size<\/code>, <code>margin<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-values\">3. Values<\/h3>\n\n\n\n<p>Values are the settings you apply to the properties.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>: <code>color: red;<\/code> sets the text color to red.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-ruleset\">4. Ruleset<\/h3>\n\n\n\n<p>A ruleset consists of a selector and a declaration block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"810\" height=\"160\" data-src=\"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-dictionary.jpg\" alt=\"\" class=\"wp-image-3508 lazyload\" style=\"--smush-placeholder-width: 810px; --smush-placeholder-aspect-ratio: 810\/160;width:840px;height:auto\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><figcaption class=\"wp-element-caption\">This ruleset changes the text color of all paragraphs to blue and sets their font size to 16 pixels.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-class\">5. Class<\/h3>\n\n\n\n<p>A class is a way to group elements so you can style them the same way. Classes are defined with a <code>.<\/code> followed by a name.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>: <code>.highlight { color: yellow; }<\/code> styles all elements with the class \"highlight\" to have yellow text.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-id\">6. ID<\/h3>\n\n\n\n<p>We use an ID to identify a single, unique element. IDs are defined with a <code>#<\/code> followed by a name.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>: <code>#header { background-color: lightblue; }<\/code> sets the background color of the element with the ID \"header\" to light blue.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-cascade\">7. Cascade<\/h3>\n\n\n\n<p>The \"cascading\" part of CSS means that the final appearance of an element can be influenced by multiple styles, with a specific order of precedence. Styles are applied in the following order:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Browser default styles<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>External and internal stylesheets (in the <code>&lt;head&gt;<\/code> of the document)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inline styles (inside the HTML elements)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Importance (styles marked with <code>!important<\/code>)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-common-uses-of-css\">Common uses of CSS<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Changing text color and size.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setting background colors and images.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjusting the spacing between elements (margins and padding).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aligning content (center, left, right).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating layouts with multiple columns or sections.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tips\">Tips<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use comments (<code>\/* comment *\/<\/code>) to keep your CSS organized and easy to understand.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start with an external stylesheet for larger projects to keep your HTML clean.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use shorthand properties to simplify your CSS (e.g., <code>margin: 10px 20px;<\/code> instead of setting each margin side separately).<\/li>\n<\/ul>\n\n\n\n<p>By learning and using CSS, you can make your web pages more attractive and user-friendly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.<\/p>\n","protected":false},"featured_media":3509,"template":"","class_list":["post-3506","dictionary","type-dictionary","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS (Cascading Style Sheets) - CREA SPACE Web Dev. Dictionary<\/title>\n<meta name=\"description\" content=\"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS (Cascading Style Sheets)\" \/>\n<meta property=\"og:description\" content=\"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets\" \/>\n<meta property=\"og:site_name\" content=\"CREA SPACE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creaspaceltd\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-17T07:03:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@creaspaceltd\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets\",\"url\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets\",\"name\":\"CSS (Cascading Style Sheets) - CREA SPACE Web Dev. Dictionary\",\"isPartOf\":{\"@id\":\"https:\/\/crea.space\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage\"},\"image\":{\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage\"},\"thumbnailUrl\":\"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg\",\"datePublished\":\"2024-05-22T10:19:46+00:00\",\"dateModified\":\"2024-06-17T07:03:50+00:00\",\"description\":\"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.\",\"breadcrumb\":{\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage\",\"url\":\"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg\",\"contentUrl\":\"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg\",\"width\":7952,\"height\":5304,\"caption\":\"Image showing a hand doing css on a laptop\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crea.space\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dictionary entries\",\"item\":\"https:\/\/crea.space\/web-development-dictionary\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS (Cascading Style Sheets)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crea.space\/#website\",\"url\":\"https:\/\/crea.space\/\",\"name\":\"CREA SPACE\",\"description\":\"Developing a smarter internet\",\"publisher\":{\"@id\":\"https:\/\/crea.space\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crea.space\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crea.space\/#organization\",\"name\":\"CREA SPACE LTD\",\"alternateName\":\"CREA SPACE\",\"url\":\"https:\/\/crea.space\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crea.space\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crea.space\/wp-content\/uploads\/2024\/03\/CREA-SPACE-logo-blue-512x512-1.jpg\",\"contentUrl\":\"https:\/\/crea.space\/wp-content\/uploads\/2024\/03\/CREA-SPACE-logo-blue-512x512-1.jpg\",\"width\":512,\"height\":512,\"caption\":\"CREA SPACE LTD\"},\"image\":{\"@id\":\"https:\/\/crea.space\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creaspaceltd\",\"https:\/\/x.com\/creaspaceltd\",\"https:\/\/www.linkedin.com\/company\/crea-space-ltd\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS (Cascading Style Sheets) - CREA SPACE Web Dev. Dictionary","description":"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.","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:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets","og_locale":"en_US","og_type":"article","og_title":"CSS (Cascading Style Sheets)","og_description":"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.","og_url":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets","og_site_name":"CREA SPACE","article_publisher":"https:\/\/www.facebook.com\/creaspaceltd","article_modified_time":"2024-06-17T07:03:50+00:00","og_image":[{"url":"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg","width":1024,"height":683,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@creaspaceltd","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets","url":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets","name":"CSS (Cascading Style Sheets) - CREA SPACE Web Dev. Dictionary","isPartOf":{"@id":"https:\/\/crea.space\/#website"},"primaryImageOfPage":{"@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage"},"image":{"@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage"},"thumbnailUrl":"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg","datePublished":"2024-05-22T10:19:46+00:00","dateModified":"2024-06-17T07:03:50+00:00","description":"CSS is a language that is used to describe the appearance and formatting of a document written in HTML or XML.","breadcrumb":{"@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#primaryimage","url":"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg","contentUrl":"https:\/\/crea.space\/wp-content\/uploads\/2024\/05\/crea-space-css-web-development-dictionary-featured-image.jpg","width":7952,"height":5304,"caption":"Image showing a hand doing css on a laptop"},{"@type":"BreadcrumbList","@id":"https:\/\/crea.space\/web-development-dictionary\/css-cascading-style-sheets#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crea.space\/"},{"@type":"ListItem","position":2,"name":"Dictionary entries","item":"https:\/\/crea.space\/web-development-dictionary"},{"@type":"ListItem","position":3,"name":"CSS (Cascading Style Sheets)"}]},{"@type":"WebSite","@id":"https:\/\/crea.space\/#website","url":"https:\/\/crea.space\/","name":"CREA SPACE","description":"Developing a smarter internet","publisher":{"@id":"https:\/\/crea.space\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crea.space\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crea.space\/#organization","name":"CREA SPACE LTD","alternateName":"CREA SPACE","url":"https:\/\/crea.space\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crea.space\/#\/schema\/logo\/image\/","url":"https:\/\/crea.space\/wp-content\/uploads\/2024\/03\/CREA-SPACE-logo-blue-512x512-1.jpg","contentUrl":"https:\/\/crea.space\/wp-content\/uploads\/2024\/03\/CREA-SPACE-logo-blue-512x512-1.jpg","width":512,"height":512,"caption":"CREA SPACE LTD"},"image":{"@id":"https:\/\/crea.space\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creaspaceltd","https:\/\/x.com\/creaspaceltd","https:\/\/www.linkedin.com\/company\/crea-space-ltd"]}]}},"_links":{"self":[{"href":"https:\/\/crea.space\/wp-json\/wp\/v2\/dictionary\/3506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crea.space\/wp-json\/wp\/v2\/dictionary"}],"about":[{"href":"https:\/\/crea.space\/wp-json\/wp\/v2\/types\/dictionary"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crea.space\/wp-json\/wp\/v2\/media\/3509"}],"wp:attachment":[{"href":"https:\/\/crea.space\/wp-json\/wp\/v2\/media?parent=3506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}