H2S56: Basic CSS.syntax-lib:

H3S1: CSS-architecture<Turing>:

Hu: The planning of CSS-architecture is inseparable from one’s design–sense: <WP.MIC-H2S2> Obviously, coherence is needed # and this can be enabled by # the inclusion of an external | CSS-file that can included on multiple documents, that are all expected, to some extent, to have similar | ideas.

// analyze 2 chess games with same opening as analogy, from MIC, copy-paste

H4S1: Multiple.CSS-externals:

Hu: Multiple.CSS-externals can be kept # and loaded into the same document, or different documents, which are expected to have slightly | differing | styles.

H4S2: Local.CSS-overrides:

Hu: Internal and in-line CSS can be added, to each page, to add special | customizations, that are only | relevant to that page.

H4S3: HTML.control-component:

Hu: While CSS tells us how each | tag, such as h1-8, should look, we still need to choose which text is tagged with which tag, and this is controlled in HTML. Most of the nuance on the page # will come from this HTML-control, but bear in mind that:

H4S4: CSS.fine-tuning:

Hu: At the most granular–level, CSS can be applied, on a tag-by-tag basis, to very finely tune a specific | HTML-tag, with just as many parameters.of-change, as the external.

H3S2: CSS.form-styling:

H3S3: CSS.for-responsiveness:

Hu: Responsiveness is a built.in-feature of CSS, and has been around, since its birth<1996, Wikipedia> Responsiveness is a natural | consequence of accounting for proportional | scaling, using % to define width, rather than px, and keep in mind, responsiveness generally applies to width, since our eyes define absolute limits for height #, and so, it’s typically not the font height that changes, as the screen becomes smaller, but simply, the number of words that are displayed, per line<Turing!>

H3S4: CSS.align-padding,margins:

H3S5: CSS for dynamic interactions:

A nice interaction from: https://timeline.coldplay.com/

Hu: Based on live-Inspect, while playing with the left and right | scroller, the state of div class = “flickity-viewport” varies based on an HTML-event “is-pointer-down”<Mozilla–JS>; a variety of CSS-values is changed by a JS-function that is triggered by this HTML.event-state, but there is also a drag, and a degree component as well. The JS-function is found earlier, in one of about 80<script>tags that Coldplay has on this page.

// dynamic state:
left: 0px; transform: translate3d(-58.89%, 0px, 0px);
// static state:
left: 0px; transform: translateX(-58.33%);

Hu: There is an acceleration | component to the movement, such that it continues if the drag is terminated while the scroller maintains some momentum, and any time it has momentum, translate3d is the function, when it is completely stopped<MIC>, it is translateX; both operate based on a %, rather than em-px. transform is a keyword that specifies | movement.

CM-H4S1: Absolute and relative positioning:

Hu: Relative to this local | field, absolute positioning is the transformation of the entire block, while relative is which elements are visible, at any given time, since the total | width can exceed the screen width, as well as the px-position<Turing>All the sub-elements, the individual album covers, titles, and dates, are nested under the main transform, while some auxiliary aspects, such as a value of “aria-selected”<a-r>, and style = “position: absolute; left: 116.67%; opacity: 1;” corresponds to the relative position of the sub–element within the bulk<Turing>

Aria-selected: the true state of which, and there can only be<2:23>one determines the assignment of class = homepageAlbumButton box is-selected to the div # There are multiple | vectors of styling | control as established by both an inline | style and an internal assignment of class, which allows the style for the div to be controlled psuedo-remotely from<head><style><Turing>