Did you know that when you format your text in WordPress you may be adding or changing the CSS in your page? Well I didn’t realize this until I watched the tutorial, Practical CSS for No-Coders, by Jen Kramer. When you switch from visual mode to text mode in WordPress, you can see the underlying CSS which styles the content you post. In this post I’ll walk you through some examples of how WordPress uses CSS in the background to style your website.
Text Alignment
A common formatting feature is aligning your text (left, right, or center), and WordPress makes it easy with a simple button in the text controls. But this action corresponds with CSS tags like, “text-align: center”. Before pressing the button the HTML looks like, <p>This is my example paragraph.</p> and this is what it looks like after you press the ‘align center’ button, <p style=”text-align: center;”> This is my example paragraph.</p>.
Font Color
Another common feature used by web designers on WordPress is changing the color of the font. This is another feature that is controlled by CSS with a tag like “color” applied with the color you waant for the font. Before changing the font color the HTML looks like, <p> Colorful Text </p> and this is what the HTML looks like after you change the color of the font to red, <p style= “color: red;”>Colorful Text</p>.
Background Color
Lastly, a common feature used on WordPress is the ability to change the background color for different sections. This again is another feature that is controlled by CSS with a tag like “background color”. Before pressing the button the HTML looks like, <div> This is a section</div>, and after changing the background color to a reddish-brown this is what the HTML looks like, <div style=”background-color=#A9582B;”> This is a section</div>.
Conclusion
Switching from visual to text mode in the WordPress text box the CSS working behind the scenes is revealed which is controlling the appearance of your text and page elements. Whether it’s text alignment, font color, or background color, WordPress automatically adds the necessary CSS tags to match your styling choices. However, just like understanding the HTML coding by understanding the CSS codes you can have more control over the design of your website, allowing for more customization.