What’s The Difference Between CSS, HTML and PHP?
Maybe you’re beginning to build a simple website, or just want a better understanding of the many acronyms you’ve been hearing lately.
“CSS“, “HTML” and “PHP” are thrown around so often and with such ease, you’re embarrassed to ask what they mean.
Following is my attempt to explain these terms (mainly to myself) in plain English.
The Difference Between CSS, HTML and PHP
CSS = Style: Cascading Style Sheets (CSS) dictate your website’s look and feel.
Font size, font color, font type, styling around images, page layout, mouse-over effects and more are all determined by CSS.
In WordPress, CSS can be edited within the “Editor” section under Appearance in the Dashboard. Some WordPress themes, like Headway, allow you to visually edit the CSS (meaning you don’t need to get eyeball headaches from coding).
The colors, fonts and styles of this entire website are driven by CSS.
HTML = Content: HyperText Markup Language (HTML) is the building-blocks of web pages.
HTML allows you to put images, text, videos, forms and other pieces of content together into a cohesive webpage. You can also tweak text words, resize images, and add links to either.
Anything that you can read or view on this website is being presented to you (by way of a browser) with HTML.
PHP = Functionality: Originally meaning “Personal Home Page“, PHP is what makes your website do stuff (I really can’t say it any better than that).
It’s a language of web applications like WordPress plugins, Donation widgets and other things that do stuff.
If you use the search box at the top of the screen, PHP will perform the functions that need to be done to give you the search results.
Here’s another way to think about these technologies:
You can find a lot more information about these terms if you visit the links (made with HTML) throughout this post.
How would you explain these terms to a novice?
I think you did a better job then me..now a days these web design software try to eliminate all this headache though..
“Black Seo Guy “Signing Off”
Good point. That’s exactly why I love Headway!
One of my favorite subjects. You are absolutely correct, and allow me to expand while doing my best not to make anyone’s eyes glaze over!
People tend to call working with HTML and CSS “coding” while they call working with PHP “programming”. I think programming is used for languages that make things move, such as PHP, C and all of its variations (including Objective-C for iPhone apps), .NET, etc. I guess you could even call working with Javascript programming since it also makes things move. Though I believe there are certain aspects of HTML5 and CSS3 that have animation effects, so this whole definition may change in the future.
Another distinction is that PHP is a “server-side language” (it does all the work using whatever web server is hosting your site) and HTML and CSS are “client-side languages” (they do all the work in your web browser). If you hit “View Source” to view the source code of a website, you will be able to see the HTML and CSS code used, but you will not be able to see the PHP code. You will only be able to see the HTML and CSS that the PHP code produces after it does its work on the server.
To put this in a WordPress context, if you view the source of a WordPress site, you will see the HTML code used for the blog entries on the page that you’re looking at, not the WordPress posts loop which is generated via PHP.
I hope that made sense and didn’t bore anyone, and people can correct me if I’m wrong if they see an error. I’m fluent in HTML and CSS, and I can use bits and pieces of PHP and understand how it works. I’m much more of a coder than a programmer.
Andy – I’m so glad you added the “server-side” fact about PHP. And very clearly explained! JavaScript makes things move as well, but that’s client-side.
Do like my car diagram?
Yes, JavaScript is client-side. If I suggested otherwise, feel free to slap me!
I do like your car diagram. I do the best I can to explain technical concepts to people who don’t have the same technical acumen and interest that I do. I think I can improve my technique by using pictures like the one you have demonstrated!
It’s the simplest way I could find to explain.
Love it when you guys talk ‘geek’ – can you expand the car metaphor further? What kind of “car” would a WordPress site be? How about Drupal?
Better yet – break down the unique aspects of a custom Facebook tab with the car metaphor.
I’ll understand if I’m asking for too much…
WordPress, Drupal and even a custom Facebook Tab have all of these elements, so the metaphor would apply.
Thanks for saying all that in English! I’ve just been creating an online course in Moodle and have gotten several headaches trying to understand how all the components work together. And thanks for the tip on Headway!
Kirsten – you’re very welcome!
Affiliate link for Headway. mate? *cough* disclosure *cough*
And cheers for the overview.
Anytime, Danny. BTW, I’ll be adding a disclosure section to my About Page over the next week, but thanks for the reminder.
You’re not American, mate. What do you care about disclosures? Canuck mounties breathing down your blog?
You don’t have to be American to be affected by non-disclosure, Ari – vendors are global.
I’m surprised nobody mentioned XML, but that might confuse more people. So I’ll be quiet now.
Ari – why not share what XML is for folks. In plain English, that is.
[...] link: What's The Difference Between CSS, HTML and PHP? – Social media … Share and [...]
That car analogy really summed it up! I had a rough understanding of the difference, but this visual along with the explanations really helped solidify it for me. Thanks, John.
Megan! Anytime. This analogy helps me understand it as well.
Well, The capital aberration is that HTML is a tag language, which is acclimated to call the accessible allotment of the site. The accent is absolutely simple and was firstly developed to present argument advice in the browser. Browsers till this day can alone appearance HTML allotment of the site.
toshiba direct coupon code
Every business maintains an account of time spent on services rendered or received and keeps track of the quantity of goods purchased or sold using invoices.