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.
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.
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.
Page navigationPage 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 | Page 8 | Page 9 | Page 10 | Page 11 | Page 12 | Page 13 | Page 14 | Page 15 | Page 16 | Page 17 | Page 18 | Page 19 | Page 20 | Page 21
Subscribe / follow
- Senior PHP Engineer at Sweden Unlimited (New York, New York, Ne, US)
- Creative Web Designer at ADP / Autotegrity (Cambridge, MA, Ma, US)
- Senior Java Developer- eCommerce Practice at arvato Systems North America (New York, NY; San Francisco, CA; Chicago, IL, Il, US)
- Software Engineer at Avant Credit (Chicago, IL, Il, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost