
Keep in mind that if you have embedded ads in your website, those spaces may simply appear as blank white spaces to people using adblockers. Ads & Ad BlockersĪds are one way that bloggers can earn additional income, but seedy ad networks have ruined the public's trust with tracking, and obtrusive popups and autoplaying videos have ruined so many peoples experience that ad blockers are ubiquitous. FirebugĪ browser plugin called "Firebug" used to fill the role of being able to inspect an element years ago, but modern browsers (Chrome, Safari and Firefox) have incorporated this functionality right into the browser.

Best of all, there's no chance of messing up your own website, so you can edit to your heart's content. The encouragement you get after completing a task is corny at first, but surprisingly addictive. It gives you short, specific tasks with an interactive editor, that accumulate in skills as you progress.

Learning how it works is like seeing into the Matrix for the first time. Not familiar with CSS? It's fairly basic and can do almost everything you need to from a design perspective. Or any hex color value in place of "red". With this information, if we wanted to change the font color for the h1.entry-title element, we can go into our Admin -> Appearances -> Customize -> Additional CSS page and add our own entry like: Here we see that the h1.entry-title is being given the "color: #323545 " property by (index), which is CSS embedded in this page.

Each of these has a possibility of passing on properties to the inspected element through "inheritance", where properties such as background-color and font-style are passed along to nested elements. At the very bottom you'll see a consecutive list of elements that are "parent" elements going from left to right, of the element you're inspecting.

