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

 

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:

https://gist.github.com/jennimckinnon/bdd3568edee7891e9424.js

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:

https://gist.github.com/jennimckinnon/9092c4532cacbe7ed723.js

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.

The box model
It’s important to be familiar with the box model.

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.

  • White Spektrum

    White Spectrum theme

    This is a simple theme with a common layout which includes a 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.

  • Simpler

    Simpler theme

    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.

  • Zircone

    Zircone theme

    Zircone is also responsive, but it doesn’t include a sidebar by default. It’s a clean theme to practice on especially since it was designed with a CSS framework foundation.

  • Mog

    Mog theme

    Mog isn’t responsive, but it’s a one-column theme with a few key design elements such as link and button styling for you to check out how these properties would work in practical applications.

  • Founder

    Founder theme

    Once you begin to really understand CSS, this is a great theme to peak under the hood and take a look at its stylesheet since it a bit more complex than the other themes listed so far.

    It’s responsive, accessibility and translation ready, includes a hamburger icon for mobile screens as well as many other CSS design details that are great to study.

  • Elucidate

    Elucidate theme

    Elucidate is a responsive theme that has a lot more CSS design elements than your average minimalist theme.

    Don’t get me wrong, it’s still a simple theme with a lot of white space, but when you dig into its stylesheet, you can see styles galore that you can learn from to implement yourself.

  • Underline

    Underline theme

    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

    Radix theme

    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.

  • Capture

    Capture theme

    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

    Simply VisiOn theme

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

    BlankSlate theme

    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 theme

    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

    Underscores theme

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

In terms of WordPress theme frameworks, there are many to choose from including Blank Responsive Bootstrap WordPress theme, our own Upfront theme and so many more, Rachel McCollin reviewed tons in her post called Choosing a WordPress Theme Framework – The Ultimate Guide.

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.

What are your hurdles and triumphs for learning CSS? Feel free to share your experience in the comments below.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s