{"id":2745,"date":"2024-09-01T01:08:57","date_gmt":"2024-08-31T23:08:57","guid":{"rendered":"https:\/\/wypo.io\/?p=2745"},"modified":"2024-09-01T01:10:00","modified_gmt":"2024-08-31T23:10:00","slug":"css","status":"publish","type":"post","link":"https:\/\/wypo.io\/en\/css\/","title":{"rendered":"Introduction to CSS : Style your website"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">You created a website, but it lacks style? CSS is the solution to transform your basic site into a visual masterpiece! Imagine a dish without salt&#8230; that&#8217;s exactly what a site without CSS is. Not very appetizing, is it?<\/p>\n\n\n\n<p class=\"\">CSS, or Cascading Style Sheets, is the magic tool that gives style to your HTML. Simply put, CSS is what separates content from presentation, making your website not only functional but also aesthetically pleasing.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-what-is-css\">What is CSS?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-definition\">Definition<\/h3>\n\n\n\n<p class=\"\">CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. Essentially, if HTML is the skeleton of your site, CSS is the wardrobe. It allows you to separate content (HTML) from presentation (CSS), simplifying maintenance and enhancing flexibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-history\">History<\/h3>\n\n\n\n<p class=\"\">CSS made its debut in December 1996 with CSS1. At the time, developers were still dancing the Macarena and wondering what they could do with this new tool. Over time, CSS has evolved through several versions (CSS2, CSS3), bringing new features and making web design even more exciting.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-css-basics\">CSS Basics<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-basic-syntax\">Basic Syntax<\/h3>\n\n\n\n<p class=\"\">CSS syntax is quite simple: a selector, a property, and a value. For example:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-939723916\"\n        id=\"codemirror-939723916\"\n      >body {\n  background-color: lightblue;\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-939723916'), {\n          mode: 'css',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\">Here, <code>body<\/code> is the selector, <code>background-color<\/code> is the property, and <code>lightblue<\/code> is the value. Easy, right?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-integrating-css-with-html\">Integrating CSS with HTML<\/h3>\n\n\n\n<p class=\"\">There are three ways to integrate CSS with HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Inline CSS:<\/strong> directly in the HTML tags, ideal for quick adjustments.<\/li>\n\n\n\n<li class=\"\"><strong>Internal CSS:<\/strong> in a <code>&lt;style><\/code> tag in the HTML document&#8217;s head, perfect for styles specific to a single page.<\/li>\n\n\n\n<li class=\"\"><strong>External CSS:<\/strong> in a separate <code>.css<\/code> file, the best practice for maintaining clean and reusable code.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-css-comments\">CSS Comments<\/h3>\n\n\n\n<p class=\"\">CSS comments are essential for keeping your code understandable. They are written like this:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-32393677\"\n        id=\"codemirror-32393677\"\n      >\/* This is a comment *\/<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-32393677'), {\n          mode: 'css',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\">Use them generously to explain your styling choices and avoid future confusion.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-css-selectors\">CSS Selectors<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-selector-types\">Selector Types<\/h3>\n\n\n\n<p class=\"\">Selectors are the basic elements of CSS. Here are the main ones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Type Selectors:<\/strong> target HTML tags, e.g., <code>p {color: red;}<\/code>.<\/li>\n\n\n\n<li class=\"\"><strong>Class Selectors:<\/strong> target classes defined with <code>class=\"name\"<\/code>, e.g., <code>.name {font-size: 20px;}<\/code>.<\/li>\n\n\n\n<li class=\"\"><strong>ID Selectors:<\/strong> target IDs defined with <code>id=\"name\"<\/code>, e.g., <code>#name {margin: 10px;}<\/code>.<\/li>\n\n\n\n<li class=\"\"><strong>Attribute Selectors:<\/strong> target elements with a certain attribute.<\/li>\n\n\n\n<li class=\"\"><strong>Pseudo-class and Pseudo-element Selectors:<\/strong> target specific states of elements, like <code>:hover<\/code> or <code>::after<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-hierarchy-and-specificity\">Hierarchy and Specificity<\/h3>\n\n\n\n<p class=\"\">Specificity is a crucial rule in CSS: it determines which rules apply when multiple rules target the same element. In short, the more specific a selector is, the more weight it carries. And believe me, in CSS, weight matters!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-essential-css-properties\">Essential CSS Properties<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-text-and-typography\">Text and Typography<\/h3>\n\n\n\n<p class=\"\">Text and typography properties are crucial for the readability and aesthetics of your site:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><code>font-family<\/code>, <code>font-size<\/code>, <code>font-weight<\/code> to set the font, size, and weight of the text.<\/li>\n\n\n\n<li class=\"\"><code>text-align<\/code>, <code>text-decoration<\/code>, <code>line-height<\/code> to align, decorate, and space the text.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-colors-and-backgrounds\">Colors and Backgrounds<\/h3>\n\n\n\n<p class=\"\">Colors and backgrounds bring life to your site:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><code>color<\/code>, <code>background-color<\/code>, <code>background-image<\/code> to set colors and background images.<\/li>\n\n\n\n<li class=\"\">Gradients and transparency for elegant visual effects.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-box-model\">Box Model<\/h3>\n\n\n\n<p class=\"\">Box model properties define the space around and inside elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><code>margin<\/code>, <code>padding<\/code>, <code>border<\/code> to manage spaces and borders.<\/li>\n\n\n\n<li class=\"\"><code>width<\/code>, <code>height<\/code>, <code>box-sizing<\/code> to control the size of elements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-element-layout\">Element Layout<\/h3>\n\n\n\n<p class=\"\">Layout is key to organizing your content:<\/p>\n\n\n\n<p class=\"\"><code>display<\/code>, <code>position<\/code>, <code>flexbox<\/code>, <code>grid<\/code> to align and place elements in a flexible and responsive manner.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-advanced-css-techniques\">Advanced CSS Techniques<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-animations-and-transitions\">Animations and Transitions<\/h3>\n\n\n\n<p class=\"\">Add dynamism to your site with CSS animations and transitions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Transitions allow properties to change smoothly.<\/li>\n\n\n\n<li class=\"\">Keyframes and animations add complex and attractive effects.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-responsive-design\">Responsive Design<\/h3>\n\n\n\n<p class=\"\">Responsive design is essential for making your site look great on all devices:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use media queries to adapt styles based on screen size.<\/li>\n\n\n\n<li class=\"\">Techniques like flexbox and grid for creating adaptive layouts.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-css-preprocessors\">CSS Preprocessors<\/h3>\n\n\n\n<p class=\"\">CSS preprocessors like SASS and LESS make CSS even more powerful:<\/p>\n\n\n\n<p class=\"\">They enhance the maintainability and reusability of CSS code.<\/p>\n\n\n\n<p class=\"\">They add features such as variables, functions, and mixins.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-css-best-practices\">CSS Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-organization-and-structure\">Organization and Structure<\/h3>\n\n\n\n<p class=\"\">Well-structured CSS code is easier to maintain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use naming conventions like BEM (Block, Element, Modifier) or OOCSS (Object-Oriented CSS).<\/li>\n\n\n\n<li class=\"\">Organize your CSS into modules for better management.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-performance\">Performance<\/h3>\n\n\n\n<p class=\"\">Optimize the performance of your CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Minify and concatenate your CSS files to reduce load times.<\/li>\n\n\n\n<li class=\"\">Avoid heavy selectors and redundancies.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-accessibility\">Accessibility<\/h3>\n\n\n\n<p class=\"\">Ensure your CSS is accessible to everyone:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Avoid animations and transitions that could cause issues for sensitive users.<\/li>\n\n\n\n<li class=\"\">Use appropriate colors and contrasts.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-visual-resources-and-code-examples\">Visual Resources and Code Examples<\/h2>\n\n\n\n<p class=\"\">To illustrate the concepts discussed, we invite you to check out CSS code examples on sites like <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CodePen<\/a>. There, you&#8217;ll find real-time demonstrations that you can modify and adapt to your needs.<\/p>\n\n\n\n<p class=\"\"><br>To go further, here are some useful resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/www.codecademy.com\/learn\/learn-css\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Codecademy<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MDN Web Docs<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS-Tricks<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What is CSS? Definition CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. Essentially, if HTML is the skeleton of your site, CSS is the wardrobe. It allows you to separate content (HTML) from presentation (CSS), simplifying maintenance and enhancing flexibility. History [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Style your website with CSS [separator] [sitetitle]","hf_wpseo_meta_description":"Discover the basics of CSS and learn how to turn your website into a visual masterpiece. This guide covers everything from selectors to advanced techniques to help you master CSS.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","footnotes":""},"categories":[48],"tags":[],"class_list":["post-2745","post","type-post","status-publish","format-standard","hentry","category-glossary"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/comments?post=2745"}],"version-history":[{"count":4,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2745\/revisions"}],"predecessor-version":[{"id":2749,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2745\/revisions\/2749"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=2745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/categories?post=2745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/tags?post=2745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}