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