WPKube

6 Simple Tips For Learning CSS For WordPress

No matter your skill level, there will likely come time when you feel the need to customize your WordPress theme by digging into the dreaded ‘custom.css’ or ‘style.css’ file.

The reality is that there are just some things that you can’t do without getting your hands into the code. Luckily, it isn’t as hard as you think. Even some basic tweaks will keep your site from looking like every other WordPress site.

All you need is a few simple tips to get you moving in the right direction.

1. CSS Is Not Code

Some people may get mad at me for spilling the beans here, but it really is the truth. While CSS shares some common ideas with programming, it isn’t really code – at least not the hardcore kind that serious geeks understand. CSS is a display language which, by its nature, makes it relatively easy to understand.

As you start digging into CSS, keep in mind that you already know a lot of the language. Terms like margin, border, radius, and font-style should already make sense to you, particularly if you’ve been working with your WordPress theme. These aren’t new concepts, and for the most part, they behave like they sound. You will, however, need to learn a few of the CSS specifics.

2. Start With Font Styling

One of the easiest thing to do in CSS is to set new styles for fonts. With CSS, you can easily change the font, text color, and font style with a set of basic commands.

.yellow-helvetica {

     font-family: Helvetica, Arial, sans-serif;

     color: yellow;

     font-style: italic;

}

This type of styling is easy to learn and implement. I always advise newbies to start here. While CSS can (and should) be used for positioning elements on a page, it is important to get some quick wins under out belt, and this simple bit of success is a great way to start.

3. Learn The Box Model

Once you have a basic understanding of CSS, and can write some text-styling code, it is time to learn the CSS box model. The three basic things that you need to understand as a concept are margins, padding, and borders. Once you understand how these work in CSS, you can move on to the more advanced elements, such as floats.

These principals serve as the basic foundation for using CSS to create an actual page layout. While you won’t be creating a new layout from scratch right away, you will need to understand how things are glued together if you want to make adjustments to a new WordPress theme that you are hoping to customize.

4. Pay Attention To What You See

Many times, we like to jump into creation mode without spending enough time learning before diving in. It is important to remember that basically every website is built on HTML and CSS. With a few simple tools, you should actually be able to view the code on any given page. By making a habit of viewing and learning from the code that others have written, you can pick up a lot of information very quickly.

Image Source: Google Chrome Development Tools

By default, most browsers like Google Chrome have development tools that both helpful and easy to use. This will be an important tool for understanding what others are doing with CSS, and writing your own.

5. Rely On Frameworks

CSS is nearly a universal language. By this, I mean that a lot of the same code can be used to operate multiple websites. For this reason, it is important to get an early understanding of the CSS frameworks that are available. Blueprint CSS is a basic styling framework that has been around for ages. It is simple, easy to adapt, and can save you a great deal of time without having to reinvent the wheel.

Another very popular (and more modern) framework is called Twitter Bootstrap. While it contains much more than a newbie needs, it can simplify the process of learning and writing CSS just by working with it.

6. Use A Compiling Language

Compiling languages are additional languages or syntaxes that can be used to simplify the process of writing CSS. This is particularly useful once you start learning CSS3 and begin using some of the more advanced techniques. One of the unfortunate truths about CSS is that it is a very verbose language. It can take a lot of code to make something do what you want. Compiling languages like LESS or SASS help speed things up for you, and make it possible for you to avoid some of the headaches of writing custom CSS.

It is definitely worth noting that while these compiling languages are at an advanced level of CSS development, they are important to know and understand as quickly as possible.

Conclusion

Overall, CSS isn’t a scary language, and it is one of the most powerful tools at your disposal for customizing or creating a new WordPress theme. CSS can handle the look and feel of your site, in addition to providing some basic (and not so basic) animation and movement. If you are new to designing, developing, or simply modifying a website, it is definitely one of the first places to start.