AtoZ CSS

As we approach the end of the alphabet, and the end of the first season of AtoZ CSS, there aren’t many properties, values or concepts that start with the letter X.   There are however a series of transform values that allow elements to have their visual co-ordinates changed along the x-axis to create complex and interesting visual details on the page.   In this episode we’ll learn all about:   The CSS transform property Moving elements with translate and translateX The performance benefits of using translate over other methods

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.    In this episode we’ll learn about:  Paged media and Widows and Orphans

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: All about the `@font-face` at-rule And how to control typography with font stacks and `unicode-range`

Text is everywhere. Without it, the web wouldn't be such a valuable resource. 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. As there are so many things to cover, this episode will demo a selection but in part just act as an overview of the tools in the box.   In this episode we cover   `text-align` `text-decoration` `text-indent` `text-overflow` `text-rendering` `text-shadow` `text-transform` `font-family` `font-size` `font-style` `font-weight` `font-variant` `font` shorthand `line-height` `letter-spacing` `word-spacing` `word-wrap` `white-space`

When using new or experimental CSS, it can be useful to know if the browser supports the features we’re writing code for.   Feature detection is often done in JavaScript with tools like Modernizr but in some browsers, we can now detect capabilities from CSS.   The @supports rule allows us to conditionally apply styles for features that are or are not supported. In this episode we’ll learn all about Browser support for various CSS features How the @supports at-rule works and how to provide alternative styles for unsupported features

:required is a state based pseudo class that can be useful when styling forms.   Combined with :valid and :invalid we can have a lot of control over providing visual feedback to users without having to write lots of JavaScript.   In this episode we’ll learn:  How to use HTML5 form validation Using :required and other state-based pseudo classes A creative technique for displaying validation messages to users

Single and double quotes appear frequently when writing code.   However, when displaying any quoted text like the `q` element or when using apostropes we should use smart quotes.   These are often added by the browser, but we can control their appearance and the choice of character from CSS.   In this episode about we'll learn all about:   the difference between dumb quotes and smart quotes the different styles of quotes used internationally and the somewhat under-used CSS `quotes` property

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.   In this episode we'll learn about:  The five different pseudo elements, generating content like text, images attribute values and counters from CSS and how to make complex shapes with minimal markup

The opacity property specifies how opaque an element is. It takes a value ranging from 0 to 1 where 0 is completely transparent and 1 is completely opaque. In this practical episode we'll look at how the opacity property works - including some of it's downsides - and then create a CSS only fading slideshow using `opacity` and what we learned about `@keyframes` in Episode 11.