Last updated on September 6th, 2020. Posted in HTML & CSS.
The importance of CSS really can't be understated. But what is CSS, what's it's meaning, and why is it so difficult to understand? Here, you'll get a thorough understanding of exactly what CSS is, the different types of CSS you can use, and how to put it all to use in your own web projects. Let's jump into it!
CSS is important because it controls all design-related aspects of your website. Typography, colours, page layouts and any other visual aspects of your website are all controlled by CSS.
What's more, CSS allows you to control and adjust the design and formatting of your entire website (no matter how big or small it is) from a single spot. This is done using what's called an external style sheet.
Now, if you want to build and run your websites yourself, getting a deeper understanding about how all this stuff works is crucial. But it's often made out to be confusing and frustrating. That's why I put together an online web workshop. There, you'll get everything laid out in clear, simple steps. You can enroll for free right here. Be sure to check it out!
In the meantime, if you'd like to know more about the importance of CSS, the different types of CSS, and what CSS means to you and your website, stick around...because that's exactly what we'll cover in the rest of this article.
Alongside HTML, CSS (which is short for Cascading Style Sheets) is foundational to all modern web design.
But what's the difference between HTML and CSS?
Great question! Here's what they're all about...
HTML handles your web page's structure. HTML is comprised of elements (also sometimes called tags). There are HTML elements for all sorts of content that you'd have on a page -- headings, paragraphs, sections, tables...and many, many more.
Think of these HTML elements as containers, or boxes, that hold your page's content. So if you want some content to be a heading, you'd put it in a heading container. Want other content to be a paragraph? Put it in a paragraph container. And often times, these containers can be placed inside one another to create a specific page structure.
So in this way, you can think of HTML as the scaffolding and beams that are used to construct your web pages.
So what is CSS and how does it fit into all this?
CSS applies formatting (like fonts, colours, object positioning, and so on) on top of a page's raw structural framework.
So, CSS sits on top of HTML's raw structure to dress it up and make everything look pretty. This is why HTML and CSS are foundational to all web design -- they work together to build and format web pages.
And this is what makes CSS so important. CSS separates a page's content and structure from it's design and formatting. This allows designers and website owners to quickly apply formatting to their layouts, and make any necessary changes and tweaks.
If you'd like to see a visual example of exactly how all this works, then there's no better example than CSS Zen Garden. There, you can apply different CSS formatting directly to the same structural HTML.
And because CSS separates design from content, site owners can tweak and fiddle with their site's design as much as they like without risking their site's structure or content.
So now that we understand the importance of CSS, what are some of the advantages of CSS? Should you spend the time to learn it? And what are the specific functions of CSS?
Let's get into all this and more, starting with a deeper understanding of what CSS is...
In order to fully understand the importance of CSS, a bit of history is needed...
Way, way back in the early days of the internet, only HTML existed. Originally, HTML was developed as what's called a "markup language." That is, it was used to mark objects on your page as tables, images, paragraphs, and so on.
These are the containers we just talked about.
And originally, any kind of page formatting or design was an afterthought. Actually, more accurately...design and styling wasn't even a consideration!
See, the early internet was used to share research information. So not only was page formatting limited and largely unnecessary, but narrow bandwidths couldn't handle anything other than basic, rudimentary styling.
But then the internet started catching on. More and more people began using it and the internet saw much wider use. As a result, people demanded more and more from HTML...demanding that it start doing things that it wasn't originally developed to do.
Tasks like text formatting, applying colours, and handling page layouts put a big strain on HTML. As a quick fix, these sorts of formatting options were added to HTML. And, hacks and go-arounds were developed to make up for HTML's lack of formatting and control.
And very soon, HTML (and web design overall) became very complex, bloated, and difficult to handle.
But thankfully, a solution was developed. This solution would eliminate the big problems that were created by forcing HTML to pull double-duty as both a structural tool and a design aid.
And that solution was CSS!
CSS was developed specifically to take over all design and formatting duties. This restored HTML back to it's original intended purpose of markup and page structuring purpose. And, CSS gave designers and website owners much more control over the look and presentation of their web pages.
But what is CSS, exactly?
CSS is what's called a style sheet language. Specifically, it's used to format documents that have been written using a markup language...most often HTML.
So this is how HTML and CSS work together to build web pages and sites: Think of CSS as being the boss, telling HTML elements (those containers we've discussed) what they should look like and where they should appear in a page's layout.
So, CSS might tell a particular HTML container to appear on the left-hand side of the layout, with a certain background colour and spacing, maybe with a border...and any number of other styling instructions.
That's really all there is to it!
So now that you have an understanding of the importance of CSS and how it works, let's move into the next section: The big advantages of CSS!
Now that you've gotten a sense of the importance of CSS, let's now talk about some of the big advantages of CSS.
So far, we know that CSS controls all the design and formatting that's applied to your web pages. But in addition to taking over formatting duties from HTML, CSS takes things much, much further. Below, I've broken down the big benefits that CSS offers...
Prior to the development and widespread support of CSS, HTML offered very limited text formatting options. Anything beyond setting fonts, sizes, colours was a real stretch.
And as for handling page layout, HTML was extremely limited. In fact, building multi-column page layouts with HTML involved using a hack: Using tables with the borders turned off. Hard to imagine now...but back then, this was the only way to create multi-column layouts.
(If you're too young to remember those days...consider yourself lucky!)
But now with CSS, we have a huge (practically dizzying) number of typography, styling, and page layout options. There are tons and tons of CSS properties that we can use throughout our web pages. This means we have much more extensive formatting capabilities with CSS.
On the text formatting side, it's a typographer's dream: scalable font sizes, weights, line heights, letter spacing...And this is the tip of the type iceberg!
And as far as page layout is concerned, CSS has made huge strides in recent years. Early on in the development of CSS, we had a few false starts. CSS positioning and floats left a lot to be desired. But with the development of CSS Flexbox and CSS Grids, finicky page layouts are a thing of the past.
Now, we can build precise, responsive CSS-based layouts that adjust themselves automatically to a variety of screen sizes. Over the years, CSS has come a long, long way!
If things are still a little fuzzy for you, take a look at the video below, which answers the 5 biggest questions about HTML and CSS...
Now, let's take a look at another big advantage of CSS...
Back in the pre-CSS days, maintaining consistent formatting across your pages and throughout your entire website was a real pain. All formatting and stylings had to be applied on an item-by-item basis, page by page. This meant that if you had a large website, keeping everything looking consistent was a huge task.
And, maintaining your site long term was a nightmare. A seemingly simple adjustment (like changing a font or a colour on a heading) could take hours to set throughout a large website. It was not fun.
But when CSS came a long, all this changed.
Remember, CSS separated design from structure, right?
The way this is done is, CSS is based on rules. If you've ever used Paragraph Styles or Character Styles in a word processor or desktop publishing application, then the concept of CSS rules is exactly the same.
So rather than applying formatting on an item-by-item basis, a CSS rule is created instead. And the rule can contain any number of formatting instructions...instructions like what font to use, spacing, alignments, and much more.
These rules are then stored in a style sheet (more on this later) which is then applied to the pages throughout your site.
And here's where things get really great...
If you need to make a change to the design or formatting of your web pages, you don't go to the pages themselves. Instead, you head to the rules that are controlling the page elements you want to adjust. A single change to your CSS rule automatically updates throughout your entire website...instantly!
How's that for productivity?!
So, CSS completely changed how web styling is handled, helping maintain consistent formatting throughout your entire website. And, CSS makes maintaining and updating your site faster, easier, and less error-prone. It eliminates the long, monotonous hours spent manually updating HTML-based formatting.
Here's another great benefit of CSS (we briefly touched on this a moment ago): In addition to using CSS to control typography and page layout, it can also be used to control your website's formatting depending on the device or media that's being used to view your website.
In other words, you can change the way your website looks and behaves when viewed on an iPhone versus a TV...or even between a computer screen and a printer-friendly version of your pages.
This is all made possible by something called CSS media queries.
Think of media queries as if/then statements: If my website is being viewed on a smartphone display, then make it look like this. Or, if my website is being viewed on a desktop computer, make it look like that.
CSS media queries are incredibly flexible and powerful. They're a very important part of CSS. And when they're combined with CSS Flexbox and CSS Grids, the options that become available to you are incredible...
Try doing that with HTML tables!
Another big benefit of CSS is increased website performance. In the old days, with formatting embedded directly into HTML, every page had to load in it's entirety. When a visitor follow a link to another page on your site, that page then had to fully load.
This, as you might guess, slowed down a website's speed a fair amount.
But with CSS -- specifically, CSS rules that are stored in external style sheet -- the formatting rules are loaded once for your entire website.
So, the first time a visitor arrives on your site, all the formatting instructions are loaded just once. When your visitor navigates to additional pages on your site, only the pages themselves need to load...not the formatting or styling.
This means that with CSS, your site will load and run much faster for your visitors.
Another big benefit of CSS is the ability to customize pre-existing templates. Here's what I mean...
Let's say you're decently versed in CSS (and, CSS isn't hard to learn!). And, let's imagine you're using WordPress to run your website (a great choice, by the way). In this scenario, you could dig into your site's template (called a theme in WordPress lingo) and customize it to your exact liking.
So rather than building a website from complete scratch, you could instead find an existing template layout that's relatively close to the design you want. From there, you could simply modify it and tweak it to get the exact design you want.
But now, you can create simple animations and small feedback effects with just a few lines of code. And it's this sort of small, subtle interactive feedback that makes your pages really pop for your visitors.
A final benefit of CSS that I'll mention is what's called CSS Frameworks. CSS Frameworks are pre-created libraries that allow you to rapidly prototype and develop layouts. The two most popular frameworks are Bootstrap and Foundation.
Personally I haven't used Foundation, but I know it's fantastic. Instead, I opted for Bootstrap and I absolutely love it. Bootstrap makes building custom web layouts fast and easy. Instead of creating everything from scratch, you simply use building blocks that have already been created for you.
And, using Bootstrap with a site builder like Pinegrow makes building layouts even faster!
Now, if you aren't sure if it's worth it to learn CSS or not, take a look at HTML & CSS: 3 Big Payoffs To Learning The Basics.
And now that you have a solid idea of the big benefits of CSS, let's now dig deeper and learn about the types of CSS that we can use...
So by now, you've got a very good handle on the importance of CSS and what it can do for you. But here, let's address the different types of CSS and how you can apply all this stuff to your web design projects.
Earlier, you learned that CSS is rules-based (as mentioned, just like Paragraph and Character styles). Now sometimes, CSS rules are also called selectors. The terms rule and selector are often used interchangeably. And in CSS, there are actually a variety of rule (or selector) types that we can use.
Here's a quick run-down: We can use class selectors, element selectors (also sometimes called redefined HTML element selectors), ID selectors, descendant selectors, pseudo class selectors...and a few others that get a bit more advanced.
If you'd like a more detailed look at the different types of CSS rules you can use, take a look at 3 Powerful Ways To Put CSS To Work - Easy Beginner's Guide!
One of the most important things with CSS is using the right CSS selector type for the task at hand. The good news is, the more comfortable you get with CSS, the more this stuff becomes second nature.
Now next, it's important to know that there are a few different ways to apply CSS to your HTML pages. The most common approach (and what's considered best practice) is to use what's called an external style sheet. We briefly touched on this earlier.
And, you may have seen an externals style sheet in your travels -- it's a file in your website directory with a .css file extension. Often, external style sheets are named something simple like style.css.
An external style sheet is simply a file that contains a list of CSS rules that you'd like to apply throughout your website. Then, your individual HTML pages link to your external style sheet, putting themselves under it's control.
So whatever the rules that are stored in an external style sheet say, the static HTML pages that are connected to it do. It's that simple!
Now although using an external style sheet is the most efficient way to work with CSS, there are other approaches.
For instance, you can create what's called an internal style sheet. This is a list of CSS rules that are contained with in a specific HTML page. In other words, an internal style sheet can only control the page that it's a part of.
Internal style sheets come in handy for small stand-alone pages that contain formatting that's unique only to that page...maybe like a sign-up page or a page with special offers.
A third way to apply CSS to HTML is to use inline CSS. Here, CSS formatting properties are applied directly to specific HTML elements. So in other words, inline CSS is embedded directly in your HTML. While this might be handy for fast, one-off formatting needs, this isn't a preferred method. That's because inline CSS goes against the entire idea of CSS being separate from the HTML structure that it controls.
So there's a look at the different types of CSS you can use in your web projects.
So there's a detailed look at the importance of CSS. Once again, it's hard to over-emphasize just how important the development of CSS has been on modern web design.
You learned what CSS is and how it separates design (specifically, typography, page layout, and how pages appear on different displays) from raw page structure. With this understanding, you should now have a clear idea of how powerful and important CSS is.
Then, you got a detailed look at the advantages of CSS. You learned how CSS provides web designers and site owners with more extensive formatting options, the ability to maintain consistency across their websites, and how CSS makes light work of ongoing site maintenance.
You also learned about how CSS handles page layouts. Specifically, we touched on CSS Flexbox and CSS Grid -- two recent advancements that make building layouts much easier than previous methods. And to take your layout building even further, don't forget about CSS frameworks like Bootstrap; and using a page builder like Pinegrow to make the whole process of building page layouts a breeze.
Finally, we took a look at the different types of CSS. Specifically, the different types of CSS selectors you can use in your work, and the different ways that CSS can be applied to your web layouts -- internal style sheets, external style sheets, and inline CSS.
I hope you enjoyed this look at the importance of CSS!