Directory of CSS Resources

Home > Kids and Teens > Computers > Website Design > Coding > CSS

A style sheet language used for describing the look, formatting and behaviour of documents and documents elements.

Resources in This Category

• Absolute Centering in CSS

  http://codepen.io/shshaw/full/gEiDt
  Techniques, tips, tricks and explanations on centring and aligning elements on layouts.

• Animating CSS Shapes with CSS Animations & Transitions

  http://sarasoueidan.com/blog/animating-css-shapes/
  Creating a very basic "shape-shifting" layout.

• Can I Use...

  http://caniuse.com/#cats=CSS
  Compatibility tables for support in desktop and mobile browsers. Not all browsers support all the CSS features.

• Colour Code

  http://colourco.de/
  A tool to explore and find colours. Features controls for swatches in schemes, change of hue, lightness, saturation, export as .less or png.

• Compass

  http://compass-style.org/
  Open-source CSS Authoring Framework.

• CSS

  http://docs.webplatform.org/wiki/css
  Articles and tutorials, standards, selectors, properties, functions, learning material.

• CSS Drive

  http://www.cssdrive.com/
  Gallery organized into categories, such as two column, three columns, and business. Includes code examples.

• CSS drop-shadows without images

  http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  Samples of shadows.

• CSS Lint

  http://csslint.net/
  Online CSS lint with options to choose which errors and warnings to test for.

• CSS Princess

  http://cssprincess.com/
  Features a categorized gallery of tableless website designs made by or for girls. Users can rate and comment on the designs.

• CSS-Tricks

  http://css-tricks.com/
  Dedicated to the world of CSS and related technologies. Snippets, videos, tricks and tutorials.

• CSS3.info

  http://www.css3.info/
  Newest developments in CSS based webdesign.

• css3files.com

  http://www.css3files.com/
  Comprehensive overview of the latest CSS3 properties to look up and learn.

• CSSmatic

  http://www.cssmatic.com/
  Generators for gradients, border radius, noise texture, box shadow.

• CSSWinner

  http://www.csswinner.com/
  Showcase of beautiful works.

• eCSSpert

  http://www.ecsspert.com/misc/about#home
  CSS experiments. Showcase of popular logos recreated using pure HTML and CSS3. CSS patterns and tools.

• Font Squirrel

  http://www.fontsquirrel.com/
  Browse hand-picked free fonts for graphic designers organized by classifications, tags, family size and popularity. Includes a tool for uploading your own fonts and convert these in various web formats.

• Google Fonts

  http://www.google.com/fonts
  Browse and preview the collection, with customizable options and ready to use CSS.

• Gridinator

  http://gridinator.com/
  Creates grids with customizable options then spits out the HTML and CSS templates.

• Learn CSS Layout

  http://learnlayout.com/
  Teaches the CSS fundamentals that are used in any website's layout.

• Less.js

  http://lesscss.org/
  Extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

• MDN: CSS Tutorials

  https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
  Numerous tutorials about CSS. Some are aimed at complete beginners, while others present complex features to be used by more experienced users.

• Myth

  http://www.myth.io/
  A preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow specification approval. It's like a CSS polyfill.

• Page Transitions

  http://tympanus.net/Development/PageTransitions/
  A collection of page transitions with CSS animations. Has a selector to chose transition effects.

• Pure

  http://purecss.io/
  A set of small, responsive CSS modules that you can use in every web project. Base, grids, forms, buttons, tables, and menus.

• PX to EM

  http://pxtoem.com/
  One-click PX/EM/%/PT conversion tables with a custom conversion calculator.

• Sass: Syntactically Awesome Style Sheets

  http://sass-lang.com/
  An extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more. It helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

• Sidebar Transitions

  http://tympanus.net/Development/SidebarTransitions/
  Example transition effects for elements that enter off canvas.

• Smashing Magazine: CSS

  http://www.smashingmagazine.com/tag/css/
  Articles and news on CSS and related technologies.

• SpinKit

  http://tobiasahlin.com/spinkit/
  Collection of simple loading spinners animated with CSS.

• Unsemantic CSS Framework

  http://unsemantic.com/
  A fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.

• YAML CSS Framework

  http://www.yaml.de/
  A modular CSS framework for flexible, accessible and responsive websites, focussed on device independent screen design and provides bullet-proof modules for flexible layouts.

Related Categories

• Home > Kids and Teens > Computers > Website Design > Graphics
• Home > Kids and Teens > Computers > Website Design > Coding > JavaScript
• Home > Kids and Teens > Computers > Website Design > Coding > HTML

 

Home > Kids and Teens > Computers > Website Design > Coding > CSS

 

---

 

Thanks to DMOZ, which built a great web directory for nearly two decades and freely shared it with the web. About us