Learning CSS Basics

CSS Logo

It’s time to talk about how to style a website to make it look awesome! If you’re interested in web design, you’re most definitely going to be best buddies with CSS.

In a previous post , I wrote about how I first got started with web development and HTML. Now, HTML can only get us so far. It creates the amazing content for our web pages, but doesn’t really do anything for making them look pretty. That’s what we need CSS for! It’s the main tool for creating beautiful, user-friendly websites that you and me use every day.

I’m currently taking a great course on Udemy focusing on web development, which is why I’m sharing my experience right here.

Now if you’re totally new to coding altogether, HTML and CSS are excellent way to get started. The basics of both of them are easy to pick up and there are plenty of resources available online – for free!

Happy reading!

Here’s a short overview of the contents of this post:

  1. What is CSS all about?
  2. Is CSS easy to learn?
  3. Is CSS easier than back-end languages?
  4. How to learn CSS?
  5. Free resources for learning CSS basics

What is CSS all about?

CSS stands for Cascading Style Sheets, which pretty much embodies the essence of the language. The stylings are processed like a cascading path from higher-level to lower-level and more specific ones applied to individual elements.

In short, when it comes to what CSS can do, the possibilities seem to be pretty much unlimited. In whatever way you want to present and see your HTML content in your browser, CSS can make it happen!

CSS is an extremely flexible and rich language. Background colors, fonts, decorations, divisions, floats, positionings, margins, paddings, and borders – these will all become your new best friends!

Whereas HTML is about rules and structure for the right kind of content, CSS lets you be as creative as you want. It offers you plenty of tools for changing pretty much every styling aspect of the website you can think of.

In short, HTML and CSS help keep the content and the styling of a website separate. Once you’ve created some content for your website with HTML, you can experiment with CSS as much as you like without the fear of accidentally deleting all of your text content.

Is CSS easy to learn?

Despite the seemingly endless possibilities CSS offers, the basics are very easy and quick to learn!

To be honest, the hardest bit for me when I first started was to figure out how margins, borders, and paddings work together. These three are the building blocks for the so-called box model in CSS. It’s quite simply the way any HTML element is wrapped inside these boundaries that define the space between elements. It simply took some playing around, and in a few minutes the whole concept made sense.

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

Ok so the early stages with CSS can be really easy. That will keep you motivated for learning more for sure.

But beware, once you start getting onto a more advanced level, CSS can get pretty darn tricky, too. As they say, it takes minutes to learn it but years to master it!

Overall, I personally think it’s easier to understand what you’re doing if you get visual output or feedback from your code. This applies especially to coding newbies. With CSS, you will see the output of what you create right away simply by hitting the refresh button in your web browser.

white book open

Is CSS easier than back-end languages?

The fundamentals of CSS might indeed be easier to grasp because they simply aren’t as abstract as with back-end languages like Python. As I just mentioned, whenever you write some CSS, you can see the results right away by applying the styling to a file and opening it in your web browser.

However, comparing CSS to programming languages like Python is like comparing apples and oranges.

In other words, it’s not that straightforward. That’s because the fundamental focus points and dynamics between the two are so different. CSS focuses on the look and design, while a back-end language such as Python has more to do with computing tasks and creating functionalities for a website or a program.

Basically with Python you will write you program for the server and test it. If the tests pass, you’re pretty much good to go and start with your next project.

With stylings, on the other hand, you need to consider different browsers and focus on the user experience and usability. Thus, the environment for server-side languages is usually more stable than that for CSS.

Now on the other hand, if you’re just getting started with a back-end language, it might take some time to be able to create something tangible. You could be learning a lot of syntax and logic of language before you create something you can actually present to others. With CSS, you take an HTML page and you can start changing the look of it right away!

I’m not saying that coding with Python would be this simple or easy – quite the opposite! But there are certain aspects of CSS that make it a bit easier to approach in my opinion.

All in all, both front-end and back-end development are highly complex fields once you dive a bit deeper. It is nevertheless difficult to make direct comparisons between them. Let’s just say that mastering either one of them is a long yet rewarding journey with more than enough challenges along the way!

— See also: Back-End Development vs Front-End Development

How to learn CSS? Experiment, experiment, experiment!

The best way for learning CSS basics in my opinion is to just go and experiment with it!

Take your first HTML page for instance and apply whatever CSS stylings you want to it and see what happens. Perhaps you already have a clear idea about how the website should look? Great! Targets like that are excellent for practicing. Once you know what you wish to achieve, it’s basically all about trying out what will work best. CSS really lets you do some learning by doing!

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

Cloning real-life websites

Another cool way of learning CSS is to clone a real-life site you like. Perhaps you really like the look of a specific news site you read every day?  Go ahead and clone it! It gives you a good understanding of how a real website you know well is created. And more importantly, seeing that you’re able to create exactly the same thing is a pretty amazing feeling!

Or better yet, perhaps you find the look of a website you use frequently a bit tired? In that case, simply create your own, better version of it. Show them how it’s done, tiger!

While practicing, make sure you try every trick you can and you’ll soon be surprised how quickly you’ll be able to style entire pages!

notebook with laptop

Lacking content to style? Go for some Ipsum!

But what if you haven’t created any content to style yet? Not good. I know you simply can’t wait to get started with CSS, so we need to find you a solution!

In case you’re not sure about the content yet, use a lorem ipsum generator to see how CSS can do its magic. Lorem ipsum is simply some filler text used in web development to see what the graphical presentation of a website looks like. You’ll find a good generator right here.

However, this basic Latin version of ipsum can get a bit dull. Just my opinion. Sorry!

Now if you prefer a meatier version to the original Latin text, have a taste of some non-veggie ipsum at baconipsum.com. It’s way more fun to try out some styling tools with CSS when your eyes keep jumping between pastrami and porchetta. Reminds me of some delicious BBQ dinners last summer. Yum.

Free resources for learning CSS basics

To get you started, check out some free resources for learning CSS yourself. I can tell you there are so many courses and tutorials for learning both HTML and CSS online that everyone will find one that suits them!

To get the first taste of both of them yourself, check out these links:

Have a go at it and let me know how it went!

Thanks so much for reading! Please share your thoughts in the comments below or contact me directly, I’d be delighted to hear from you! And as always, please share the post with others if you liked it!

Toodles!

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

<< Previous Post   Next Post >>

  • Martha Sostak

    For inspiration, I once heard a Google talk from Jens Meiert talk about the usefulness of simply _playing_ with CSS. He was saying that https://worlds-highest-website.com/ started this way, that he was working on CSS test cases to probe for maximum tag height. He was disappointed but then noticed how the test cases were actually impressive.

    As a beginner I try to keep this in mind. I started working on my own web site and try to play as much as I can. Maybe that it is helpful here too.

    • Mikke

      Thanks for reading and sharing your thoughts, Martha! That’s a good point – playing with CSS is surely the best way to get familiar with all of its possibilities and different tricks.
      Happy to hear you’re exploring CSS, too! Let me know how it works out with your website!