QUOTE(bhs67 @ Apr 17 2024, 05:20 PM)
1) It appears that
CODE
<body mode="maker">
is the code to assign the name "maker" to the <body>?
To clarify the HTML terminology: the example above has an
attribute called MODE, with a
value of "maker". But as already mentioned, no MODE attribute exists in the HTML specification (there is an INPUTMODE attribute, but that's likely not what you want).
QUOTE
And "mode" is the way to assign that name?
No. But I'm not sure what you want to achieve with this value "maker"? You can certainly give the BODY element a CLASS attribute with the value "maker":
CODE
<body class="maker">
...but since there's only one BODY element in every HTML document anyway, it's normally enough to just use the BODY selector in the CSS.
QUOTE
2) It appears that
CODE
<div class="maker">
assigns that <div class> to the the <body> named "maker"?
No. What you describe reminds me a little of
Custom properties/variables, which I don't know much about.
QUOTE
3) Does adding the "." to the name "maker"
CODE
.maker
- tie this code to the body named "maker"?
The period sign "." makes it a
CLASS selector. If two HTML elements use the same CLASS attribute value they get the same styling:
CODE
.maker {
color: blue;
background: white;
border: solid;
padding: 1em;
}
.foo {
color: red;
background: yellow;
}
</style>
</head>
<body class="maker">
This BODY text should be blue.
<div class="foo">This DIV text should be red.
<div class="maker">This nested DIV text should be blue.</div>
</div>
(without its CLASS attribute value "maker", the nested DIV would inherit the styling of its parent DIV).
QUOTE
4) It's not clear to me the difference between
CODE
.maker {...}
and
CODE
.maker > div {...}
The ">" character in the second example is called a
Child combinator, and is used when you want the CSS rule to match only DIVs that are
direct children of an element with the CLASS "maker". If it doesn't have to be a
direct child you can use the Descendant combinator (a space between two selectors):
CODE
.maker div {...}
