Image default
WordPress Tutorials

Customize WordPress site with HTML and CSS

This article is a brief introduction to the various tools and techniques that you can use to customize your WordPress website. And it offers a taste of our WordPress Manual ! There are two ways to edit the blog posts and pages of your WordPress site, namely with the Visual editor and the Text editor. Both editors use the same internet language, namely HTML (Hyper Text Markup Language). They only offer two different ways to write and edit the HTML.

The great thing about WordPress is that you don’t have to learn HTML; the Visual editor writes the HTML for you. But learning a little HTML and CSS can save you a lot of frustration when you have to use the Text Editor to fix something that didn’t go well, or when you want to add some extra styling.

Format text with the WordPress Visual Editor

The Visual editor is a WYSIWYG (What You See Is What You Get) editor with all handy buttons. This makes it very easy, for example, to format bold or italic text, to align text, and to add links and titles. The Visual editor displays the formatted results, not the code.

If you are just starting out with WordPress, it is good to first become familiar with the Visual editor. Then you can start with the WordPress Text editor and some basic HTML.

Format text with the WordPress Text editor

The Visual editor of WordPress is not perfect. Sooner or later almost every WordPress user will have to deal with an unstable layout, which you can fix with a little knowledge of HTML and CSS. And you do that in the WordPress Text editor. Here you can add formatting that is not available in the Visual Editor.

HTML: the basis

HTML (Hyper Text Markup Language) is a markup language. HTML tags indicate how a web browser displays content.

If you select a piece of text in the Visual editor of WordPress and click on the B icon, the editor puts the selected text between bold tags, so that it is shown in bold in the browser. In the Text editor it looks like this:

<strong> This is bold text </strong>

As you can see, the “end tag,” so the tag indicating the end of the bold text, is marked with a “/.” A hyperlink looks like this:

<a href="http://linkadres.com/"> Here you can see the visible clickable text in a link </a>

Paragraph tags such as <p> and </p> are hidden in the Text editor, unless values ​​are added. An example:

<p style = "text-align: center;"> This text is centered. </p>


CSS is the abbreviation for Cascading Style Sheets. With CSS you can indicate how HTML elements are displayed in the browser.

It may happen that a text is styled strangely without your intention. You can then search the Text editor for CSS styles that have been added by the Visual editor, and ‘clean up’ the code by, for example, removing the span tags that surround a piece of text.

<span style = "color: # 333399; font-size: 10px ”> This text has a different color and font format .</span>

Theme Style Sheets

In WordPress, the styling of your texts is determined by the theme that you have chosen. Each WordPress theme has its own CSS style sheet called Style.css. If you modify something in this file, it will be implemented throughout your website.

Related posts

How to Create Your First WordPress Block Gutenberg


5 Best RSS Feed Plugins for WordPress


How to Embed WordPress iFrame With and Without Using Plugin