Learning CSS can be overwhelming, especially when you don’t know where to start and what terms to search for when you get stuck.
Today, I’ll show you the workflow and tips that helped me learn CSS when I first started out many years ago. Start with tip one and work your way down the list to CSS mastery.
1. Basic Construction
First thing’s first: In order to learn how to write your own CSS, you need to know how to properly format it. There are actually two correct ways to do this, but one of them helps keep you more organized.
Since it’s common for HTML to be the first language people learn when they want to work with WordPress sites, it helps to learn CSS syntax by first writing it out in a similar way to HTML.
Here’s the basic structure that CSS takes:
It’s simple enough when there aren’t many styles you want to implement for an element on your site, but when you start getting more familiar with CSS, you’re going to need a lot more than one style for an element and that’s where a structure like this can get messy, fast.
That’s why there’s a more efficient and organized way to write out your CSS:
Now you can start digging into the terms that are used in this example. Each of these terms are the basic building blocks of CSS: class, ID, selector, property, and value. The properties and values also make up what’s called a declaration.
This is a great starting point toward learning how to write your own CSS and once you start, you may wonder where you should write all this down within your WordPress files.
In your WordPress installation, any file you see that ends in .css is a CSS file, as you probably already guessed. The main file you need to look for is your stylesheet and it’s labeled as style.css. This is where most or all of your theme’s design is held in terms of colors, fonts, basic images and possibly some of your theme’s layout.
You may also notice a file in a pre-made theme called custom.css and this is usually where they would like you to make any changes to the theme. When you make changes in this file, it should overwrite the existing styles in the theme’s stylesheet.
If you add plugins to your theme, they may also come with CSS files in their folder and they are used to style the plugin’s look and feel.
2. Practice with Simple Selectors and Properties
Next up is learning about basic selectors and properties and how they function in a theme. Selectors such as h1, h2 and h3 for headers and p for paragraph text, for example, as well as properties such as font-family and background-color.
There’s an easy way to practice these new skills and actually see the changes you’re making, without actually having to start your own WordPress blog. W3Schools has a ton of information on CSS as well as live examples where you can change their code and with a press of a button, you can instantly see the changes you made.
When you see an example, just click on the Try it yourself button and a window opens where you can test out some basic CSS.
3. Memorize the Box Model
I’m an advocate for referencing most common pieces of information rather than committing all of it to memory. Perhaps it’s because I find my memory to be lacking much of the time, but I would much rather say it’s because there are so many wonderful references online.
You can easily look up selectors and properties you don’t know within a heartbeat. All it takes is a simple inquiry to your favorite search engine such as Google or Bing and all the information you need is just a click away from there.
This may be the case with many (or most) things in life, but the box model shouldn’t be one of them.
Essentially, it’s the basic layout elements in CSS that you need in order to make sense of a lot of properties. The box layout also includes many basic places that you can style with CSS.
Luckily, it’s not difficult to learn and in all honesty, if I can memorize it, you shouldn’t have a problem with it, either. In essence, it includes a content area, padding, border and margin.
4. Learn By Doing
Once you begin to get familiar with CSS, it’s a great idea to actually put it into practice by choosing a theme that has an entirely basic design and changing its style by editing its stylesheet.
It’s important to understand how simple changes can affect a theme drastically sometimes and other times not so much. Ultimately, practicing as much as you can should help you visually see the changes you make and connect your actions of writing code to the final result.
In the grander scheme of things, once you’re able to connect the dots you can not only write CSS quickly but you should also be able to troubleshoot issues in the future which becomes a critical task for web designing and developing.
Here are some excellent themes to practice on that you can install on your WordPress site for free. Not all of them are perfect representations of how a theme should necessarily look and function, but they’re all great starting points to learn how you can change a theme with simple CSS.
Simpler also has a common layout with a sidebar, but a lot less color. Its design is minimalist as well, but has one key difference: It’s responsive which means this theme looks great across all mobile devices.
Underline has a simple layout, but also many CSS elements such as underlining that are neat to see in action. While you can underline text easily with HTML, there are many different types of underlines you can use with CSS.
It’s also a responsive and simple theme with a sidebar.
Radix can either be an ultra minimalist theme or you can add color around the post title and footer.
It’s also built with clean CSS3 so you can begin to see how a fully responsive theme can come together with a few slightly more advanced CSS features. You can also see an example of how you can add color not just to text, but to the background.
When you take a look at Capture, you see a responsive theme with key CSS features that are important to explore. You can see just how images can become an important background and styling element to your theme to add personality, rather than using a solid color.
Simply-VisiOn is a responsive theme with a simple design, but that doesn’t mean it doesn’t include a lot of cool CSS styling.
Not only can you can see simple CSS functions such as color and fonts, but you can see more advanced features such as circular avatars and menu animations.
Even with these minimalist themes above, you still may feel a bit overwhelmed with how many things you don’t yet recognize and that’s okay. As you check off each section of this post, it should all start coming together a bit more.
5. Arrange Content by Width and Height
Once you have installed one of these themes, you can also begin to change the layout by entering different lengths and widths of content areas and selectors.
It’s a precursor to the next step and gets you familiar with the different layout areas in a WordPress theme.
6. Floats and Positioning
This is where CSS tends to get a bit tricky since you can create a layout purely with CSS and in particular, floats and positioning. The problem is, these properties aren’t designed to create entire layouts and there’s a draft out there to update CSS layouts.
For now, this is a common way many people get their layout just right. It’s a great idea to observe themes that are already out there, including the list above and see how they differ with their use of floats and positions.
7. Advanced CSS
At this point, you’re really starting to get the hang of CSS, but there’s a lot more to discover:
Pseudo classes – Used to define a specific state of an element such as on mouse hover and positioning images in a specific place relevant to other elements.
Complex selectors – You can get even more specific with styling using more advanced selectors.
CSS3 animations – Creating a fade, pop or other transitions when you mouse over images and buttons.
Transforms – Controls the size and shape of selected content areas.
At-rules – Used for importing things like fonts and stylesheets into your theme.
Gradients – Adding a gradient to your theme without needing to use an image.
These are many of the elements where you can really start seeing your theme’s design really take shape. It’s the perfect time to start testing your skills.
8. Replicate a Site With CSS
With all this knowledge on your belt, you might need to get a sturdier belt, but more importantly, you can really put your skills into practice by using a basic shell of a theme and adding your own CSS styles from scratch.
One of the most helpful things you can do to advance your learning is practice your knowledge in real world applications. I recommend trying to find a site you like then replicating it as best you can purely with CSS on a blank WordPress theme.
Sure, you likely won’t be able to get everything perfect and there are probably a lot of elements you won’t be able to replicate with only CSS, but it’s a great way to get you comfortable with CSS.
Here are some great and free starter themes you can use:
This is as bare bones as it gets. There’s only HTML5 in this theme so you’re free to add your CSS without worrying about any styles clashing. It does come with everything you need to start styling your theme, though.
If you’re a bit adventurous and want to try a more advanced starter theme, Underscores is an excellent option, though, not for the faint of heart since it comes with two preloaded theme sample styles. It also includes some advanced techniques and coding that makes it a great learning tool.
Once you know the ins and outs of CSS, it’s a great idea to learn about preprocessors, and in particular, SASS and LESS. Both of these help organize your CSS so it’s much easier to write and more accessible for future edits.
Preprocessors make your CSS clean and easy to follow and it has quickly become an essential skill among web developers. While there’s an ongoing debate on which one is best, SASS tends to be the preprocessor that’s most used to date.
If you would like to try your hand at SASS in the context of WordPress, check out the Bones theme. It’s comprised of mostly HTML5 so you can try styling with the built-in bit of SASS that’s already included.
In web development, frameworks are a structure for creating dynamic websites. Ultimately, the goal of a framework is to make sites faster and without losing out on functionality.
Once you have CSS down pat, you can speed up your theme development by using a framework.
One of the most popular frameworks is Twitter Bootstrap. It’s created to be responsive right out of the box, uses both SASS and LESS as well as many custom CSS components.
Armed with a syllabus for learning and with the tips to help you along the way, CSS shouldn’t be too overwhelming for you to get a handle on. Plus, you should be ready now to try your hand at styling your own WordPress theme.