MaggieAppleton
commented
6 years ago Primary Tech – CSS
If needed, a fantastic explanation of CSS can be found on this reddit thread
And a more specific explanation of selectors on the W3 Documentation
Previous CSS Illustrations
Main Concept
A system or network of visual styles applied to a structure
A set of CSS selectors pointing to HTML blocks that determine how they're visually styled – colour, fonts, grid layout. Layers of different styles applied over each HTML element.
Keywords: Hierarchy, selection, styles, appearance, specificity, targeting
Ideas to Start With
-
Glue, tape, holding two things together, staples, magnets,
-
Arrows, connections across space, wires, string
-
Two things with the same label, tag, marker
-
Visual covering over a structure
- Different colours of CSS paint being applied to the interior walls of a room or the outside of a house
- Roof tiles, window dressing, paneling
- Painting... easter eggs, brushes, pots and buckets of paint, paint swatches, paint by numbers
-
Interior decoration of a living room/office
-
Fashion, makeup, decoration
-
Mix and match building visual systems
- A small neighbourhood of houses with different varieties of roofs, doors, house paint colours. With a side section/menu showing a variety of roof shingles, paint bucket, garden types. Like the neighbourhood builder in the Sims.
Primary Tag
CSS
https://egghead.io/courses/css-selectors-in-depth
Cascading style sheet (CSS) selectors are the glue that connect styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. We are going to start with basic selectors and work our way through more complex classification of selectors explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.