{"id":9722,"date":"2023-03-14T04:31:32","date_gmt":"2023-03-14T04:31:32","guid":{"rendered":"https:\/\/mauricemuteti.info\/?p=9722"},"modified":"2023-03-14T04:31:32","modified_gmt":"2023-03-14T04:31:32","slug":"unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code","status":"publish","type":"post","link":"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/","title":{"rendered":"&#8220;Unleash Your WordPress Design Skills with these Secret Techniques for Writing Extra CSS Code!&#8221;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_49 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-676d3b9ea4a41\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-676d3b9ea4a41\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Perplexing_and_Bursting_Guide_to_Additional_CSS_in_WordPress\" title=\"Perplexing and Bursting Guide to Additional CSS in WordPress\">Perplexing and Bursting Guide to Additional CSS in WordPress<\/a><ul class='ez-toc-list-level-2'><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Step_1_Access_Additional_CSS_in_WordPress\" title=\"Step 1: Access Additional CSS in WordPress\">Step 1: Access Additional CSS in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Step_2_Understand_CSS_Syntax\" title=\"Step 2: Understand CSS Syntax\">Step 2: Understand CSS Syntax<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Step_3_Write_your_custom_CSS\" title=\" Step 3: Write your custom CSS\"> Step 3: Write your custom CSS<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#1_Change_font_styles_and_sizes\" title=\"1. Change font styles and sizes\">1. Change font styles and sizes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#2_Change_background_colors\" title=\"2. Change background colors\">2. Change background colors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#3_Add_borders\" title=\"3. Add borders\">3. Add borders<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#4_Change_the_position_of_elements\" title=\"4. Change the position of elements\">4. Change the position of elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#5_Add_animations\" title=\"5. Add animations\">5. Add animations<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Step_4_Save_your_changes\" title=\" Step 4: Save your changes\"> Step 4: Save your changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/mauricemuteti.info\/unleash-your-wordpress-design-skills-with-these-secret-techniques-for-writing-extra-css-code\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Perplexing_and_Bursting_Guide_to_Additional_CSS_in_WordPress\"><\/span>Perplexing and Bursting Guide to Additional CSS in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>WordPress is now one of the most widely used content management system (CMS) platforms globally. With the numerous available themes and plugins, it is now easier to build a website from scratch without writing a single line of code. However, sometimes you may need to make some changes to your site to give it the extra polishing it needs to stand out. And, WordPress allows you to do this with the additional CSS feature.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Access_Additional_CSS_in_WordPress\"><\/span>Step 1: Access Additional CSS in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Do you want to add some flavor to your WordPress website? Click on the Appearance button after you log in to your dashboard to access Additional CSS. The option enables users to add custom CSS codes to their website without having to create a child theme or edit the original theme files.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Understand_CSS_Syntax\"><\/span>Step 2: Understand CSS Syntax<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before you get started on your custom CSS, it&#8217;s good to have a solid understanding of the code&#8217;s syntax. The structural elements of CSS are: Selectors, which are responsible for determining which elements the CSS rules will apply to, Properties, which are the characteristic features of the selected elements, and Values, which specify the characteristics of the properties applied to the elements. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Write_your_custom_CSS\"><\/span> Step 3: Write your custom CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>After understanding the syntax, the next step is to write your custom CSS codes. You can add a few tweaks to your website, such as changing font styles and sizes, background colors, adding borders, changing elements&#8217; position, and adding animations. <\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_Change_font_styles_and_sizes\"><\/span>1. Change font styles and sizes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To change the size and styles of your website fonts, you can use the following syntax:<\/p>\n<p><code>selector {<br \/>\n  font-size: value;<br \/>\n  font-style: value;<br \/>\n  font-weight: value;<br \/>\n  font-family: value;<br \/>\n}<\/code><\/p>\n<p>You can change the values of each property and specify the appropriate element you want to change.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_Change_background_colors\"><\/span>2. Change background colors<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To change the background color of an element, you can use the following code:<\/p>\n<p><code>selector {<br \/>\n  background-color: value;<br \/>\n}<\/code><\/p>\n<h4><span class=\"ez-toc-section\" id=\"3_Add_borders\"><\/span>3. Add borders<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You can also add borders to your website elements with the following code:<\/p>\n<p><code>selector {<br \/>\n  border: value;<br \/>\n}<\/code><\/p>\n<h4><span class=\"ez-toc-section\" id=\"4_Change_the_position_of_elements\"><\/span>4. Change the position of elements<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Change the position of website elements such as images, headings, or paragraphs using this code:<\/p>\n<p><code>selector {<br \/>\n  position: value;<br \/>\n  top: value;<br \/>\n  left: value;<br \/>\n  right: value;<br \/>\n  bottom: value;<br \/>\n}<\/code><\/p>\n<h4><span class=\"ez-toc-section\" id=\"5_Add_animations\"><\/span>5. Add animations<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You can make your website come alive by adding animations to your elements using this syntax:<\/p>\n<p><code>selector {<br \/>\n  animation-name: value;<br \/>\n  animation-duration: value;<br \/>\n  animation-timing-function: value;<br \/>\n  animation-delay: value;<br \/>\n  animation-iteration-count: value;<br \/>\n  animation-direction: value;<br \/>\n  animation-fill-mode: value;<br \/>\n  animation-play-state: value;<br \/>\n}<\/code><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Save_your_changes\"><\/span> Step 4: Save your changes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>After writing your custom CSS, save your changes. The Additional CSS page in WordPress saves the code you input automatically. All changes made through Additional CSS will be applied on your website immediately so that you can preview your tweaks.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With WordPress&#8217;s additional CSS feature, you can customize the appearance of your website elements, change fonts, sizes, and colors, add borders, and even add animations. You can now tweak your website&#8217;s design and give it the extra polishing it needs to stand out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Perplexing and Bursting Guide to Additional CSS in WordPress WordPress is now one of the most widely used content management system (CMS) platforms globally. With&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3287],"tags":[],"jetpack_featured_media_url":"https:\/\/mauricemuteti.info\/wp-content\/uploads\/2023\/03\/WORDPRESS-ULTIMATE-GUIDE-How-To-step-by-step-Tutorial.png","_links":{"self":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/9722"}],"collection":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/comments?post=9722"}],"version-history":[{"count":0,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/9722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media\/7209"}],"wp:attachment":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media?parent=9722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/categories?post=9722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/tags?post=9722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}