WordPress Tutorial Series is a series of articles for the new self hosted WordPress users. In this article, we will let you know the basics on HTML and CSS. For the readers who are reading this WordPress Tutorial part for the first time, might be interested to read our previously published article on WordPress Tutorial Series :

What is WordPress and How it Works

Finding a Suitable Web Host or Server

Installing WordPress on your Server

Post Installation Works For WordPress

WordPress Tutorial Series : Must Have WordPress Plugins

WordPress Tutorial Series : Stepping in to First Setup 

Why Basics of HTML and CSS is included in WordPress Tutorial Series

It is not possible for us to go in to details of HTML and CSS in this WordPress Tutorial Series. You can look for some CSS tricks on this website. You will need both CSS and HTML to customize your website a bit, adding the Ad units, some what like housekeeping works.

WordPress Tutorial on basics of CSS and HTML

WordPress generates the xHTML output from PHP. There is differences between xHTML and HTML, but for an average user, honestly there is no need to understand so much academic things.

WordPress Tutorial on CSS

If you hover over the Appearance menu when you are logged in on your WordPress site, you will notice the option Editor, this is the CSS Editor of your current theme. You can also Edit it inside your Theme folder on the server (via FTP/sFTP software) – usually it is in the root of the Theme you are going to Edit, with the name style.css. You will see somethings like these -

body {
background:#D9E0E5 url(images/body.png) center repeat-y;
color:#333;
font-size:13px;
font-family:georgia, times, serif;
line-height:1.6em;
margin:0 auto;
}

Within the second bracket everything is defined for that particular part. For this example, the HTML component named body is controlled how it will look via this CSS code. Now, you can understand, why there are so many codes – each and every component needs to be logically defined via CSS to say the browser what to load (images or colors), how it should look etc.

#D9E0E5  - this is hex value of a color. #000000 is black (shortened to #000) and #ffffff (shortened to #fff) is white. The best CSS, HTML, PHP (and more) Editor for Windows is gedit. You can look at our article on gedit to see screenshot of gedit.

WordPress Tutorial on HTML

WordPress by default has a HTML editor for the posts and pages. You can easily switch between the visual and HTML mode :

This is a great way for the beginners to understand HTML.  The highlighted HTML code is actually a ‘simple’ link.  With HTML and CSS, you can do whatever you want with your website – this is the basics of a web page. This is an example :

Yes, you can do it too. Here is the code :

<div style=”width: 100%;”>
<div id=”left” style=”float: left; width: 200px; background-color: #d9dde9; border: #ECEEF4 5px solid; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;”>WordPress Tutorial Series is a series of articles for the new self hosted WordPress users. In this article, we will let you know the basics on HTML and CSS.</div>
<div id=”rightColumn” style=”float: right; width: 200px;text-shadow: 1px 2px 3px #000;”>WordPress Tutorial Series is a series of articles for the new self hosted WordPress users. In this article, we will let you know the basics on HTML and CSS.</div>
<div style=”clear: both;”>
</div>
</div>

So, the essence of this WordPress Tutorial is to show, with the power of CSS and HTML, you can make your website looking completely different.