Readers: 94 | Updated: 06-10

How Does CSS and HTML Work In WordPress

Translate Into:

If you wondered, I create my own WordPress themes. While it hasn’t always been this way, back when I first started blogging and using self-hosted WordPress, I was at the mercy of using free WordPress themes. While this is a great option to have, I was still personally frustrated because I would have difficultly finding a theme that I liked. In some cases, I would find a theme that I enjoyed but there’d always be something minor that I didn’t like about it, such as having a tons of sponsored links at the bottom.

Over the course of time, I took it upon myself to learn more and more about WordPress themes and how they are built. Amazingly, the shell of a WordPress theme is actually quite simple. I know that you don’t believe me at this point in time, but in due time, you’ll agree with me. In this article I want to talk to you about CSS and how it plays a heavy roll in WordPress themes.

What Is CSS?

CSS stands for Cascading Style Sheets. It has been around since the early days of HTML. To keep a long story short, CSS is a stylesheet language that allows for people to make HTML look pretty. CSS allows you to add colors, sizes and styles to your fonts. Additionally, CSS allows you to position text a certain way on a web page. Back in the early days of HTML many people would use tables to make text appear on a web page in columns.

Today this is done using CSS. This type of HTML styling allows for your content on the source file to be more search engine friendly. That is part of the reason why blogs out of the box are natural search engine magnets. While the content appears to readers one way, the source file of the text is presented to search engines a different way. In many cases if you have written very good CSS you can really control the flow of your content and how you present the information to search engines.

How Does CSS Work With WordPress?

CSS plays a huge roll in WordPress because the program allows for the creation and use of custom WordPress themes. WordPress themes are really nothing more than a handful of standardized files that controls the key elements and codes of the WordPress program and one file that controls the styling. Really, if you look at it in forms of complexity, creating or modifying WordPress themes are really one of the simplest forms of CSS stying. Reason being is for the standards in WordPress.

I totally intend on showing you how to create your own WordPress themes. However, I would strongly recommend that you follow my lead here and invest time into learning CSS itself and how it can be used to style basic HTML pages. WordPress, even though it’s written in PHP, many of the files use standard HTML code. This standard HTML code has been styled using CSS for almost ten years. In other words, not much has changed. It will greatly benefit you to get the term WordPress out of your mind and get more in the mindset of learning CSS.

How Do I Learn CSS?

CSS is very simple to learn compared to other programming languages. Once your learn CSS it’s really no different than learning how to play the guitar. Once you have successfully grasped the concept of CSS, the only limitation of using CSS is in your imagination. The same goes hand in hand after learning how to play guitar and writing music. Your only limitation in playing the guitar and writing music is in your level of creativity.

There are many sources on the Internet that give you CSS tutorials and guides to learning. Simply use Google and search for things like CSS Tutorials, or CSS Guides, or How To Learn CSS. However, I didn’t go that route. I decided on purchasing a book. For me, I learn and attain information much better when it is in the form of a book rather than information found on a web page. Usually if I find information on a web page that I want to learn, I’ll even go so far as to print it so that I have have the information in hand.

What CSS Books Do You Recommend?

I can only recommend the books that I have purchased myself. I purchased these books at my local bookstore; however, you can use the Internet to try to search for the best deals. One thing to consider with my book recommendations is the time you are reading this article. As of June 7th, 2008 these following books will be great. Keep in mind that the older this article ages, you might want to consider making your own choices. It is very important to purchase FRESH books related to web design as the technology chances so rapidly. With that being said, here are two books that I recommend purchasing.

The last book is a great choice too because it includes both CSS as well as HTML study. However, overall I would strongly recommend that you if need help learning HTML, I would purchase a book specifically for HTML. If you don’t know HTML here are a few books that I own and recommend that you purchase.

What HTML Books Do You Recommend?

Here is are three HTML books that I would recommend purchasing. Learning HTML has to come FIRST before you attempt to learn CSS. As you now know, CSS is a styling language that helps make HTML look pretty. If you don’t know how to program in HTML, then CSS will be useless to you. Not to worry though, HTML is a very simple programming language to learn. Honestly… it’s easy and can literally take you a good hard worked weekend to learn. Here are three books that I enjoyed reading.

The first book is awesome. The second book is too, but keep in mind it is getting a little older. However, at this time everything is still very current and very helpful. The third book I actually do not own but have had in my hands many many times at the bookstore and will be purchasing it soon. This book does a great job at combining both CSS and HTML, while again I prefer to have a book dedicated to one subject, this one does a great job with covering both languages. HTML and CSS really go hand in hand and this last book does a great job at presenting both.

Questions and Comments?

If you should have any questions or comments or want me to give you an opinion on a book that you are considering purchasing, drop me a comment using the comment form below. I will be happy to help answer your comments as best as I can. Also feel free to share your experience. If you have books that you feel would be helpful for others, feel free to use the comment form to share what you know.



From The Blogs

Internet Observation

2007
CSS按钮的图片替换
根据Mike Rundle 与Seamus P. H. Leahy的css图片替换的扩展技术和WebDesign-L mailing list中发布的一个帖子,我发掘了一个提交按钮和按钮标签的图片替换... 查看全文

Internet Observation

2007
CSS缩放
预览: http://www.deltatangobravo.com/images/zoom/代码:text-small.cssbody, div { font-size:    x-small; v... 查看全文

Internet Observation

2007
CSS制表符
代码:    body { margin:0; padding:0; font: bold 11px/1.5em Verdana;}h2 { font: bold 14px Verdana, Aria... 查看全文

Internet Observation

2007
用CSS显示百分比
在Amigo,我们看到了百分比条(percentage bar)!该图片就是Jason创作的: 为了将这部分的设计变得更灵动一点,我发现了两个选项; “聪明的”CSS或是“多图像”(Lots of I... 查看全文

Internet Observation

2007
是否在新窗口中打开链接由用户决定
很多网虫都期望off-site链接(链接到其他站点)可以在一个新的窗口中打开。很多时候,桌面上会开着很多窗口,所以网虫开始使用更棒的浏览器。这些浏览器会有更多的选项,让用户掌握主控权。与此同时,W3C... 查看全文

Internet Observation

2007
CSS图像弹出
我在www.stunicholls.myby.co.uk站点上发现了这个效果,我在我的一个房地产网站上也使用过这样的功能。该功能即为弹出图像,和你曾经看到过的使用JavaScript制作出的mouse... 查看全文

Internet Observation

2007
CSS的水平与垂直中心
预览:http://www.456bereastreet.com/lab/centered/both/代码:  html, body {  margin:0;  padding:0;  font-fa... 查看全文

Internet Observation

2007
用CSS实现动态拼图
预览:http://petewilliamsagency.com/css/examples/pie/代码: