{"id":16139,"date":"2018-03-22T19:03:26","date_gmt":"2018-03-23T00:03:26","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/blog\/?p=16139"},"modified":"2021-11-17T02:18:12","modified_gmt":"2021-11-17T08:18:12","slug":"cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/","title":{"rendered":"An Introduction to Cascading Style Sheets"},"content":{"rendered":"

Have you ever wondered what exactly powers the visual aesthetics and functionality of websites? Are you interested in diving deeper into the infrastructure of your static or WordPress website? If so, then Cascading Style Sheets and the foundation of dynamic web design is an excellent place to begin.<\/p>\n

While modern websites run on a variety of coding languages, such as HTML, HTML5, JavaScript, and PHP, the majority of sites require a Cascading Style Sheet, or CSS, file. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in activating and directing the visual style elements that make up a website.<\/p>\n

Even though CSS is a complex and multi-layered coding language, the best place to begin your understanding is learning what its purpose actually is and how this code interacts with your website. Without further ado, let\u2019s briefly dive into the cascading world of CSS.<\/p>\n

CSS – A Brief Overview<\/h2>\n

\"\"Essentially, CSS is a collection of style definitions that are followed when an HTML document is rendered by an end-user\u2019s browser. Not only does a CSS stylesheet define the visual elements represented in the HTML document, but it also instructs the browser about where these elements should be positioned on the rendered webpage.<\/p>\n

In terms of website coding and rendering, Cascading Style Sheets reduce time as it eliminates the need to input each attribute within your HTML document. As you can imagine, having to individually assign attributes would take forever to write and even longer to render for a browser. Running a webpage speed test<\/a> can fill you in on any elements that could benefit from optimization.<\/p>\n

With CSS, you create a broad rule assigned to specific attributes. For example, whenever an HTML document refers to a specific visual attribute, the browser calls upon the CSS stylesheet for instructions. It doesn\u2019t matter if the attribute occurs once or 1,000 times, the element descriptions are only written once in the CSS.<\/p>\n

The Parts of CSS Styling<\/h3>\n

Every CSS style command, which is also called a style rule, features two components: selector and declaration. In essence, the selector attribute, such as H2, defines the on-page element to be rendered. The declaration defines how the selector will look when rendered. This means any text included within this attribute will look as described by the declaration. For example,<\/p>\n

H2 {text-align:center; color:red;}<\/p>\n

In the above code snippet, the selector is (H2) while the declaration is everything included within the brackets. If this was being used in your site, then text included within the HTML <H2>\u2026<\/H2> tags would be centered and colored red. This would be true regardless of where or how many times you used this specific HTML tag.<\/p>\n

Creating CSS style rules may also be done directly within the HTML document using the <style><\/style> tags found in <HEAD> section of the HTML file. This is referred to as an internal CSS stylesheet. However, you may also create an external CSS stylesheet, which is a separate document from the HTML file. Unlike HTML files with included CSS, an external CSS stylesheet only contains CSS style rules and not actual website content.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever wondered what exactly powers the visual aesthetics and functionality of websites?<\/p>\n","protected":false},"author":2,"featured_media":16145,"comment_status":"open","ping_status":"open","sticky":false,"template":"template-url.php","format":"standard","meta":[],"categories":[75],"tags":[76,77],"yoast_head":"\r\nIntroduction to Cascading Style Sheets for the Modern Website<\/title>\r\n<meta name=\"description\" content=\"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"An Introduction to Cascading Style Sheets\" \/>\r\n<meta property=\"og:description\" content=\"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta property=\"article:published_time\" content=\"2018-03-23T00:03:26+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2021-11-17T08:18:12+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png\" \/>\r\n\t<meta property=\"og:image:width\" content=\"400\" \/>\r\n\t<meta property=\"og:image:height\" content=\"382\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:creator\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dan Oksnavad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let's Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#primaryimage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png\",\"contentUrl\":\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png\",\"width\":400,\"height\":382},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/\",\"name\":\"Introduction to Cascading Style Sheets for the Modern Website\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#primaryimage\"},\"datePublished\":\"2018-03-23T00:03:26+00:00\",\"dateModified\":\"2021-11-17T08:18:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/5746e140a1ac16b1dacec9bb543da006\"},\"description\":\"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to Cascading Style Sheets\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/5746e140a1ac16b1dacec9bb543da006\",\"name\":\"Dan Oksnavad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6381632e291b5aaea545fc4e18299b12?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6381632e291b5aaea545fc4e18299b12?s=96&d=retro&r=pg\",\"caption\":\"Dan Oksnavad\"},\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/author\/oksnavadd\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction to Cascading Style Sheets for the Modern Website","description":"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.","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.dotcom-tools.com\/web-performance\/cascading-style-sheets\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to Cascading Style Sheets","og_description":"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","article_published_time":"2018-03-23T00:03:26+00:00","article_modified_time":"2021-11-17T08:18:12+00:00","og_image":[{"width":400,"height":382,"url":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png","type":"image\/png"}],"twitter_card":"summary","twitter_creator":"@dotcom_monitor","twitter_site":"@dotcom_monitor","twitter_misc":{"Written by":"Dan Oksnavad","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let's Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#primaryimage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png","contentUrl":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/03\/cascading-style-sheets.png","width":400,"height":382},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/","name":"Introduction to Cascading Style Sheets for the Modern Website","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#primaryimage"},"datePublished":"2018-03-23T00:03:26+00:00","dateModified":"2021-11-17T08:18:12+00:00","author":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/5746e140a1ac16b1dacec9bb543da006"},"description":"While modern websites run on a variety of coding languages, the majority of sites require Cascading Style Sheets, or CSS files. Whether you\u2019re building a website or a web application, CSS plays a fundamental role in directing the visual style elements that make up a website.","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/cascading-style-sheets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Cascading Style Sheets"}]},{"@type":"Person","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/5746e140a1ac16b1dacec9bb543da006","name":"Dan Oksnavad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6381632e291b5aaea545fc4e18299b12?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6381632e291b5aaea545fc4e18299b12?s=96&d=retro&r=pg","caption":"Dan Oksnavad"},"url":"https:\/\/www.dotcom-tools.com\/web-performance\/author\/oksnavadd\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16139"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=16139"}],"version-history":[{"count":8,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16139\/revisions"}],"predecessor-version":[{"id":17802,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16139\/revisions\/17802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media\/16145"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=16139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/categories?post=16139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/tags?post=16139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}