{"id":182044,"date":"2024-03-20T10:13:32","date_gmt":"2024-03-20T09:13:32","guid":{"rendered":"https:\/\/datascientest.com\/en\/?p=182044"},"modified":"2024-03-08T17:42:41","modified_gmt":"2024-03-08T16:42:41","slug":"css3-all-you-need-to-know-about-this-programming-language","status":"publish","type":"post","link":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language","title":{"rendered":"CSS3: All you need to know about this programming language"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"182044\" class=\"elementor elementor-182044\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-035a9bc e-flex e-con-boxed e-con\" data-id=\"035a9bc\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8e2580 elementor-widget elementor-widget-heading\" data-id=\"c8e2580\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">When you surf the web, the sites you visit are a harmonious combination of content (text, images, videos) and presentation. But have you ever imagined what lies behind those eye-catching designs, smooth animations and responsive layouts? That's where CSS comes in.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e2b99e7 e-flex e-con-boxed e-con\" data-id=\"e2b99e7\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c956af8 elementor-widget elementor-widget-heading\" data-id=\"c956af8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What is CSS and why is it important?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14a91f2 elementor-widget elementor-widget-text-editor\" data-id=\"14a91f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><strong>CSS,<\/strong> or Cascading Style Sheets, is a language used to describe the appearance and formatting of a document written in <strong>HTML or XML.<\/strong> In other words, while HTML provides the structure of the page (such as headings, paragraphs and links), CSS determines how these elements should appear on screen. This includes aspects such as color, font size, spacing and even animations.<\/p><p>The importance of<strong> CSS lies in its ability to separate content from presentation.<\/strong> This means that developers and designers can modify the appearance of a website without touching its content. This separation also offers greater flexibility, enabling <a href=\"https:\/\/datascientest.com\/en\/exploring-traffic-manager-training-programs-enhance-your-skills-and-career-potential\">websites<\/a> to adapt to different types of device and screen sizes.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b8b80a e-flex e-con-boxed e-con\" data-id=\"2b8b80a\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89016c5 elementor-widget elementor-widget-heading\" data-id=\"89016c5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The benefits of CSS3: a major evolution in web design<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f96e763 elementor-widget elementor-widget-html\" data-id=\"f96e763\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style type=\"text\/css\">\r\n.tg  {border-collapse:collapse;border-spacing:0;}\r\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg .tg-o6e8{background-color:#c0c0c0;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:center;\r\n  vertical-align:top}\r\n.tg .tg-gfw1{background-color:#c0c0c0;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;\r\n  text-align:center;vertical-align:top}\r\n.tg .tg-tvfv{background-color:#ffffff;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;\r\n  vertical-align:top}\r\n<\/style>\r\n<table class=\"tg\" style=\"undefined;table-layout: fixed; width: 800px\">\r\n<colgroup>\r\n<col style=\"width: 70px\">\r\n<col style=\"width: 230px\">\r\n<col style=\"width: 500px\">\r\n<\/colgroup>\r\n<thead>\r\n  <tr>\r\n    <th class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image7-3.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/th>\r\n    <th class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Advanced Graphics Capabilities<\/span><\/th>\r\n    <th class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">Gradients and rounded borders (or similar effects) can be achieved directly with code, reducing dependence on images and speeding up page load times.<\/span><\/th>\r\n  <\/tr>\r\n<\/thead>\r\n<tbody>\r\n  <tr>\r\n    <td class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image2-3.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/td>\r\n    <td class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Animations and Transitions<\/span><\/td>\r\n    <td class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">CSS3 introduced specific properties for animations and transitions, allowing developers to create smooth movements and interaction effects directly with CSS.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image5-3.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/td>\r\n    <td class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Responsive Design<\/span><\/td>\r\n    <td class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">One of the biggest advantages of CSS3 is its ability to make websites \"responsive,\" meaning websites have the ability to adapt to different screen sizes.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image9-3.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/td>\r\n    <td class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Custom Fonts<\/span><\/td>\r\n    <td class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">With the introduction of the <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000\">@font-face<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\"> rule, CSS3 allowed designers to use custom fonts on websites, paving the way for greater typographic design freedom.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image12-1.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/td>\r\n    <td class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Compatibility and Performance<\/span><\/td>\r\n    <td class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">While browser compatibility has always been a challenge, CSS3 has been widely adopted by all modern browsers. Additionally, by reducing dependence on images and external scripts for styling effects, CSS3 has also improved website performance.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-o6e8\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image8-2.png\" alt=\"Image\" width=\"60\" height=\"60\"><\/td>\r\n    <td class=\"tg-gfw1\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000\">Code Simplification<\/span><\/td>\r\n    <td class=\"tg-tvfv\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000\">With the introduction of new properties and selectors, CSS3 allows developers to achieve complex designs with less code. This results in cleaner, easier-to-maintain, and more efficient style sheets.<\/span><\/td>\r\n  <\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-864235e elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"864235e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Discover our training courses<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d47843b e-flex e-con-boxed e-con\" data-id=\"d47843b\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95f215d elementor-widget elementor-widget-heading\" data-id=\"95f215d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The main new features<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-557744c elementor-widget elementor-widget-text-editor\" data-id=\"557744c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The arrival of CSS3 has brought unprecedented evolution to <a href=\"https:\/\/datascientest.com\/en\/django-all-about-the-python-web-development-framework\">web development<\/a>. Here are just a few of them:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db081c3 elementor-widget elementor-widget-heading\" data-id=\"db081c3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Advanced selectors<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba8541f elementor-widget elementor-widget-text-editor\" data-id=\"ba8541f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Selectors are at the heart of CSS functionality. CSS3 adds new ones:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-121c368 e-flex e-con-boxed e-con\" data-id=\"121c368\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b8b110c e-con-full e-flex e-con\" data-id=\"b8b110c\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8bc9479 elementor-widget elementor-widget-image\" data-id=\"8bc9479\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image10-3.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-92d8614 e-con-full e-flex e-con\" data-id=\"92d8614\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4880bb elementor-widget elementor-widget-text-editor\" data-id=\"c4880bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Attribute selectors:<\/strong> allow you to target elements according to the presence or value of their attributes, for example [data-attribute] or [attr^=&#8221;value&#8221;].<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Structural selectors:<\/strong> These let you target elements according to their position or relationship to other elements, such as :nth-child() or :last-of-type.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b534e3 e-flex e-con-boxed e-con\" data-id=\"6b534e3\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a07e630 elementor-widget elementor-widget-heading\" data-id=\"a07e630\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Graphic effects<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e64a25 elementor-widget elementor-widget-text-editor\" data-id=\"5e64a25\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>CSS3 has introduced a variety of graphic effects that were previously only possible with images or scripts.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d08aae5 e-flex e-con-boxed e-con\" data-id=\"d08aae5\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3ed3696 e-con-full e-flex e-con\" data-id=\"3ed3696\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aed8a88 elementor-widget elementor-widget-image\" data-id=\"aed8a88\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image4-2.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-42a695a e-con-full e-flex e-con\" data-id=\"42a695a\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33f6dfb elementor-widget elementor-widget-text-editor\" data-id=\"33f6dfb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Gradients:<\/strong> With linear-gradient and radial-gradient, you can create smooth gradients without the need for images.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Drop shadows:<\/strong> The box-shadow property lets you add shadows to elements, adding depth and emphasis.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Transformations:<\/strong> Transformations, such as rotate, scale or translate, can be used to modify the shape, size or position of an element.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64662b6 e-flex e-con-boxed e-con\" data-id=\"64662b6\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ea70a8 elementor-widget elementor-widget-heading\" data-id=\"6ea70a8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Transitions and animations<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c63bc4 elementor-widget elementor-widget-text-editor\" data-id=\"8c63bc4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>CSS3 transitions and animations enabled dynamic and attractive interactions without relying on JavaScript.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7799f72 e-flex e-con-boxed e-con\" data-id=\"7799f72\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bd4dae8 e-con-full e-flex e-con\" data-id=\"bd4dae8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50fe593 elementor-widget elementor-widget-image\" data-id=\"50fe593\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image1-3.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b7c72ab e-con-full e-flex e-con\" data-id=\"b7c72ab\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6668e70 elementor-widget elementor-widget-text-editor\" data-id=\"6668e70\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Transitions:<\/strong> These enable fluid changes between the states of an element.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Animations:<\/strong> With keyframes, designers can create complex animation sequences, from simple bounces to looping animations.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a851599 e-flex e-con-boxed e-con\" data-id=\"a851599\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7bb56fe elementor-widget elementor-widget-heading\" data-id=\"7bb56fe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Responsive Design<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17d77a4 elementor-widget elementor-widget-text-editor\" data-id=\"17d77a4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>CSS3 provides the necessary tools to enable pages to adapt to screen size.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-08e49ec e-flex e-con-boxed e-con\" data-id=\"08e49ec\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8166253 e-con-full e-flex e-con\" data-id=\"8166253\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c8c8de elementor-widget elementor-widget-image\" data-id=\"7c8c8de\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image5-4.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce97746 e-con-full e-flex e-con\" data-id=\"ce97746\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad35b23 elementor-widget elementor-widget-text-editor\" data-id=\"ad35b23\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Media queries:<\/strong> Enable styles to be applied according to screen size or other display conditions.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Flexbox:<\/strong> A layout template that facilitates the creation of flexible, adaptive designs.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Grid Layout<\/strong>: Another layout innovation, making it easy to create complex grids.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab6e72b e-flex e-con-boxed e-con\" data-id=\"ab6e72b\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a390681 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"a390681\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Find out more about our training courses<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ce1b7a elementor-widget elementor-widget-heading\" data-id=\"1ce1b7a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Typographies<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d06bd6d elementor-widget elementor-widget-text-editor\" data-id=\"d06bd6d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Typography has always been a central element of design, and CSS3 has taken it even further.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a052b8d e-flex e-con-boxed e-con\" data-id=\"a052b8d\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-02a464e e-con-full e-flex e-con\" data-id=\"02a464e\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23efdd0 elementor-widget elementor-widget-image\" data-id=\"23efdd0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/09\/image11-1.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5922a2f e-con-full e-flex e-con\" data-id=\"5922a2f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa3eeda elementor-widget elementor-widget-text-editor\" data-id=\"aa3eeda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>@font-face:<\/strong> This rule enables the integration of custom fonts, offering unprecedented typographic freedom.<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Advanced properties:<\/strong> With properties such as text-shadow or font-variant, CSS3 has enriched the possibilities for text stylization.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc5e58f e-flex e-con-boxed e-con\" data-id=\"dc5e58f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84e83b5 elementor-widget elementor-widget-heading\" data-id=\"84e83b5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What are the best practices for CSS3?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21c7dda elementor-widget elementor-widget-text-editor\" data-id=\"21c7dda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>CSS3, with its vast capabilities, offers great flexibility to developers and designers. However, with this power comes the responsibility to use it wisely. Adopting good practices when working with CSS3 guarantees not only high-performance websites, but also maintainable, scalable code. Let&#8217;s take a look at some of these essential practices.<\/p><ul><li><strong>Progressive design:<\/strong> Progressive design means starting with a solid foundation that works across all devices and browsers, then gradually adding functionality for more modern browsers.<\/li><li><strong>Use of vendor prefixes:<\/strong> Vendor prefixes are used for properties specific to certain browsers. While this may seem redundant, using prefixes ensures that your design remains consistent across all browsers.<\/li><li><strong>Organize your code<\/strong>: Well-organized CSS is easier to read, maintain and debug. So, group similar selectors together to reduce redundancy and improve readability, comment out your CSS and adopt a development methodology.<\/li><li><strong>Test browser compatibility:<\/strong> Even with the standardization of CSS3, not all browsers interpret code in the same way. Use tools like &#8220;Can I use&#8221; to check the compatibility of properties, and test your site on different browsers and devices.<\/li><li><strong>Optimize your code:<\/strong> Minimize the size of your CSS (online tools exist to help you with this task), avoid universal selectors which can slow down page loading, and avoid putting too many images where they&#8217;re not necessarily needed.<\/li><li><strong>Stay up to date:<\/strong> Web technologies evolve rapidly. Stay up to date!<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9aef9e e-flex e-con-boxed e-con\" data-id=\"e9aef9e\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb4a97f elementor-widget elementor-widget-heading\" data-id=\"eb4a97f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef06f17 elementor-widget elementor-widget-text-editor\" data-id=\"ef06f17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>Scanning the vast capabilities of CSS3,<\/strong> it&#8217;s clear that this language has revolutionized the way we design and develop websites.<\/p><p>From advanced selectors to dynamic animations and responsive layout, CSS3 has enabled designers to push the boundaries of what&#8217;s possible in web design.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f398b5e elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"f398b5e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Find out about our training courses<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb698ed e-flex e-con-boxed e-con\" data-id=\"bb698ed\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-edaf6cb elementor-widget elementor-widget-html\" data-id=\"edaf6cb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"What is CSS and why is it important?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"CSS, or Cascading Style Sheets, is a language used to describe the appearance and formatting of a document written in HTML or XML. In other words, while HTML provides the structure of the page (such as headings, paragraphs and links), CSS determines how these elements should appear on screen. This includes aspects such as color, font size, spacing, and even animations.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"What are good practices with CSS3?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"CSS3, with its vast capabilities, offers great flexibility to developers and designers. However, with this power comes the responsibility to use it wisely. Adopting good practices when working with CSS3 guarantees not only high-performance websites, but also maintainable and scalable code. Let's take a look at some of these essential practices.\"\n    }\n  }]\n}\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>When you surf the web, the sites you visit are a harmonious combination of content (text, images, videos) and presentation. But have you ever imagined what lies behind those eye-catching designs, smooth animations and responsive layouts? That&#8217;s where CSS comes in. What is CSS and why is it important? CSS, or Cascading Style Sheets, is [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":182048,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2425],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3: All you need to know about this programming language<\/title>\n<meta name=\"description\" content=\"CSS3, the latest version of Cascading Style Sheets, used to style web pages and create visually appealing layouts, is used for 75% of..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3: All you need to know about this programming language\" \/>\n<meta property=\"og:description\" content=\"When you surf the web, the sites you visit are a harmonious combination of content (text, images, videos) and presentation. But have you ever imagined\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\" \/>\n<meta property=\"og:site_name\" content=\"Data Science Courses | DataScientest\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataScientestEN\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-20T09:13:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-08T16:42:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/en\/files\/2024\/03\/css3-1024x512-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Melanie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:site\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Melanie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language#article\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\"},\"author\":{\"name\":\"Melanie\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d\"},\"headline\":\"CSS3: All you need to know about this programming language\",\"datePublished\":\"2024-03-20T09:13:32+00:00\",\"dateModified\":\"2024-03-08T16:42:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\"},\"wordCount\":934,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"articleSection\":[\"Data Science\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/datascientest.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\",\"url\":\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\",\"name\":\"CSS3: All you need to know about this programming language\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/#website\"},\"datePublished\":\"2024-03-20T09:13:32+00:00\",\"dateModified\":\"2024-03-08T16:42:41+00:00\",\"description\":\"CSS3, the latest version of Cascading Style Sheets, used to style web pages and create visually appealing layouts, is used for 75% of..\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/en\/#website\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"name\":\"Data Science Courses | DataScientest\",\"description\":\"Leader in Data Science Courses\",\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/datascientest.com\/en\/#organization\",\"name\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"contentUrl\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"width\":301,\"height\":301,\"caption\":\"DataScientest\"},\"image\":{\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DataScientestEN\",\"https:\/\/twitter.com\/DataScientest__\",\"https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/\",\"https:\/\/www.tiktok.com\/@datascientest\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d\",\"name\":\"Melanie\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g\",\"caption\":\"Melanie\"},\"url\":\"https:\/\/datascientest.com\/en\/author\/melaniekrause\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS3: All you need to know about this programming language","description":"CSS3, the latest version of Cascading Style Sheets, used to style web pages and create visually appealing layouts, is used for 75% of..","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:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language","og_locale":"en_GB","og_type":"article","og_title":"CSS3: All you need to know about this programming language","og_description":"When you surf the web, the sites you visit are a harmonious combination of content (text, images, videos) and presentation. But have you ever imagined","og_url":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language","og_site_name":"Data Science Courses | DataScientest","article_publisher":"https:\/\/www.facebook.com\/DataScientestEN","article_published_time":"2024-03-20T09:13:32+00:00","article_modified_time":"2024-03-08T16:42:41+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/datascientest.com\/en\/files\/2024\/03\/css3-1024x512-1.png","type":"image\/png"}],"author":"Melanie","twitter_card":"summary_large_image","twitter_creator":"@DataScientest__","twitter_site":"@DataScientest__","twitter_misc":{"Written by":"Melanie","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language#article","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language"},"author":{"name":"Melanie","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d"},"headline":"CSS3: All you need to know about this programming language","datePublished":"2024-03-20T09:13:32+00:00","dateModified":"2024-03-08T16:42:41+00:00","mainEntityOfPage":{"@id":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language"},"wordCount":934,"commentCount":0,"publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"articleSection":["Data Science"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/datascientest.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language","url":"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language","name":"CSS3: All you need to know about this programming language","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/#website"},"datePublished":"2024-03-20T09:13:32+00:00","dateModified":"2024-03-08T16:42:41+00:00","description":"CSS3, the latest version of Cascading Style Sheets, used to style web pages and create visually appealing layouts, is used for 75% of..","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/en\/#website","url":"https:\/\/datascientest.com\/en\/","name":"Data Science Courses | DataScientest","description":"Leader in Data Science Courses","publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/datascientest.com\/en\/#organization","name":"DataScientest","url":"https:\/\/datascientest.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","contentUrl":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","width":301,"height":301,"caption":"DataScientest"},"image":{"@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataScientestEN","https:\/\/twitter.com\/DataScientest__","https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/","https:\/\/www.tiktok.com\/@datascientest"]},{"@type":"Person","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d","name":"Melanie","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g","caption":"Melanie"},"url":"https:\/\/datascientest.com\/en\/author\/melaniekrause"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/182044"}],"collection":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/comments?post=182044"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/182044\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media\/182048"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media?parent=182044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/categories?post=182044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/tags?post=182044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}