Helpful HTML and CSS For WordPress

HTML and CSS are the two languages you’ll have to become somewhat familiar with if you’re going to be running your own WordPress blog.

By no means do you need to become a skilled coder, but you should have some basic knowledge of these very common and popular languages in addition to some basic DIY WordPress design. Think of like knowing and understanding how to change the oil in a car.

CSS stands for Cascading Style Sheets.

It’s a programming language that affects the presentation of your website. If you want to change the color, positioning, or size of something on your website – you want to edit the CSS file. If you want to change the way something works or functions, that’s HTML.

In WordPress, most themes have a custom.css file or style.css. This is the file you want to edit when needing to make visual changes. If you want to narrow the width of text on a page or you want to change the font size of sentence or the color of something, all of that is done with CSS

HTML stands for Hyper Text Markup Language

HTML directly effects the way elements of a web page work and function. It’s the language specifically designed to help a web browser construct images, videos text and animations on a web page. HTML can also be assisted by the CSS file as well a JAVA script.

HTML quite easy to learn but it does take some practice get comfortable designing and editing with both CSS and HTML as both these languages work closely together to develop web pages.

HTML & CSS Designs: The best book on learning CSS

If you do want to develop a deep and competent understanding of both HTML and CSS then we suggest getting HTML and CSS designs by Jon Duckett.

This is a beautifully illustrated book that you can get for Kindle or as a physical book. It will become you’re go to reference when developing with WordPress or any website builder. With vibrant images and real life examples, you’ll become quite efficient with HTML and CSS through trial and error and using this book as your study guide.

Pros:

Practical, real world applications.
Well organized and easy to use.

Cons:

The SEO advice is dated for current search engine algorithms.

HTML and CSS Basics

This beginners guide is aimed at bloggers using a self hosted installation of WordPress on their own shared hosting account. The goal of this guide is to explain the most essential basics every blogging beginner needs to know.

Text and font tags
HTML Vocabulary
Hyperlinks
Special Characters
HTML for Images
On Page Drop Down Menu

Text and Font Tags

A tag is simple an indication to a web browser on how to display a piece of text. The most common tag you use all the time are to bold or italicized words. But within WordPress, there are quite a few helpful tags you can use that you may not be aware of.

Left aligning text: <p align=”left”> text goes here </p> for the closing tag.

Right aligning text: <p align=”right”> text goes here </p> for the closing tag.

Bold: <b> text </b>

Underline: <u> text </u>

Italics: <i> text </i>

Centering text: <center> text </center>

New Paragraph: <p> text </p> | “<p>” Starts a new paragraph by creating a blank line between your new paragraph and the one previous. The closing tag is </p>, but is not required.

Text color: <font color=”000000″> text </font>

Line Break: <br> text </b> Breaks your text into two lines. To create a blank space between two lines use two break tags like: </br></br>

Font face: <font face=”Times New Roman”>

Font size: <font size=”3″>

Make text small: <small> text </small>

Make text big: <big>text</big>

High light text: <mark>text</mark>

HTML Vocabulary

<html> This tells web browsers where the HTML starts.

<head> This is the header element tag. It’s for information like the title of the web page, and can include scripts and meta descriptions as follows.

<title></title> Used for the title of a web page.

<h2></h2> This is a header tag. H1 is for the page title. H2 is used as a sub heading. H3 is a sub heading of an H2 section and so forth.

<strong></strong> This bolds text elements.

<em></em> This italicizes text elements.

Hyperlinks

A hyperlink has a few elements. First is the tag that references where the link is pointing to, next is the target of the URL which tells a web browser to open the link in a new tab or on the same page. Last is the anchor text to go with the hyperlink. An example:

<a href=”http://www.website.com”>Anchor Text</a>

target=”_blank” opens a the link when clicked on to a new tab in your browser window.

To edit via HTML the color of a hyperlink:

<body link=”blue”>
<vlink=”purple”>
<alink=”grey”>

“Body link” makes all your links blue, “vlink” makes already visited links purple and “alink” makes active links grey. Remember you can use HTML color codes too.

Anchor Links

Anchor links are where you can link to different sections of a web page. This is particularly helpful with long web pages that have a lot of content. Though with WordPress you’ll need to edit the HTML of your blog post. Making the creation of anchor links complicated and slow. Here is how you create anchor links:

Step 1: Setup the code.

You first need to setup up the anchor on the web page that people can click on. The first step is to create the code and the link

<a href=”#link”>Word that will be used to click on</a>

The #link is associates a section of your web page with the link. So when people click on this anchor link, they will go to where you have #link (can be any word).

Step 2: Now you need to add the anchor somewhere.

The code looks like this:

Just add this line to wherever on the web page you want to bring the visitor. The word you use must be the same. In this example “link” is the word used to anchor a hyperlink to a specific section on the web page.

Email Links

Want to create a link where someone clicks it and it automatically opens up their mail client? To do so all you need to do is create a hyperlink to your specific email. In most text editors you can do this without needing to edit the HTML. But the specific HTML looks like this:

<a href=”mailto:youraddress@email.com”>Email Me</a>

Special Characters

Before the rise of emojis, many websites opted to use special characters. Today they are less popular, but still provide helpful solutions when looking to write out fractions or degrees.

Here’s how:

¼ ¼
½ ½
¾ ¾
· ·
¡ ¡
» »
« «
° 30°
® ® (Registered trademark)
© © (Copyright)
™ ™ (Trademark)
& & (Ampersand)

HTML for Images

There’s quite a few things you can do with HTML for images. WordPress streamlines the process of uploading images by making it as simple as drag and drop. Let’s get into some details so you understand what exactly is going on behind the scenes.

When you upload an image with WordPress, what you’re really doing if uploading an image to a storage folder in WordPress. This folder, along with WordPress and your theme are stored on your server (from your web host).

WordPress comes with a one click button for media such as video and images. It give a tremendous amount of functionality. From the media function in WordPress here you can upload an image, adjust it to the left, right, or center it. You can add a boarder. Make the text wrap around the image, re-size it, or make it “clickable” so when users click on an image they are sent to another web page all with the ease of clicking a button. All with the simple click of a button.

Use clickable images sparingly. Never use them for your navigation, and don’t make an image send a user to an unrelated site. Unless it’s an ad for a product or service, keep any clickable custom images to a URL found on your website. Also images slow down your website’s load time so use as few images as you can.

To insert an image:

To insert images using HTML, you muse already have the image uploaded and located in folder. Once that is done simple add:

<img src=” is the HTML telling a browser to load an image. Folder is the name of the folder which you can name whatever you like. Image.jpg is name of the image.

ALT Tag:

The alt tag tells search engines what the picture is. A search engine uses the alt tag as well as the text around the image to determine what the image is.

Adding a boarder

You can add a visible board to any image with HTML. Let’s take a look at an example:

The number 3 represents the weight, or thickness of the boarder. There is no limit to the size of the boarder you can add. There’s also no equivalent for 0. If you don’t want a boarder just delete the appropriate HTML.

Height and Width

This tells a web browser the size of your picture. It should match the actually size of your picture, but you can make it whatever size you want. For example if your image is 50×50, to have it display correctly it should be 50×50. 60×90 would distort the image.

Clickable Image

With WordPress it’s easy to use the content management system to upload and edit images. You can easily create clickable images with WordPress. The HTML however that goes into creating a clickable image looks like this:

This would make an image of an iPhone be clickable and direct people to a specific website.

Background Image

How do you upload a background image? Here’s how it’s done:

The long way – referred to as the “absolute path”:

<body background=”http://www.yourdomain.com/images/wood.png

The short hand code is:

Note: You would put these lines of HTML code into your CSS file as your CSS file controls the visible presentation of your site.

On page drop down menu

Anchor text is very helpful. But, what if you wanted to create a nice and neat drop down menu?

Here’s the HTML – Edit and add to it as needed.

<form name=”Menu1″><select name=”Link” size=”1″> <option selected=”selected” value=”https://websitecreativepro.com”>Select an Option</option><option value=”http://www.facebook.com”>Facebook</option><option value=”http://www.youtube.com”>YouTube</option><option value=”http://www.google.com”>Google</option></select>

</form>

HTML and CSS for Bloggers

That’s it for this quick crash course on HTML and CSS for WordPress bloggers. By now you should have a strong appreciation for how helpful and useful the WordPress CMS is for creating beautiful, SEO ready web pages. Without visual content management system you would not only have to blog, you would also have to know how to markup a web page with the appropriate HTML and CSS.

For additional resources check out:

CSS School: This is a free online resource to teach you how to edit a web page with CSS.

CSS Creator Forum: A community forum to help solve your CSS problems and answer your CSS questions.

CSS Tricks: Another helpful CSS forum.

Webmaster World: A great forum for all website related questions including CSS.

David Utke

David Utke is a professional blogger, YouTuber and a highly rated user experience consultant. He and his team create helpful tutorials, software reviews, videos and more based on real-world experience. Join over 30,000 monthly readers and 27k+ YouTube subscribers!

Keep Reading

Explore more →