The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> What are the meanings of a mode name and .maker?
bhs67
post Apr 17 2024, 10:20 AM
Post #1





Group: Members
Posts: 6
Joined: 17-April 24
Member No.: 29,168
Segments of index.html:
CODE

<body mode="maker">
...
<div class="maker">


Segments of index.css:
CODE

.maker {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 460px;
  width: 400px;
}

.maker > div {
  display: flex;
  justify-content: space-between;
}


1) It appears that
CODE
<body mode="maker">
is the code to assign the name "maker" to the <body>? And "mode" is the way to assign that name?

2) It appears that
CODE
<div class="maker">
assigns that <div class> to the the <body> named "maker"?

3) Does adding the "." to the name "maker"
CODE
.maker
- tie this code to the body named "maker"?

4) It's not clear to me the difference between
CODE
.maker {...}
and
CODE
.maker > div {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Christian J
post Apr 17 2024, 02:13 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,678
Joined: 10-August 06
Member No.: 7
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 {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
bhs67   What are the meanings of a mode name and .maker?   Apr 17 2024, 10:20 AM
coothead   [indent] Segments of index.html: [code] <body...   Apr 17 2024, 11:11 AM
Christian J   1) It appears that [code]<body mode="make...   Apr 17 2024, 02:13 PM
bhs67   Thanks for the clarifications! I inadvertent...   Apr 18 2024, 08:29 AM
Christian J   Does this explain the use of mode? The JS above ...   Apr 18 2024, 09:41 AM
coothead   [indent] The JS above adds the same MODE attribu...   Apr 18 2024, 10:22 AM
Christian J   As a matter of interest, the body element does no...   Apr 18 2024, 11:36 AM
coothead   [indent] There might be special cases, such as us...   Apr 18 2024, 11:56 AM
Christian J   [quote name='Christian J' post='147142' date='Apr...   Apr 18 2024, 12:49 PM
coothead   [indent] No, I meant if you have multiple HTML do...   Apr 18 2024, 05:07 PM
coothead   As previousl pointed out, there is [b]NO HTML at...   Apr 18 2024, 09:28 AM
bhs67   I received this response from a Blockly forum: --...   Apr 23 2024, 08:56 AM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
4 User(s) are reading this topic (4 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 3rd June 2024 - 02:37 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC