Loading CSS Into WordPress the Right Way

Without CSS, you have very limited choices to style your web pages. And without proper CSS inclusion inside WordPress, you can make it extremely hard for your theme's users to customize the theme's styling. In this tutorial, we're going to have a look at the right way to enqueue CSS into WordPress. WordPress is currently the most popular content management system in the world, and it has tens of millions of users. That's why, in order to make a successful theme, we need to think as every single WordPress user and try to go by the book and load our CSS files in our themes properly.

5 Quick Beginner-Friendly CSS Customizations

In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme. Before we start, you need a theme with custom CSS options or a custom CSS plugin, or a child theme.

Challenging CSS Best Practices

When it comes to CSS, Thierry Koblentz believes that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, he's convinced that the only way to improve how we author style sheets is by moving away from this principle. For those of you who have never heard of the SoC principle in the context of Web design, it relates to something commonly known as the “separation of the three layers”: structure, presentation, behavior.

Troubleshooting CSS

CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. Text documents. It has come a long way since then. Probably a bit too long. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions.

Designing CSS Layouts With Flexbox

Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities.

Benefit From CSS Generated Content And Counters

Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support. With the release of Internet Explorer 8 in 2009, generated content was rediscovered, and many interesting implementations were adopted for the first time. In this article, Gabriele Romanato will discuss some possible uses of generated content.

Customizing Bootstrap

Twitter’s Bootstrap has taken off like a rocket since its release a year ago. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to a parade of websites. One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers to turn out something decent.

Putting CSS Clip to Work: Expanding Overlay Effect

The previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today Mary Lou wants to explore the practical side of it a little bit more. She is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay. She wants to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element.

Understanding the CSS Clip Property

Hugo Giraudel is pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. He will cover pretty much everything you have to know about it. The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as crop. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

How to Create a CSS Drop Down Menu

It used to be that if you wanted to create a drop down menu then you needed to use a lot of background images as well as complicated Javascript. Today however all of that is a thing from the past. In this tutorial the DeveloperDrive Team will create a simple yet very effective drop down menu using only CSS. They will build their drop down menu in two steps, first they will construct a simple menu using HTML and then add the styling with CSS. They will create this drop down menu by using the <nav> element, as well as the display:block, and use the position element in order to position the menu.

Older articles