The layout principles–columns and rows, angles and lines–that we use to build websites today are largely influenced by their print heritage. And although grid implementation on the web is getting better and more polished, web layout in general is still awkward compared to print media, especially when it comes to content flow. Magazines and newspapers have always enjoyed elegant ways for arranging content layout, such as wrapping text around, or inside, non-rectangular shapes.
In one of our earlier introduction tutorials to CSS Grid we looked at fluid columns and better gutters. We learned that it isn’t necessary to specify exactly where we want to position our grid items; if we declare our grid’s properties, Grid will slot our items in according to its auto-placement algorithm. In this tutorial we’ll take a look at how that algorithm goes about its work and how we can influence it.
More and more these days, CSS is being used to control the styling of things other than websites. One type of media that CSS can apply styling to is paged media – things like digital magazines and ebooks or a website in the form of a print stylesheet. There are some properties that only apply to this media type. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks.
Vertical centering is a firm favorite of designers – for both print and digital media. But aligning things vertically with CSS is not the easiest thing to do. This issue is made worse in a world of multiple devices and responsive design as we need our elements to be flexible in height – which can make calculating their vertical center quick tricky.
In the previous episode we looked at all sorts of properties for styling text. In modern browsers, and in IE back to version 4, we can add custom fonts to enhance the design of our websites. We can leverage various features of these custom fonts to help boost performance and improve our typography overall. In this episode we’ll learn:
In this tutorial, we are going to create a Statistics Panel using HTML and CSS3. We’re going to use Google Fonts for this tutorial, specifically “Roboto.” First, let’s create our HTML structure. We need a wrapper or a container, we’ll name it “stats-panel.” We’ll have a header, with a title and calendar views.
This family of properties adds all sorts of typographic goodness to your text and, as long as you have access to fonts that offer these features, they really give the reading experience a boost for your users. Let’s start with where you might find these fancy fonts.
Text is everywhere. Without it, the web wouldn’t be such a useful place. There are many different CSS properties for styling text and in this video, we’ll cover most of them in some way shape or form. There’s quite a few, so we best get started! As there are so many things to cover, this episode will demonstrate some of them, but in part just act as an overview of the tools in the box.
let’s look at a couple of quick tips for using the rem unit of measurement. But first, let’s look at another type of relative unit: the em. When working on a responsive project it’s more flexible to use relative units like em for sizing text and spacing in and around elements rather than pixels. This is because this unit is relative to the font size of its parent element, allowing an element’s size, spacing and text content to grow proportionally as the font-size of parent elements change.
There is literally nothing else to say on the topic of CSS quotes, nor is there any other selector, property or value that starts with Q. So, in this week’s tips, I answer some common questions I get from my students, AtoZ supporters and fellow professionals.
The “card” pattern has seen great success in recent times, but the way we build them is still limited because of the CSS available to us. Until now, that is. By combining CSS Grid and Flexbox, we can make cards which align neatly, behave responsively, and which adapt to the content within them. Let’s see how!
Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it’s still an experimental feature without sufficient browser support. The CSS alternative to show an image background behind a text is using the mix-blend-mode property.
Pseudo elements :before and :after are great for building complex design features without cluttering the markup with non-semantic elements. Other pseudo elements like :first-line and :first-letter give us access to styling parts of elements that aren’t found marked up in the HTML document.
Pseudo elements are elements on the page that aren’t found in the HTML code. They can be manipulated with any CSS that would be applied to any other element. Two special pseudo elements – :before and :after can be used to generate content on the page from CSS and have many potential use cases.
We have many powerful CSS selectors available for finding elements on the page and applying styling to them. The nth-child pseudo selector is probably the most powerful due to the flexibility of its (an+b) expression for finding patterns of elements. In this quick tip, we’ll look at when you can use nth-child and when you should use a standard class.
Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. There are a bunch of different ways to style underlines. So what are all the different ways we can underline text on the web?
Over the time I have been doing WordPress web design, there are occasions when I have needed to add an ID or class to the <body> tag. For example: This often happens when integrating a 3rd party into WordPress that creates its own pages that WordPress doesn't recognize. Or I need more nuanced classes for the site design I'm creating. To change the look of these pages in a way that the styles are scoped just to that page, we need a way to target just that page or category of pages.