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.
A number of CSS3 properties that you can use unprefixed or with just a single vendor prefix.
Two different ways of creating a full-width navigation bar with vertically centered links whose entire height is clickable.
A responsive technique for making data tables (or any other element) wider than their parent horizontally scrollable.
Giving an element a height in percent may not do what you expect if its parent does not have an explicit height set.
Images that have dimension attributes in the HTML will retain their height when scaled down with CSS unless you add a height:auto declaration.
If you start seeing mysterious dots rendered on top of positioned elements in Firefox, check your text-overflow and z-index properties.
Sometimes you want to use different images when viewing a web page on screen and when printing it. One way of doing that is to use CSS generated content.
When you use an icon or other graphic instead of text for buttons, make sure there is real text for users who cannot see the image.
A different approach to using conditional comments to add class names for targeting CSS at different versions of Internet Explorer.
A few examples of how you can create a non-rectangular drop shadow that will adapt to the width of the element it is applied to.
If you need to give users the choice to disable responsive layout, here is one way of implementing a switch to toggle it off and on.
When you need to center a floated element horizontally you can’t say “float:center”, but fortunately there are several other ways of solving the problem.
Applying border-radius or box-shadow to fieldset elements that have a legend child element causes strange rendering in some browsers unless you float the legend element.
Using percent to position a background image has its quirks. A workaround is to use calc().
All browsers do not handle vertical scrollbars the same way when calculating the width to match in a media query.
Under some circumstances using a placeholder attribute on text input fields can cause overflow problems in WebKit-based browsers.
Web browsers on small iOS devices auto-zoom many form controls on focus. Here’s why and what you can do about it.
How to use CSS only to customise radio buttons and checkboxes.
It can be useful to know if images are enabled in the browser, so that you can adjust your CSS and JS to make sure that the page is still usable even if images aren’t loaded.
Internet Explorer doesn’t line wrap text in legend elements, which can cause overflow and layout-breaking issues. Here’s how to fix it.