Last updated on January 1st, 2019. Posted in HTML & CSS.
Is CSS difficult? You might think so -- and it can be if you don't nail down the basics early on. In this post, you'll learn about why CSS can be frustrating, why CSS can ben difficult, and what you can do to eliminate the confusion. Let's get going!
CSS doesn't have to be difficult, so long as you take the time to really understand it's key, foundational concepts -- concepts like the CSS box model, the different types of CSS rules you can use, how cascading works, and a few other components. With the basics under your belt, CSS becomes a lot easier to use. And it can even be a whole lot of fun, too!
In order to understand what CSS is, it's first important to know what HTML is. This is because HTML and CSS work together to build and format web pages.
To understand exactly what CSS is (and to appreciate just how important it is) we need a bit of historical context.
See, way back in the earliest days of the internet (even pre-internet), a method was needed for sharing electronic documents on computer networks. Specifically, two things were needed: First, a method for structuring these documents was needed. That is, a way to specify things like headings, numbered lists, paragraphs, and so on. Second, these electronic documents needed to be connected together via electronic cross-references -- what you and I call hyperlinks.
And so HTML was developed to handle these two simple tasks -- HTML provides basic page structure (headings, paragraphs, sidebars, and so on) and it connects pages together via hyperlinks. That's it.
But, as the internet continued to grow and develop, more and more demands were put on HTML to do more and more things. What about applying colours and fonts? What about building layout columns, and designs? Slowly over time, HTML began taking on a third (unintended) task -- design and formatting.
As a result, HTML became bloated, complex, and unwieldy. What was once a simple language for structuring and connecting documents together was now bulky and cumbersome. Worse, if you wanted to apply formatting to your page content, it had to be done one-by-one, to each individual page element.
Back then, everything was done manually...and everything was painfully slow.
I remember pre-CSS web design. It was rough! We had to manually apply formatting, one at a time, to each HTML element on our pages. And if you had even a five page website, that was a lot of work. Worse, if a customer or client wanted something changed (even something simple like a font or a colour), it was a nightmare to go through and manually change every single element.
I can't tell you how many conversations I had trying to convince the client that his first decision to go with neon green was the right choice...no matter how much I'd initially disagreed!
In fact, if you were a freelance web designer back then, you wouldn't dare pick up the phone on a Friday past 12pm for fear that a client wanted a change. That could toast your entire weekend.
This was particularly frustrating for me because I was coming over from the world of print design. And in the world of print, we had (and still have) what are called styles. Styles are found in all kinds of different applications from Microsoft Word to InDesign and even Illustrator. With styles, you simply define what you want headings, subheadings, paragraphs, and so on to look like. Then, you simply apply them throughout your document as you need 'em. And if a change came up, you simply edited the style. Anything in your layout that used that style was instantly updated.
It was fast and efficient, but none of this was possible in web design. It was slow, tedious, and error-prone.
Worse still was controlling page layouts in HTML. All we had were tables. Yes tables! The only way to structure layouts with multiple columns was to use an invisible table...or even sticking a table inside another table. We may as well have been banging rocks together. It was horrendous.
So as you can imagine, HTML was overburdened trying to handle too many tasks at once. Something needed to be done.
And that something was CSS.
CSS stands for Cascading Style Sheets. Think of CSS as HTML's assistant or sidekick. It was developed to do one thing and one thing only: Design. Specifically, CSS handles two design-related tasks: Formatting text and controlling page layouts.
That's all it does.
And, it's important to know that CSS is styles-based. This means that it functions just like styles from the world of print design or word processors. Here, you'd simply say, "Make all paragraphs use this font," or "Make all headings this size." And you could even make your own custom styles to handle pretty much anything you can imagine -- sidebars, photo captions, and anything else you like.
CSS styles simply provide formatting instructions for plain, boring HTML.
So with CSS there to take over all the design and formatting duties, HTML instantly reverted back to it's original intended purpose of structuring pages and connecting pages together via hyperlinks. Said another way, CSS separates formatting and design from a web page's structure.
By itself, a page's skeletal HTML structure is plain, boring, and uninteresting. But with CSS, web pages can be formatted and structured however you want -- and very quickly at that.
To really get what I'm talking about here, check out CSS Zen Garden. This is a website I used to show my students to really hammer home exactly what CSS is doing -- and just how powerful it is.
When you arrive on CSS Zen Garden, try selecting a different design from the column on the right, or click View All Designs and choose a design from there. When you change the design, what you're doing is changing the formatting, the dress up, that's being applied to the page's plain HTML structure.
You're literally changing the page's clothes. That's what CSS is doing.
Go ahead and play around a bit with CSS Zen Garden -- it's pretty cool. And hopefully it really hammers home this idea of separating formatting and design from structure and content.
In fact, a strong argument can be made for CSS being the most important thing to know in front-end web design. Basically, front-end web design means anything the visitor sees inside their web browsers. And as you now know, the formatting and layouts that visitors see is controlled by CSS.
And what's cool is that any kind of layout you can dream up, sketch out, or mock up can be built using CSS. It's that powerful!
Now next, let's discuss one of CSS's most powerful features -- which can also be it's most frustrating. That is, cascading. What cascading means is, how styles and formatting combine together to render a layout inside the visitor's web browser. I know that's a bit of a mouthful, but hopefully it makes sense.
Said another way, with CSS, styles can work together (or combine together) to format content.
Here's a simple example: Let's say we have two styles. One says, "Make all the text on the page Times New Roman," and the other says, "Make all headings 18pt in size." These two rules will then work together, resulting in all headings being both Times New Roman and 18pt.
Does that make sense?
Where it can start to get complicated is if you throw in more styles and instructions. As more and more rules and instructions cascade together, things can get pretty confusing. But with the layouts I build, I try to keep things as simple as I can. But, imagine you have a few hundred styles that control a fairly complex layout. And for some unknown reason, the third menu item in your footer isn't formatting correctly. Now you have to go on a bit of a wild goose-chase to track down what style is causing the problem.
That's one of the biggest challenges and frustrations when learning CSS.
So now that you have a general idea of what CSS is and how it works, you're probably wondering if it's worth taking the time to learn it. Let's address that next.
Is CSS worth learning? Yes, CSS is absolutely worth learning! I don't regret taking the time to learn CSS, HTML, WordPress, Photoshop, Elementor, and other web tools. Yes, it takes a little time (not too much) to get the fundamentals down with each of these tools. But when combined together, you have a very useful, very valuable set of skills.
And now that I'm on the other side of the learning curve, I can handle all kinds of web-related tasks from small fixes and customizations, to building very large, very complex sites (e-commerce websites, membership websites, and more). In fact, because I've been building websites and running online businesses for so long, I actually know much, much more about web design than someone starting out today would really need to know. Looking back, I think I totally overshot.
For yourself, you don't need to know nearly this amount...unless you want to. And that's what's so cool about CSS and web design -- it can be as big as you want it to be.
Here's what I mean: To build modern websites, you can pair WordPress and Elementor together to easily construct web layouts very quickly without knowing any code. With Elementor's visual drag 'n drop interface, you can build beautiful, modern, responsive layouts and remain totally oblivious to what's going on in the background code.
That's totally amazing!
So why bother learning CSS and HTML then? Because knowing even just the basics lets you handle fixes, problems, and customizations as they arise. As amazing as modern web builders are, they're still limiting. By knowing some code, you can pull back the curtain and get into the background of your website and edit it directly.
And if you know even the basics (which is easy to learn) you can be much more self-reliant. You can handle many problems and fixes yourself rather than having to rely on other people, like maybe co-workers or freelance web designers. Being dependent on someone else, on their schedule, and being billed on their hourly rate is no fun -- especially for things that are so easy and simple to fix.
So, learning the fundamentals of HTML and CSS, along with other web tools, is very liberating. You'd be self-sufficient, and able to work on your projects anytime you like. That could be a small personal project, an online business, or maybe helping out a friend with their website. Either way, learn these skills once, and you have 'em forever.
So yes, CSS is definitely worth learning!
As mentioned earlier, CSS is the most critical part of front-end web design. This means that it's the most important to fully learn and understand. This is because CSS can cause the most headaches when it isn't used properly.
If you've started learning CSS and are finding it frustrating, or if you're wondering why CSS can seem so complicated, there are a few important points to keep in mind.
First, CSS can be frustrating and seem complicated if you don't take the time early on to really nail down the fundamentals. Learn CSS right, up front, and you'll avoid a lot of headaches and frustrations.
Anytime I run into problems with CSS, it's usually a result of the code not being used properly. Misuse of rules, poorly written code, and jerry-rigged CSS is horrible to try to sort through. And tracking down problems in CSS can get pretty frustrating because often it's a matter of trial and error to locate the source of an issue.
So if you're frustrated with CSS or thinking it's too complicated (or if you're hearing people talk about how frustrating it is), it's usually because key, fundamental components of CSS have been skipped or not thoroughly understood.
So it isn't CSS that's causing the problem; it's often a lack of fully understanding it. A bad carpenter blames his tools. But it's not the tool's fault.
Want some specifics? Here are the three most common problem areas in CSS...
These three fundamental concepts are critical fundamental components of CSS that you'll need to nail down. Gloss over these, and you're going to be in for some serious hair-pulling!
Take the time to learn these fundamentals early on, and you'll find CSS a lot less frustrating -- and a lot more powerful -- than you might think it is.
But beyond these three key areas, there are other aspects of CSS that you might find frustrating. Let's discuss...
Beyond these fundamental aspects of CSS, building layouts can be tricky -- at least I used to (and still sometimes do) find them challenging.
I think maybe this is because I have a background in visual arts and graphic design. Or maybe I just need more coffee! But CSS can get frustrating when you visually know where you want to put things, but you can't get the code to play nice. I've been in countless situations where I could have drawn what I wanted to build on a scrap piece of paper or a white board. But translating that over into code was causing serious problems. But it always boiled back to me not fully understanding what the code was doing.
These days, I can very rapidly build nice looking layouts all by hand...but I wasn't always this skilled. It took a lot of mashing my face into my keyboard to get to this point.
Building layouts can also get frustrating when you start getting into responsive design -- that is, layouts that are friendly and adapt to different mobile devices, like smartphones and tablets. But once again, it dials back to having a solid grasp on the fundamentals.
And truth be told, building page layouts does get into some of the more complex areas of CSS. Here, it's all about media queries, FlexBox, and CSS Grids.
For now, don't sweat page layouts. You'll get to 'em in due time.
Another very frustrating part of CSS is getting your work to look consistent across different web browsers. In fact, this has been a major, long-standing headache for anyone involved in web design.
In years past, each web browser would render CSS in slightly different ways. Each had their own unique way of interpreting CSS. And even different versions of each browser has their own quirks. Arrgghhh!
As new browser versions would be released, they'd comply with some of the newest standards, but not always, not consistently, and not at the same time. As a result, web browsers had major inconsistencies between them. Your layout might look fantastic in one or two browsers, but fall apart in others. Adding to the frustration, fixes you'd apply to get your layout working in browsers that weren't rendering it correctly might then break it in browsers where it was working!
Throw mobile browsers and operating systems on top of this, with their endless varieties of screen sizes and resolutions, and it's been a real mess.
Previously, to solve all this, you might have to wind up writing the same CSS three or four times, each tweaked slightly for different browsers, just to get your website behaving consistently.
Thankfully, in recent years browsers have been getting better and better at agreeing on how to render CSS. They aren't quite in 100% agreement yet, but we're leagues ahead of how things used to be. Cross-browser compatibility is certainly less of a headache now than it's been in years past.
So specifically, it isn't CSS that's frustrating, it's how the various web browsers inconsistently interpret CSS. That's what's so frustrating. Poorly coded browsers are to blame, not CSS. Easily the browser that made web designers want to take a sledgehammer to their computers was Internet Explorer. Thankfully, Microsoft dragged that mule behind the barn, introducing the much more modern Edge browser.
But the mule that is Internet Explorer isn't dead yet. It's still causing problems for web designers. This is because it's still in use by a percentage of internet users. Let's call it Zombie Explorer! Yes, a percentage of internet users are still running old, outdated browsers. At last check, the percentage wasn't very high overall, but what if your organization or audience happens to fall into that group?
I wouldn't wish that upon my worst enemy.
So with all these frustrations, is it worth it to learn CSS? I definitely think so. Let's discuss...
Despite the frustrations that may arise as you begin learning and working with CSS, I still think it's very worthwhile to learn. As you dig further into the world of CSS, HTML, and web design, here are some important points to keep in mind...
Valuable skills make you more marketable as an employee or freelancer, and give you the ability to work on your own web projects. Autonomy means you have freedom from having to rely on others (who often come in the form of flaky freelance web designers). You'll also have freedom from limiting web design software. You'll have the ability to get your projects and tasks completed as you want 'em, when you want 'em. That's pretty awesome!
The trick is not get ahead of yourself and bit off more than you're ready for. Remember, the further you go with CSS, the more complex it gets. So if you jump into more advanced areas without being really comfortable with more basic concepts, you could wind up getting frustrated. My suggestion is to take it slow and steady. And this ties into the next point...
For most of us, we simply don't need to know web design and coding on advanced levels. In fact, in my online business course (where I show you how to build a website for your online business), I make the point that as business owners we don't want to be web designers. Instead, we want to be self-reliant online business owners. And when need be, we call in the web-dork cavalry to fix problems that we can't (or don't want to) handle ourselves.
In fact, I'll let you in on the secret weapon of advanced web developers and freelancers. It's actually not so secret, because you and I use it many times a day: Google. Even the pros don't know everything there is to know about web design. And when they get stuck, they turn to Google. And you can, too. In fact, I have a whole post that lists out all kinds of different sites and resources that you can turn to anytime you get stuck. Take a look at Where To Get Help When You’re Stuck.
Remember, the hardest part with CSS is what happens early on, the fundamentals. Learn 'em over the course of, say, a weekend. That's the hardest part. Then, the real learning continues for years and years as you work on projects, build websites, and run into different challenges.
So you're probably wondering if you should learn HTML first or CSS. But the best way to get started learning CSS is to learn it along with HTML at the same time. That's because these two web tools work together. And thankfully, they're both easy to get started with.
In another post I wrote, Is CSS Easy To Learn? Here’s Everything You Need To Know, I suggest that the fastest, most efficient way to learn CSS and HTML is with a project-based online course -- this is where you're actually building a web project as you're learning. This way, you're getting results as you learn. And there's no better way to learn than by getting your hands dirty and actually applying your new skills.
Something else that's important to mention is that HTML and CSS together are complimentary to other web building tools like WordPress and Elementor. So, while HTML and CSS fundamentals are important to learn, you'll want to pair them up ideally with WordPress and Elementor.
So which should you learn first, HTML and CSS or WordPress and Elementor? Really, it doesn't matter. Learn one pair of skills, then move on to the next pair. Both are complimentary to one another. On top of these, add some Photoshop, and that'll really round things out for you.
You're on the doorstep to a much larger world. Here, you can go in all kinds of different directions. And that, my friend, is awesome!
What's so great about getting started with CSS and HTML is that you don't need much to get going. A few hours of your attention, a reasonably modern computer with a web browser, and a half-decent code editor will do just fine.
Regarding code editors, these aren't anything too complicated. You simply need an application that makes typing code easy. There are many to choose from, and most are free. If you'd like some suggestions, take a look at this article.
Next, you'll obviously need some kind of guide or learning resource to help get you started. And I'd love to continue our discussion about HTML, CSS, and web design, so I have some additional resources for you to continue with me.
First, if you just want to get your feet wet with this stuff and see what it's all about, join me in my free HTML and CSS tutorial. There, we build a full web layout from complete scratch, so you can see what it's all about. It's a great place to start.
Or, if you're ready to dive deep into HTML and CSS and really gain a solid understanding, then take a look at my full-length online video course, HTML5 & CSS3 Site Design. This course will give you loads of practical, hands-on instruction, nailing down a solid foundation in the fundamentals.
I'd love to show you what it's all about!