CSS
!Anki Books uses CSS with no framework and instead uses the power of native cascade layers (eek)
Cascading Stylesheets is a stylesheet language mostly used in web development to style HTML and other dialects of SVG. The most important concept in CSS (related to the first word in CSS) is probably the {{c1::CSS cascade}} which begins with the three origins of stylesheets: {{c2::user agent stylesheets}}, {{c3::author stylesheets}}, and {{c4::user stylesheets}}. A web developer writes CSS in {{c1::author stylesheets}} which cascade over {{c2::user agent stylesheets}} by default. A user, maybe someone who has particular preferences or limitations, can use {{c1::user stylesheets}} to change the presentation of a web page cascading over {{c2::author stylesheets}}. If you limit yourself to considering the cascade in only the stylesheets that a web developer writes, the highest division of CSS that determines the cascade is the {{c1::cascade layers}}. {{c1::Specificity}} which has to do with CSS selectors and is thought of as tuple values similar to ones, tens, and hundreds places, becomes relevant when you are considering cascade in one single cascade layer.
Terminology of CSS
A CSS ruleset looks like this:
.p-1 {
padding: 0.25rem;
}The .p-1 is a class selector and specifies that an HTML element with "p-1" in its class attribute will have the declarations in the associated ruleset applied to those matching elements. The naming of CSS classes in Anki Books is heavily influenced by Tailwind because originally it was a Rails app scaffolded using the option for that CSS framework and was developed using it for about 7 months. In Tailwind, the CSS class p-1 is pretty much equivalent to the inline CSS attribute style="padding: 0.25rem;" and this adds a distance (equal to one-quarter of the font size in the root HTML element <html>) that surrounds the content to that element with the class. In the above code, the entire construct is a ruleset. padding is a CSS property, and 0.25rem is a property value denoting a length for that property. The entire CSS construct "padding: 0.25rem;" is a declaration. A ruleset can contain multiple declarations.
The padding CSS property
The padding is one of the boxes in the CSS box model. The CSS box model relates to how an HTML web page is presented visually as boxes that can be displayed as inline or block. With a typical block element like the HTML <p> element that semantically means paragraph, the padding is the box that surrounds the innermost box, the content box. The padding box is surrounded by a border box, which is then surrounded by a margin box. That outermost margin box can collapse on any side if it is adjacent to an element with greater margin there which is called margin collapsing. The exact form of the CSS box model can also depend on the box-sizing property. To say "padding: 0.25rem;" applies to an element specifies a padding on all four sides of the element's box equal in length to one-quarter of the font size of the root HTML element <html>.
The CSS box model
Boxes in CSS are a pretty hard topic relative to a lot of CSS and very important because every visible element on the web page is a rectangle. Sometimes web developers will apply "border: 1px solid red;" to every element on the page (selected by the universal CSS selector: *) to quickly see the boxes on the page. Every web element on the page has a content box surrounded by a padding box, that is surrounded by a border box, that is surrounded by a margin box.
Article notes
A web developer writes CSS in [...] which cascade over [...] by default.
A web developer writes CSS in author stylesheets which cascade over user agent stylesheets by default.
The most important concept in CSS (related to the first word in CSS) is probably the [...] which begins with the three origins of stylesheets: [...], [...], and [...].
The most important concept in CSS (related to the first word in CSS) is probably the CSS cascade which begins with the three origins of stylesheets: user agent stylesheets, author stylesheets, and user stylesheets.
[...] which has to do with CSS selectors and is thought of as tuple values similar to ones, tens, and hundreds places, becomes relevant when you are considering cascade in one single cascade layer.
Specificity which has to do with CSS selectors and is thought of as tuple values similar to ones, tens, and hundreds places, becomes relevant when you are considering cascade in one single cascade layer.
A user, maybe someone who has particular preferences or limitations, can use [...] to change the presentation of a web page cascading over [...].
A user, maybe someone who has particular preferences or limitations, can use user stylesheets to change the presentation of a web page cascading over author stylesheets.
If you limit yourself to considering the cascade in only the stylesheets that a web developer writes, the highest division of CSS that determines the cascade is the [...].
If you limit yourself to considering the cascade in only the stylesheets that a web developer writes, the highest division of CSS that determines the cascade is the cascade layers.