Cascading Style Sheets are used to define the presentation layer of websites. How CSS works is not always self-evident, so many of these articles explain various aspects of using CSS.
Different browsers on different platforms insert varying amounts of whitespace around text fields. How to remove that whitespace is not completely intuitive, but possible.
Instead of repeating property values in your CSS, you can use the inherit value to make an element inherit a property’s computed value from its parent.
Wrapping advanced CSS in a simple media query rule saves you from worrying about it causing problems for older browsers.
Be careful when using @import rules in CSS files that are concatenated before being deployed.
Using a select element for navigation in narrow viewports is not an ideal solution. Here is an alternative technique that uses real links and is fully stylable.
CSS generated content is announced in some - but not all - screen readers, so use with care.
There is a clever script that fixes the iOS orientation change zoom bug. Here is a reminder about a couple of issues you may run into when using it.
As text columns become narrower, the risk of long words overflowing increases. Luckily you can use the hyphens and word-wrap CSS properties to prevent it.
Don’t add boilerplate code, polyfills, shivs, frameworks and other things that increase the weight of your site unless you actually need it.
Images that have a CSS max-width, a width attribute in the HTML, and are children of a floated element that has no explicit width set may be invisible in IE8.
It used to be possible to apply any CSS to visited links. This has privacy issues, so most browsers have implemented styling restrictions and only allow colours to be changed.
If you’re using width:100% to undo a previously set width on a block level element, you should probably be using width:auto instead. Here’s why.
When applying CSS to buttons there are some odd behaviours in WebKit browsers for iOS. Luckily there are at least two ways of working around them.
Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.
A way of styling the closed state of select elements without sacrificing accessibility.
When you use the table-related display properties of CSS to get the display properties of a table, some screen readers will treat the non-table markup as a real table.
In many situations when we tend to use links to trigger actions we should really be using buttons. Here’s how to use real button elements and make them look like links.
Many developers expect screen readers to ignore visual styling of semantic HTML elements. They mostly do, but with list items their behaviour is hit-or-miss.
The Firefox default stylesheet uses the !important keyword when declaring line-height for text inputs. You can’t override this from an author stylesheet, so a workaround is necessary.