Category:Cascading Style Sheets

From perpendicular angel knowledgebase
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.


General education and tutorials

How to Learn CSS by Rachel Andrew for Smashing Magazine covers each of the following topics with links to more in-depth resources. It's a tutorial's tutorial:

  • Language fundamentals
  • Selectors
  • Inheritance and the cascade
  • The box model
  • Normal flow
  • Formatting contents
  • Being in or out of flow
  • Layout
  • Alignment
  • Sizing
  • Responsive Design
  • Fonts and typography
  • Transforms and animation
  • Using cheat sheets

CSS Diner gamifies learning CSS.

Animation

Animation is a design technique for drawing the eye to a specific piece of content on the page. CSS allows for designers to animate elements on the page efficiently and with little performance overhead.

Training classes

Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors on her website

Tools

Cascades and Specificity

Also known as "why is this thing here overriding that thing over there?!?"

Tools

Colors

According to this tweet by Eric Meyer:

FUN FACT: in CSS and SVG, 'gray'/'grey' (#808080) is darker than 'darkgray'/'darkgrey' (#A9A9A9) because that’s how they were defined in HTML and one version of the X11 color system, respectively. When the two systems were merged, nobody wanted to touch the underlying values.

CSS Custom Properties (CSS Variables)

Focus

Gradients

Layout

CSS Grid is hands-down the most effective recent way to do layout.

Flexbox is a close second, but only works in rows or columns, giving CSS Grid the edge in complex layouts.

Responsive Design is a layout tool that predates CSS Grids.

Grid Systems predate both Responsive Design and CSS Grids. While they're not exactly the way that we'd do design today, knowing about the visual design elements, planning a desktop layout with a grid system can help figure out a visual design system even today.

Naming best practices

Sticky

Visual Design

Stripes

Speech Bubbles

Pages in category "Cascading Style Sheets"

The following 3 pages are in this category, out of 3 total.