10 Simple Tips for Learning CSS for WordPress

Learning CSS can be overwhelming, especially when you don’t know where to start and what terms to search for when you get stuck.

Since CSS is a styling language and not a full-on programming language like Javascript or PHP, it’s actually fairly simple to learn, especially if you have some HTML knowledge under your belt (which I assume you have for the purposes of this post).

In our blog survey, an overwhelming number of you mentioned you wanted to up your game and get more familiar with CSS and that’s why we recently published a list of over 150 resources for learning CSS, which should help you get started, especially in tandem with this post.

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.

Continue reading, or jump ahead using these links:

• Basic Construction
• Practice with Simple Selectors and Properties
• Memorize the Box Model
• Learn By Doing
• Arrange Content by Width and Height
• Floats and Positioning
• Advanced CSS
• Replicate a Site With CSS
• Preprocessors
• Frameworks

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 the 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.

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 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.

White Spektrum

The White Spektrum theme is a simple theme with a common layout that includes the main content area, sidebar, header, and footer.

Other than a splash of color when it comes to fonts and links, it’s a plain and simple theme to work with.

Founder

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.
• Responsiveness with CSS3 media queries – One of the easiest ways you can create a responsive theme is by using media queries.
• 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:

• BlankSlate

  

  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.

• HTML5 Blank

  

  HTML5 Blank is a boilerplate WordPress theme that includes some styling, though, not much. It’s a great start if you’re not too keen on starting your CSS from scratch.

• Underscores

  

  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.

There’s also the HTML5 Reset WordPress Theme on GitHub. It includes features that are a bit more advanced, but that’s ultimately what makes it a valuable starter theme.

9. Preprocessors

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.

10. Frameworks

In web development, frameworks are a structure for creating dynamic websites. Ultimately, the goal of a framework is to make sites faster 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, and uses both SASS and LESS as well as many custom CSS components.

Wrapping Up

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.

For more resources on learning CSS and WordPress, check out some of our other posts: A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources and From WordPress Beginner to Pro: 200+ Career-Boosting Resources.

Tags:

• CSS