GarsGuide to CSS

CSS Introductions

Resources that give an introduction or overview of CSS.

Cascading Style Sheets home page
https://www.w3.org/Style/CSS/

Cascading Style Sheets home page by W3C, the World Wide Web Consortium. This page provides a definition of CSS, and has links to standards specifications and drafts, news about CSS, resources on learning CSS, and related information.

ALMANAC
https://css-tricks.com/almanac/

Reference guide to CSS features from CSS-Tricks. This guide defines CSS properties and selectors and explains how to use them.

CSS Cheat Sheets

Quick reference guides to the main features and characteristics of CSS.

The Mega CSS3 Cheat Sheet Infographic
https://makeawebsitehub.com/css3-mega-cheat-sheet/

Infographic by Jamie Spencer showing the latest features of CSS3. It lists both new and old CSS properties and selectors. This cheat sheet can be viewed online or downloaded.

2016 CSS Cheat Sheet Infographic
https://makeawebsitehub.com/css-cheat-sheet/

Infographic by Jamie Spencer showing the latest CSS features as of 2016. This cheat sheet can be viewed online or downloaded.

CSS Cheat Sheet
https://overapi.com/css

Cheat sheet showing names of CSS and CSS3 properties, attributes, plus additional resources. Each item in this cheat sheet is a link to a page with more detailed information.

CSS2 Cheat Sheet
https://www.cheatography.com/davechild/cheat-sheets/css2/

This CSS2 cheat sheet is one example of the many CSS cheat sheets available from Cheatography.

Cheat Sheets Matching "CSS"
https://www.cheatography.com/explore/search/?q=CSS

This is the complete collection of cheat sheets from Cheatography matching the search term "CSS". These cheat sheets were submitted by various users.

CSS CheatSheet
https://htmlcheatsheet.com/css/

Interactive CSS cheat sheet from HTML CSS JS. This cheat sheet allows you to test your HTML and CSS code right on the page.

CSS Reference Guides

Resources that organize and document CSS features and syntax via explanations, charts, and tables.

CSS Reference
https://www.w3schools.com/cssref/index.php

W3Schools reference guide to CSS including CSS3. Lists CSS properties in alphabetical order with links to detailed information about each property.

CSS reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS reference guide from the Mozilla Developers Network. It provides an index of standard CSS properties, pseudo-classes, pseudo-elements, data types, and "at"-rules organized alphabetically by keyword. Clicking on any keyword displays a page with details about that keyword.

CSS Tutorials

Step by step guides to the features and syntax of CSS.

CSS TUTORIAL - STARTING WITH HTML + CSS
https://www.w3.org/Style/Examples/011/firstcss

Short CSS tutorial from W3C. Intended for beginners, it explains just enough to create a simple web page using HTML and CSS. Has links to follow to gain a deeper understanding of CSS and HTML.

CSS Tutorial
https://www.w3schools.com/css/default.asp

CSS tutorial from W3Schools. Has chapters covering most aspects of CSS.

CSS first steps overview
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

Basic CSS tutorial from Mozilla Developers Network introducing CSS concepts and syntax.

Learn CSS
https://www.w3docs.com/learn-css.html

Basic CSS tutorial from W3docs offering explanations and examples. Allows you to test the effects of various CSS styles and see for yourself how they work and what they look like.

Cascading Style Sheets articles and tutorials
https://www.w3.org/Style/CSS/learning

Articles and tutorials about CSS from W3C in English and other languages.

CSS Tools

Software tools (or collections of tools) to help you read, understand, or use CSS to format web pages.

Killer Collection of CSS Resets
https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/

Collection of CSS resets from Perishable Press. A CSS reset removes default styling from page elements letting you start fresh with only the attributes you choose to apply.

CSS Stress Testing and Performance Profiling
https://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Description of a tool to determine the cause of CSS performance bottlenecks. Provides a link to access the completed code on GitHub.

Can I use
https://caniuse.com/?cats=CSS&statuses=all

This tool provides browser support information showing which CSS features work on which desktop and mobile web browsers.

The ultimate CSS tools for web designers
https://www.cssmatic.com/

CSSmatic is a collection of CSS tools made by developers for developers.

Button Generator
https://css3buttongenerator.com/

Button Generator by css3buttongenerator.com allows you customize a button using CSS. It allows you to vary the characteristics of a button, then review and copy the CSS code.

Interactive CSS Grid Generator
https://grid.layoutit.com/

Allows you to create your own CSS Grid Layouts automatically. Define the grid, select the areas, and get the code. Also includes support for IE 10 and 11.

CSS Gradient Generator
https://www.cssportal.com/css-gradient-generator/

Produces CSS Gradient code using a graphical user interface. Works in all browsers that support CSS3. Produces code for linear gradients, radial gradients, and can import existing CSS gradient code to edit.

animista - an on-demand CSS animations library
https://animista.net/

Animista allows you to tweak and test a set of of pre-made CSS animations. When you achieve the effect you want, you can download the CSS.

CSS Tools: Reset CSS
https://meyerweb.com/eric/tools/css/reset/

Explanation of CSS resets. Includes a worked example that you can modify and copy for your use.

CSS Portal
https://www.cssportal.com/

Examples of CSS tools and CSS generators from CSS Portal.com. Also includes links to additional CSS and HTML resources.

CSS Selectors

Resources that define, list, or explain how to use the CSS selectors that determine the HTML elements to be styled.

Selectors Level 3
https://www.w3.org/TR/selectors-3/

Official W3C specification for selectors in CSS. Lists changes made since CSS2 and describes CSS3 selectors.

CSS Selector Reference
https://www.w3schools.com/cssref/css_selectors.php

Table of CSS selectors, part of the larger W3Schools CSS reference guide. This table shows the selector name, an example of the selector, and a description of the example used. Each selector name is a link to a more detailed description of that selector.

Beginner Concepts: How CSS Selectors Work
https://css-tricks.com/how-css-selectors-work/

Explanation of how selectors work in CSS. Discusses selecting by ID, class, tag, attribute, pseudo selectors, and selector combinators.

Meet the Pseudo Class Selectors
https://css-tricks.com/pseudo-class-selectors/

Pseudo class selectors are CSS selectors with a colon preceding them, like "a:hover". This reference defines the pseudo class selectors, discusses their use, and in most cases, gives an example using them.

Child and Sibling Selectors
https://css-tricks.com/child-and-sibling-selectors/

Article from CSS Tricks discussing child, sibling, and descendant selectors. It describes the difference between children and descendants, how to use the adjacent combinator, the general sibling combinator, and discusses browser support for these CSS selectors.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
https://css-tricks.com/pseudo-element-roundup/

Roundup of some of the capabilities of CSS pseudo elements. Examples include: having multiple background canvases, expanding the number of shapes you can make with a single element, showing URLs of links in printed web pages, clearing floats, simulating "float: center", labeling blocks of code with the language they are written in, and creating a set of icons without using images.

CSS Properties

Resources that define, list, or explain how to use CSS properties like color or text alignment.

CSS Properties
https://www.w3schools.com/cssref/index.php

Table of CSS properties provided by W3Schools. The table lists CSS properties in alphabetical order by property name, and has a brief description of the property. Each property name is a link to a more detailed description of that property.

CSS reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and "at"-rules from the Mozilla Developers Network. Each property name is a link to a more detailed description of that property.

CSS Functions

Resources that define, list, or explain how to use the CSS functions that determine values for CSS properties.

CSS Functions Reference
https://www.w3schools.com/cssref/css_functions.php

Table of CSS functions from W3Schools, part of their CSS Reference. It shows the function name and a brief description of the function. Each function name is a link to a more detailed description of that function.

CSS Functions
https://www.quackit.com/css/functions/

Alphabetical list of functions included in CSS3. The functions are listed in three columns on a single page. The name of each function is a link to more detailed information and examples of the function.

CSS Functions Complete Reference
https://www.geeksforgeeks.org/css-functions-complete-reference/

List of CSS functions, in two columns on a single page. The name of each function is a hyperlink to a page with more detailed information.

8 Clever Tricks with CSS Functions
https://www.sitepoint.com/8-clever-tricks-with-css-functions/

Eight innovative and practical uses for CSS functions. Each function has an introduction and explanation. This is followed by an example demonstrating how to use the function.

Trigonometric functions in CSS
https://web.dev/css-trig-functions/

Description and examples of using Trig functions in CSS to achieve rotation and circular motion effects.

CSS Units

Resources that define, list, or explain how to use the CSS units that define lengths and widths.

CSS Units
https://www.w3schools.com/cssref/css_units.php

Explanation and description of CSS units, part of the CSS Reference provided by W3Schools. Defines the relative and absolute units that describe length, and has a table showing browser support for each.

CSS values and units
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Mozilla Developers Network description of CSS values and length units. The units are numbers, percentages, absolute lengths, or relative lengths, each presented in separate tables.

CSS Entities

Resources that list or explain how to use CSS entities (names or numbers that represent characters).

CSS Entities
https://www.w3schools.com/cssref/css_entities.php

Description of CSS entities, part of the CSS Reference provided by W3Schools. Displays a table showing the entity character, the CSS hexadecimal entity value, the entity name, and a link to a worked example of that entity.

Character Entities for HTML, CSS and Javascript
https://oinam.github.io/entities/

Table of character entities and how to code them in CSS, HTML, and JavaScript.

CSS Samples and Examples

CSS code demonstrating what can be done with CSS supplemented by HTML and JavaScript. The examples showcase techniques you can use and demonstrate how to construct complete applications.

25 cool CSS animation effects and how to create them
https://www.creativebloq.com/inspiration/css-animation-examples

25 CSS animations illustrating what CSS can do. Each animation has a worked example, an inset showing the essential CSS code.

Understand Disney
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation

Discussion of Disney's 12 principles of animation. Although Disney's original advice was for cartoon animators, the advice is just as sound for animating a website. Each animation principle is explained and includes a video illustrating the principle.

The Shapes of CSS
https://css-tricks.com/the-shapes-of-css/

Instructions to create a variety of shapes using only CSS. Many different shapes are shown including rectangles, circles, stars, eggs, pointers, crosses, diamonds, and more.

Drawing Images with CSS Gradients
https://css-tricks.com/drawing-images-with-css-gradients/

Explanation of how to create a variety of images using HTML and CSS. Many shapes are shown including squares, circles, trapezoids, and more. The author then shows how to combine these simple shapes to create more complex images such as umbrellas, cell phones, and an animated radar screen.

Faking
https://css-tricks.com/float-center/

Technique to allow text to flow around images as though "float: center" existed (it doesn't). This technique uses floated pseudo element placeholders to achieve what is otherwise unachievable.

Different Stylesheets for Differently Sized Browser Windows
https://css-tricks.com/resolution-specific-stylesheets/

Variety of techniques to adjust the display based on screen width using HTML, JavaScript, and jQuery.

CSS Media Queries & Using Available Space
https://css-tricks.com/css-media-queries/

Technique to use CSS media queries to adjust the display based on screen width. Uses only a single style sheet for all the different screen sizes.

Doing it with Style
http://www.cssplay.co.uk/

Collection of CSS documents demonstrating what CSS can do. The examples achieve their effects via CSS without JavaScript or any other programming language.

CSS Related Information

Supplemental information and additional resources related to CSS.

CSS current work & how to participate
https://www.w3.org/Style/CSS/current-work

Index of all completed specifications and drafts by the CSS Working Group. Includes links to what's new, a table of CSS specifications on topics of CSS at various stages of development, and an invitation to join the discussion on the development and future of CSS.

Media Queries Level 4
https://drafts.csswg.org/mediaqueries/

W3C document defining and introducing media queries and media features. It explains the syntax of media queries and includes sections describing viewport/page dimensions media features, display quality media features, color media features, and interaction media features. It has an appendix listing deprecated media features.

Media Queries Level 3
https://www.w3.org/TR/mediaqueries-3/

W3C specification from April 2022 describing media queries - what they are and what they are used for. It defines the syntax of media queries, discusses error handling, and includes examples for using media queries.

Using media queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Explanation of media queries from the Mozilla Developer Network. It describes media queries, defines the syntax, lists media types and media features, describes logical operators for media queries, explores how to target various media types and media features, shows how to create complex media queries, and describes syntax improvements in Level 4.

CSS Default Values Reference
https://www.w3schools.com/cssref/css_default_values.php

Table of default CSS Values for HTML Elements from W3Schools. The table shows the HTML element and default CSS value. Most entries link to worked examples to further your understanding.

CSS Color Module Level 4
https://drafts.csswg.org/css-color/

Explanation of color values and properties from the W3C Working Group. This specification includes an introduction, an explanation of color and how it is represented, notes on conversion from one color representation to another, and an index of terms defined by this specification.

< color >
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Explanation of color (as used in CSS) from the Mozilla Developer Network. They define color, show various ways to specify color, and show browser compatibility for color features and notations.