What is CSS and How Does it Affect WordPress?

If you run a WordPress site you’re bound to encounter the term “CSS”. In this post, you’ll learn what CSS is and how it affects your site.

This is a quick overview so you won’t be learning how to write CSS, but you will understand its place on the web and on your site.

What is CSS?

CSS is used to style web pages. It’s written purely to change the presentation of a website.

Take a look at this screenshot of IMDb.com:

screenshot of IMDb
Screenshot 1: IMDb

Now compare that with this screenshot of IMDb with the CSS turned off:

screenshot of IMDb with the CSS turned off
Screenshot 2: IMDb – No CSS

Not so pretty, right?

The content – the words, links, etc. –  is exactly the same in both examples. The difference is the obvious absence of styling.

What you can see in screenshot 2 is a list of links that would normally be styled to look like a menu.

When I said CSS is used to style web pages, I mean it is THE way web pages are styled. Without it, all sites would look like the screenshot above. That begs the question, what are we seeing in that screenshot?

Built with HTML, styled with CSS

To understand CSS’ place on the web, you need to know about HTML.

Here’s what the raw HTML looks like for that same part of the IMDb homepage:

screenshot of the source HTML of IMDb.com
Screenshot 3: IMDb – HTML

In screenshot 3, you see the HTML which is often referred to as the “source code”. This is what websites are made from. It’s what your browser reads, and what Googlebot sees when crawling your site.

When you visit a web page, your browser takes the raw HTML (screenshot 3) and renders a usable web page (screenshot 2). If there are CSS files, they are loaded and used to style the web page (screenshot 1).

CSS with WordPress

In summary, websites are made with HTML and styled with CSS. Your WordPress site is no different.

In practice, it’s helpful to know that HTML is used to add content to a page, and CSS is always used to style it. Any style changes you may want to make to your site –  increase the logo size, change the background color, etc. – will be done with CSS.

I hope you’ve found this helpful for understanding CSS and its place on your site. If you have any questions, post in the comments below.

Related Posts