{"id":14844,"date":"2014-07-28T15:16:18","date_gmt":"2014-07-28T13:16:18","guid":{"rendered":"https:\/\/marabelia.com\/?p=14844"},"modified":"2025-06-23T09:20:07","modified_gmt":"2025-06-23T07:20:07","slug":"css-for-dummies-changing-fonts-and-titles-in-wordpress","status":"publish","type":"post","link":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/","title":{"rendered":"CSS for Dummies: Changing Fonts and Titles in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column][vc_column_text]\n<h1 style=\"text-align: justify;\"><span style=\"color: #333333;\">Basic CSS Mini-Course for WordPress<\/span><\/h1>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">If you&#8217;ve made it this far, it&#8217;s probably because you&#8217;re starting to build websites with WordPress and don&#8217;t know how to change some parts of the default styling for fonts, headings, or links in your theme.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">Don&#8217;t worry\u2014it&#8217;s actually quite simple, but first we need to understand what CSS is and where and how to modify it.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #333333;\"><strong>What is CSS?<\/strong><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">CSS is the code that defines the entire style of a website: fonts, colors, sizes, spacing, etc.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #333333;\"><strong>Where is the CSS located?<\/strong><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">CSS is usually predefined in a file called <span style=\"text-decoration: underline;\">style.css<\/span><\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #333333;\"><strong>How do we change the CSS in WordPress?<\/strong><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">We can modify CSS in four different ways:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">Define the CSS in the <strong>style.css<\/strong> of our WordPress theme via <strong>Appearance\/Editor\/style.css<\/strong><\/span><\/li>\n<li><span style=\"color: #333333;\">Define the CSS in the <strong>child.css<\/strong> of our WordPress theme<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>Define the CSS in our theme&#8217;s custom CSS panel, usually found in the WordPress dashboard under a path like <span style=\"text-decoration: underline;\">Appearance\/Theme Options\/Customize CSS<\/span>.<\/strong><\/span><\/li>\n<li><span style=\"color: #333333;\">Define the CSS using the <strong><a href=\"http:\/\/jetpack.me\/\"><span style=\"color: #333333;\">Jetpack<\/span><\/a><\/strong> plugin (or the free <a href=\"https:\/\/wordpress.org\/plugins\/slimjetpack\/\"><span style=\"color: #333333;\">Slim JetPack<\/span><\/a>) and <strong>activate the custom CSS module<\/strong>.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Any of these options will work equally well (they will affect the theme&#8217;s style), but if you go with the first one <strong>(editing the main stylesheet: style.css) <span style=\"text-decoration: underline;\">you won\u2019t be able to update your theme<\/span> or you\u2019ll lose all the changes you&#8217;ve made.<\/strong><\/span><\/p>\n<p><span style=\"color: #333333;\">Since most modern WordPress templates come with a <strong>built-in CSS customizer<\/strong>, <strong>the most recommended and convenient method is to make changes from there,<\/strong> because you can update the theme later without losing your CSS modifications and still retain the original theme CSS (so you can experiment without fear!).<\/span><\/p>\n<p><span style=\"color: #333333;\">That said, let\u2019s get started!<\/span><\/p>\n<h3><span style=\"color: #282828;\">Before starting: Organize your workspace<\/span><\/h3>\n<p><span style=\"color: #000000;\">When making changes or adding new CSS styles, <strong>I recommend keeping three browser windows open<\/strong>:<\/span><\/p>\n<ol>\n<li><span style=\"text-decoration: underline;\"><strong><span style=\"color: #333333; text-decoration: underline;\">The Appearance\/Editor\/style.css window.<\/span><\/strong><\/span><\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\"><span style=\"color: #333333;\">This is where the original theme style resides. We won\u2019t modify this file, but it will serve as a guide and we\u2019ll copy styles from here to edit.<\/span><\/p>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\"><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1876 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\" alt=\"Screenshot 2014-07-26 at 16.21.43\" width=\"641\" height=\"302\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png 1546w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43-800x377.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43-300x141.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43-1024x483.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43-768x362.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43-1536x724.png 1536w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/span><\/a><\/span><\/p>\n<p style=\"padding-left: 30px;\"><strong><span style=\"color: #333333;\">2. The <span style=\"text-decoration: underline;\">Appearance\/Theme Options\/Customize CSS<\/span> window<\/span><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"color: #333333;\">This is where we\u2019ll make the changes, <em>without fear<\/em>: you can always delete them and the theme will revert to its original style.<\/span><\/p>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03.png\"><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1877 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03.png\" alt=\"Screenshot 2014-07-26 at 16.27.03\" width=\"640\" height=\"288\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03.png 1523w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03-800x360.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03-300x135.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03-1024x461.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.27.03-768x345.png 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/span><\/a><\/span><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"background-color: #ffffff; color: #000000;\"><strong>3. Your website window<\/strong><\/span><\/p>\n<p style=\"padding-left: 30px;\">This way, we can see the changes as we make them&#8230;<\/p>\n<p><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1891 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49.png\" alt=\"Screenshot 2014-07-26 at 17.22.49\" width=\"583\" height=\"345\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49.png 1508w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49-800x473.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49-300x177.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49-1024x606.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-17.22.49-768x454.png 768w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/p>\n<h2 style=\"text-align: left;\"><strong>Next step: Developer plugin for your browser<\/strong><\/h2>\n<p style=\"text-align: justify;\"><span style=\"color: #333333; background-color: #ffffff;\"><strong>It&#8217;s <span style=\"text-decoration: underline;\">essential<\/span> to have the <span style=\"text-decoration: underline;\">Web Developer plugin installed in your browser.<\/span> <\/strong><\/span><span style=\"color: #333333; background-color: #ffffff;\"><strong>If you don\u2019t have it yet, what are you waiting for?<\/strong><\/span><\/p>\n<ul>\n<li style=\"text-align: justify;\"><span style=\"color: #333333; background-color: #ffffff;\"><strong>Firefox: <a style=\"background-color: #ffffff;\" href=\"https:\/\/addons.mozilla.org\/es\/firefox\/extensions\/web-development\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #333333;\">https:\/\/addons.mozilla.org\/es\/firefox\/extensions\/web-development\/<\/span><\/a><\/strong><\/span><\/li>\n<li style=\"text-align: justify;\"><span style=\"color: #333333; background-color: #ffffff;\"><strong>Chrome: It comes preinstalled in the latest versions. If you don\u2019t have it: update Chrome!<\/strong><\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><span style=\"background-color: #ffffff;\"><strong><span style=\"color: #333333;\">This will help us locate elements (to know what they\u2019re called) and test how the CSS changes will look before applying them.<\/span><\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">To inspect an element, once the plugin is installed, hover over any item on a webpage and right-click, selecting the &#8220;<strong>Inspect element<\/strong>&#8221; option:<\/span><\/p>\n<p><span style=\"color: #333333;\">Something like this will appear at the bottom of the page:<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48.png\"><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1880\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48.png\" alt=\"Screenshot 2014-07-26 at 16.44.48\" width=\"677\" height=\"397\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48.png 1421w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48-800x470.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48-300x176.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48-1024x601.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.44.48-768x451.png 768w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/span><\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>Select &#8220;Rules&#8221; on the right:<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56.png\"><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1881\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56.png\" alt=\"Screenshot 2014-07-26 at 13.08.56\" width=\"716\" height=\"250\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56.png 1552w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56-800x279.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56-300x105.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56-1024x358.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56-768x268.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-13.08.56-1536x536.png 1536w\" sizes=\"auto, (max-width: 716px) 100vw, 716px\" \/><\/span><\/a><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">We can see the element names and where they\u2019re located, but we can also modify the CSS parameters to preview how the changes will look once applied.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\"><strong>Don\u2019t worry\u2014changes made here will never be saved in the theme.<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #333333;\">For example, try changing the color of an element. Just hover over the (#number) and give it a <span style=\"color: #ff0000;\"><a href=\"http:\/\/www.colorpicker.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #ff0000;\">different color code.<\/span><\/a><\/span><\/span><\/p>\n<h2 style=\"text-align: left;\"><strong>Writing your first lines of CSS:<\/strong><\/h2>\n<h3 style=\"text-align: left;\"><span style=\"color: #282828;\">How to change the default font style of your entire website (&#8220;body&#8221;)<\/span><\/h3>\n<p>Let\u2019s say your website has a predefined font or page titles (headings) with a font family, color, or size that you don\u2019t like.<\/p>\n<p><span style=\"color: #000000;\">The general typography of your website is defined as <strong>&#8220;body&#8221;<\/strong>, so we\u2019ll go to the <strong>style.css<\/strong> file and locate the paragraph that defines its properties.<\/span><\/p>\n<ul>\n<li>In your WordPress dashboard: <span style=\"color: #000000;\"> <em><strong>Appearance \/ Editor \/ Style.css<\/strong><\/em> <\/span>type <span style=\"color: #000000;\"><em><strong>command+f<\/strong><\/em><\/span> or from the browser (Firefox, Chrome&#8230;) go to <em>Edit \/ Find<\/em><\/li>\n<li>Search for the word <em><strong>&#8220;<span style=\"color: #000000;\">body<\/span>&#8220;<\/strong><\/em> and you\u2019ll find a paragraph similar to this one:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.20.26.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1958 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.20.26.png\" alt=\"Screenshot\" width=\"524\" height=\"196\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.20.26.png 524w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.20.26-300x112.png 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><br \/>\n<\/a><\/p>\n<ul>\n<li>Select the whole paragraph and copy it into <span style=\"color: #000000;\"><em><strong>Appearance \/ Theme Options \/ Custom CSS<\/strong><\/em><\/span><\/li>\n<li>As explained before, the advantage of modifying from <span style=\"color: #000000;\"><em><strong>custom CSS<\/strong><\/em><\/span> (or from child.css) is that this style takes precedence over the main style (style.css), but the main style is still preserved. So if something doesn\u2019t look right, you can delete the generated paragraph in <span style=\"color: #000000;\"><em><strong>custom CSS<\/strong><\/em><\/span> and revert to the original style.<\/li>\n<li>The basic parameters are easy to identify, but here\u2019s <a href=\"http:\/\/www.mclibre.org\/consultar\/amaya\/css\/css_propiedades.html\" target=\"_blank\" rel=\"noopener\">a link<\/a> where you\u2019ll find all the basic CSS properties explained.\n<ul>\n<li><em><span style=\"color: #000000;\">For example, if you want all your website&#8217;s text to be thinner, you should modify the line:<\/span><\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 120px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1960\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.39.26.png\" alt=\"Screenshot\" width=\"144\" height=\"21\" \/><\/p>\n<p style=\"padding-left: 120px;\">And replace it with:<\/p>\n<p style=\"padding-left: 120px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1959\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.39.34.png\" alt=\"Screenshot\" width=\"149\" height=\"21\" \/><\/p>\n<ul>\n<li><em><span style=\"color: #000000;\">If you want to change your font color, you can choose a new color<\/span> <a href=\"http:\/\/www.colorpicker.com\/\" target=\"_blank\" rel=\"noopener\">here.<\/a> <\/em><span style=\"color: #000000;\">Then simply update it:<\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.51.06.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1962\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.51.06.png\" alt=\"Screenshot\" width=\"117\" height=\"17\" \/><br \/>\n<\/a><\/p>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.51.52.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1961\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-21.51.52.png\" alt=\"Screenshot\" width=\"130\" height=\"18\" \/><br \/>\n<\/a><\/p>\n<ul>\n<li>You can save changes in <span style=\"color: #000000;\"><em><strong>custom CSS<\/strong><\/em><\/span> and refresh your site to see the updates.<\/li>\n<\/ul>\n<h3><span style=\"color: #000000;\">How to change the default style of headings (H1, H2, H3)<\/span><\/h3>\n<p><span style=\"color: #000000;\">The generic headings of your site are defined as <strong>&#8220;H1&#8221;, &#8220;H2&#8221;, &#8220;H3&#8221;<\/strong>, and so on&#8230;<\/span><\/p>\n<p>If you want to locate a specific heading and don\u2019t know what class it belongs to, go to your website, <em><strong>hover over the element, right-click and choose &#8220;Inspect&#8221;.<\/strong><\/em><\/p>\n<p>At the bottom, in the &#8220;<em><strong>rules<\/strong><\/em>&#8221; section, it will show you which class it belongs to:<\/p>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1964 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51.png\" alt=\"Screenshot\" width=\"770\" height=\"375\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51.png 1444w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51-800x389.png 800w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51-300x146.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51-1024x499.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.06.51-768x374.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><br \/>\n<\/a><\/p>\n<p style=\"text-align: left;\"><span style=\"color: #000000;\">Here we see that our title &#8220;\u00daltimos trabajos&#8221; (Latest Work) is inherited from the H6 element, so if we want to change this title:<\/span><\/p>\n<ul>\n<li>In <span style=\"color: #000000;\"><em><strong>Appearance \/ Editor \/ Style.css<\/strong><\/em><\/span> type <em><strong>command+f<\/strong><\/em> or from the browser (Firefox, Chrome&#8230;) go to <span style=\"color: #000000;\"><em><strong>Edit \/ Find<\/strong><\/em><\/span><\/li>\n<li>Search for the word <span style=\"color: #000000;\"><em><strong>&#8220;H6&#8221;<\/strong><\/em><\/span> and you\u2019ll find a paragraph similar to this one:<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.10.10.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1965 aligncenter\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.10.10.png\" alt=\"Screenshot\" width=\"564\" height=\"359\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.10.10.png 564w, https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-28-a-las-22.10.10-300x191.png 300w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><br \/>\n<\/a><\/p>\n<ul>\n<li>Select the entire paragraph and copy it into <span style=\"color: #000000;\"><em><strong>Appearance \/ Theme Options \/ Custom CSS<\/strong><\/em><\/span><\/li>\n<li>Edit the general heading styles <em><span style=\"color: #000000;\">\/* Heading styling *\/<\/span><\/em> or for a specific heading like h1, h2, h3, or in this case, h6.<\/li>\n<li>Save the changes and voil\u00e0! Refresh your website to see the result!<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"[vc_row][vc_column][vc_column_text] Basic CSS Mini-Course for WordPress If you&#8217;ve made it this far, it&#8217;s probably because you&#8217;re starting to build websites with WordPress and don&#8217;t know how to change some parts of the default styling for fonts, headings, or links in your theme. Don&#8217;t worry\u2014it&#8217;s actually quite simple, but first we need to understand what CSS [&#8230;]\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77,98],"tags":[],"class_list":["post-14844","post","type-post","status-publish","format-standard","hentry","category-creativity-and-design","category-wordpress-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"[vc_row][vc_column][vc_column_text] Basic CSS Mini-Course for WordPress If you&#8217;ve made it this far, it&#8217;s probably because you&#8217;re starting to build websites with WordPress and don&#8217;t know how to change some parts of the default styling for fonts, headings, or links in your theme. Don&#8217;t worry\u2014it&#8217;s actually quite simple, but first we need to understand what CSS [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-28T13:16:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-23T07:20:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\" \/>\n<meta name=\"author\" content=\"admin-mbl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-mbl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/\"},\"author\":{\"name\":\"admin-mbl\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\"},\"headline\":\"CSS for Dummies: Changing Fonts and Titles in WordPress\",\"datePublished\":\"2014-07-28T13:16:18+00:00\",\"dateModified\":\"2025-06-23T07:20:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/\"},\"wordCount\":1023,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2014\\\/07\\\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\",\"articleSection\":[\"Creativity and design\",\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/\",\"name\":\"CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2014\\\/07\\\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\",\"datePublished\":\"2014-07-28T13:16:18+00:00\",\"dateModified\":\"2025-06-23T07:20:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2014\\\/07\\\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2014\\\/07\\\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-for-dummies-changing-fonts-and-titles-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/marabelia.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS for Dummies: Changing Fonts and Titles in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"name\":\"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.\",\"description\":\"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.\",\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"alternateName\":\"MARABELIA. Dise\u00f1o Web Valencia.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/marabelia.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\",\"name\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"width\":1080,\"height\":1080,\"caption\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\",\"name\":\"admin-mbl\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"caption\":\"admin-mbl\"},\"sameAs\":[\"https:\\\/\\\/marabelia.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia","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:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia","og_description":"[vc_row][vc_column][vc_column_text] Basic CSS Mini-Course for WordPress If you&#8217;ve made it this far, it&#8217;s probably because you&#8217;re starting to build websites with WordPress and don&#8217;t know how to change some parts of the default styling for fonts, headings, or links in your theme. Don&#8217;t worry\u2014it&#8217;s actually quite simple, but first we need to understand what CSS [...]","og_url":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_published_time":"2014-07-28T13:16:18+00:00","article_modified_time":"2025-06-23T07:20:07+00:00","og_image":[{"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png","type":"","width":"","height":""}],"author":"admin-mbl","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin-mbl","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/"},"author":{"name":"admin-mbl","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c"},"headline":"CSS for Dummies: Changing Fonts and Titles in WordPress","datePublished":"2014-07-28T13:16:18+00:00","dateModified":"2025-06-23T07:20:07+00:00","mainEntityOfPage":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/"},"wordCount":1023,"commentCount":0,"publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"image":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png","articleSection":["Creativity and design","Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/","url":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/","name":"CSS for Dummies: Changing Fonts and Titles in WordPress &#8226; Marabelia | Agencia Digital en Valencia","isPartOf":{"@id":"https:\/\/marabelia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png","datePublished":"2014-07-28T13:16:18+00:00","dateModified":"2025-06-23T07:20:07+00:00","breadcrumb":{"@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#primaryimage","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2014\/07\/Captura-de-pantalla-2014-07-26-a-las-16.21.43.png"},{"@type":"BreadcrumbList","@id":"https:\/\/marabelia.com\/en\/css-for-dummies-changing-fonts-and-titles-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/marabelia.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS for Dummies: Changing Fonts and Titles in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/marabelia.com\/#website","url":"https:\/\/marabelia.com\/","name":"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.","description":"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.","publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"alternateName":"MARABELIA. Dise\u00f1o Web Valencia.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marabelia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/marabelia.com\/#organization","name":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.","url":"https:\/\/marabelia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","width":1080,"height":1080,"caption":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital."},"image":{"@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c","name":"admin-mbl","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","caption":"admin-mbl"},"sameAs":["https:\/\/marabelia.com"]}]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/comments?post=14844"}],"version-history":[{"count":1,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14844\/revisions"}],"predecessor-version":[{"id":14847,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14844\/revisions\/14847"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=14844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/categories?post=14844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/tags?post=14844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}