WordPress Tutorial Series : Basics about HTML and CSS

Download PDF

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 :
WordPress Tutorial Series - Basics about HTML and CSS
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 :

 

 

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.
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.

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.

Signature

0saves

Here’s what we’ve got for you which might like :

Also, we have YouTube Videos and Apple iTunes Podcast Channel (the link will open iTunes App on Mac).

Additionally, performing a search on this website can help you.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!

If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.

Contact Us