#A List Apart CSS Tutorials
- Sliding Doors of CSS
- http://alistapart.com/article/slidingdoors
- How to use images instead of CSS to acommodate variable width text to create custom shapes as well as bottom padding to obscure a bottom rule.
- clicky
- Sliding Doors of CSS, Part II
- http://alistapart.com/article/slidingdoors2
- Compensating for flexible width tabs workarounds for low IE versions, as well as using image tilesets.
- clicky
- Suckerfish Dropdowns
- http://alistapart.com/article/dropdowns
- Using the :hover CSS event to toggle the display of an element, as well as using Javascript to add workaround classes.
- clicky
- CSS Design: Custom Underlines
- http://alistapart.com/article/customunderlines
- Creating custom underlines using the background-image: property and judicious use of padding for one line links (and most anything else)
- clicky
- JavaScript Image Gallery
- http://alistapart.com/article/imagegallery
- Creating a quick Javascript Image Gallery using onclick function binding and links to change attribute of an img element.
- clicky
- CSS Design: Creating Custom Corners & Borders
- http://alistapart.com/article/customcorners
- Using chopped up images to style content of a site instead of border, border-radius, box-shadow and background-color etc.
- clicky
- CSS Design: Creating Custom Corners & Borders Part II
- http://alistapart.com/article/customcorners2
- Using relative positioning to compensate for elements overflowing white on to a gradiented background
- clicky
- Accessible Pop-up Links
- http://alistapart.com/article/popuplinks
- Creating accessible pop up links by using either Javascript, or, if unsupported, opening the link in a new tab.
- clicky
- Power To The People: Relative Font Sizes
- http://alistapart.com/article/relafont
- Using Javascript to change the CSS source file being referenced in order to change the font size of a page dynamically. Also saves the font size in a cookie to be loaded the next time the user comes to the page to remember the font size set.
- clicky
- How to Read W3C Specs
- http://alistapart.com/article/readspec
- Article detailing strategies and advice for using and understanding the W3C specifications. Also included and details the Bachus Naur Format for algorithm description.
- Complex Dynamic Lists: Your Order Please
- http://alistapart.com/article/complexdynamiclists
- Creating complex dynamic lists using Javascript. Uses CSS to hide elements far off to the left of the screen and CSS to change classes on a click to show the next tier of the menu.
- clicky
- Pocket-Sized Design: Taking Your Website to the Small Screen
- http://alistapart.com/article/pocket
- Article detailing designing for the mobile web. This includes tips for making the site faster and more data friendly such as compressing images, explicitly declaring seperate files for CSS / JS such that they can be cached. In addition to this, reducing the site to a single column as well as limiting the maximum width improves accessibility as well as item visibility.
- Thinking Outside the Grid
- http://alistapart.com/article/outsidethegrid
- An article advising moving to CSS positioning instead of outright table layouts and advertising some of the advantages this brings.
- 12 Lessons for Those Afraid of CSS and Standards
- http://alistapart.com/article/12lessonsCSSandstandards
- An article with practical advice for using CSS in projects and making as little a headache for yourself as possible.
- Version Targeting: Threat or Menace?
- http://alistapart.com/article/minorthreat
- An article detailing the introduction of version rendering engine targeting in IE7, and explaining just how this changed how sites rendered.
- Responsive Web Design
- http://alistapart.com/article/responsive-web-design
- A brief introduction in to responsive web design and the use of media queries. Briefly explains what they do, as well as how to use them to import different stylesheets depending on the width of the page.
- Return of the Mobile Stylesheet
- http://alistapart.com/article/return-of-the-mobile-stylesheet
- An article detailing practices used to identify mobile browsers based on Media Queries and tags in the CSS import as defined in HTML 4. In the case of this failing, a discussion of Javascript alternatives as well as Apache MOD_REWRITE rules takes place.
- Fix Your Site With the Right DOCTYPE!
- http://alistapart.com/article/doctype
- Short introduction to Doctypes, their uses and functions and, more importantly, how to do them correctly; both by specifying the html version correctly and referencing back to the W3C correctly.
- Zebra Tables
- http://alistapart.com/article/zebratables
- Using both procedural CSS to give each row in the table a class as well as Javascript to loop through the unordered list and apply styles to alternating rows. CSS3's nth child is briefly mentioned as well.
- clicky
- Say no to Faux Bold
- http://alistapart.com/article/say-no-to-faux-bold
- Using the @font-face rules to fix Faux Bolding in websites as well as illustrating slanting and faux bolding, with specific reference too google fonts.
- clicky
- CSS3 bling in the real world
- http://alistapart.com/article/css3-bling-in-the-real-world
- Using CSS3 to create a banner floating in the middle of the page, and a bit of a show-off as to what CSS3 has introduced to styling such as text-shadow, box-shadow, rgba colours and linear gradients.
- clicky
- CSS Floats 101
- http://alistapart.com/article/css-floats-101
- Mostly refreshing CSS:float. Overflow:hidden also re-integrates floated elements back in to their container. An alternative to this is using the :after pseudoclass, but only if CSS3 is supported.
- base
- example f
- example i
- example k
- Understanding CSS Transitions
- http://alistapart.com/article/understanding-css3-transitions
- How to CSS3 transition, as well as judging what to use in case of needing the transitions regardless and which DOM element states (hover,focus, etc.) are a good idea to use to transition.
- clicky
- CSS Positioning 101
- http://alistapart.com/article/css-positioning-101
- Refresher on CSS positioning, with examples of static,fixed,absolute,relative and inherited positioning.
- static
- absolute
- fixed & inherit
- relative
- Supersize that background, please
- http://alistapart.com/article/supersize-that-background-please
- Using Media Queries to specify a background image and change the image based on the resolution of the HTML page. Also, makes the background image scale based on how the page is resized.
- clicky
- Faux Absolute Positioning
- http://alistapart.com/article/fauxabsolutepositioning
- How to implement a faked absolute positioning which is best used in a site which has been build around a grid system.
- clicky
- Accessible Data Visualisation
- http://alistapart.com/article/accessibledatavisualization
- How to create accessible and readable bar charts, which degrade gracefully to the point of having no CSS enabled at all. In addition to bar charts, timelines and sparklines are also discussed. -clicky -clicky
- Multi Column Lists
- http://alistapart.com/article/multicolumnlists
- Just how many different ways there are to style multi-column lists. The best approach seems to be to apply a class to each pseudocolumn and then style the list according to that.
- clicky
- Super-Easy Blendy Backgrounds
- http://alistapart.com/article/supereasyblendys
- How to properly create CSS gradients which work across browsers down to IE6.
- clicky
- clicky
- clicky
- CSS Sprites: Image Slicing's Kiss of Death
- http://alistapart.com/article/sprites
- Concept and practical demonstration of how to use image sprites in HTML & CSS, as well as an explanation of using them with different shapes.
- clicky