Continuing with my project and trying to incorporate the lessons I’ve learned (Thank you, Paul), the CodePen attached shows another page to be put on my website. I’ve used filter to achieve a drop-shadow for the first time. I’ve also incorporated the < dl> <dt> <dd> tags, which leads to a couple of questions.
There is no padding on those tags by default but there is a top and bottom margin on the dl and a left margin of 40px (in chrome) for the dd and nothing for the dt. You can set them all to zero if you wanted by saying.
dl,dt,dd{margin:0;}
You should investigate reset style sheets like normalise.css but I tend to use something very simple like this.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* 2. Remove default margin */
html,
body,
h1, h2, h3, h4, h5, h6,
p, figure,
blockquote, dl, dd {
margin: 0;
}
/* 3. Remove list styles */
ul,
ol {
list-style: none;
margin:0;
padding:0;
}
/* 4. Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* 6. Inherit fonts for form elements */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. Avoid text overflows */
p,
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
It doesn’t cover all elements but is a good start. You then just have to remember to set the margins, padding and font-sizes that you want and not rely on any preconceived defaults.
Good that’s fine :). You could have use the box-shadow property instead of filter which is a little more usable but does not exactly replicate that effect. The filter is good if you want that specific effect but be aware that using too many filters can cause a lag on the page as they are quite heavy in css terms although I doubt its much of an issue in your page. Generally you would use the filter where you want the shadow to follow an irregular shape or the alpha channel of an image. Box-shadow only works on regular shapes.
Regarding your html I’ve talked about this before and semantic meaning and structure is very important. Don’t use tags just for the way they look. As an example you have this code in your codepen:
<div class="generation-wrap">
<u>Franklin Pierce Hutchins</u>
<dl>
Franklin Pierce Hutchins is clearly a heading yet you have used an inline element the u tag to create an underline. Tags should not be used for their appearance. It should clearly be a heading tag of the correct logical hierarchal order. The heading tag you use will depend on what went before if its inside a h2 section then it should be an h3. You can’t jump from an h2 to an h4 for example.
The <u> tag actually represents a span of text with non-textual annotation, such as a proper name in Chinese, a misspelled word, or text marked for attention. It is an inline construct and its correct usage would be like this.
<p>The word <u>color</u> is commonly misspelled as <u>colour</u> in some regions.</p>
u{
font-weight:bold;
text-decoration:underline; /* not really needed as this is the default */
}
Now you make a similar mistake here:
<dl>
<dt>LDS ID:</dt>
<dd></dd>
<dt>Date:</t>
<dd>May 27, 1894<dd>
The LDS:ID is a data term (dt) but you have no data definition for it (dd). Why is it there? If its a heading tag then it should be a heading above the dl itself. However I don’t really think its another heading and perhaps it can just be a simple p tag.
e.g.
<p><strong>LDS ID:</strong></p>
<dl> etc...
Another mistake I can see is this:
<h1 class="heading">The Hutchins Clan</h1>
<h3 class="sub-subheading">Hutchins Ancestral Line</h3>
You can’t go from an h1 straight to an h3. In your case that h3 should be an h2.
Therefore that whole section should look like this:
<div class="background-wrap">
<h1 class="heading">The Hutchins Clan</h1>
<h2 class="sub-subheading">Hutchins Ancestral Line</h2>
<div class="lineage-page-wrap">
<div class="generation-wrap">
<h3>Charles Haddon Spurgeon "Spurgeon" Hutchins</h3>
<p><strong>LDS ID:</strong></p>
<dl>
<dt>Date:</dt>
<dd>May 27, 1894<dd>
<dt>Mother:</dt>
<dd>Mary Lyzinthe Hutchins (nee Tabor)</dd>
<dt>Father:</dt>
<dd>Franklin Pierce Hutchins</dd>
<dt>Place:</dt>
<dd>Needmore Community, Nantahala Township, Swain County, North Caroline</dd>
<dt>Siblings:</dt>
<dd>1-Robert Leroy "Lee", 2-Amanda Jane (m. John Matt Davis), 3-Lyida Elizabeth (m. Tolvin Buchanan), 4-James Alfred, 5-John Henry, 6-(Spurgeon. 7-)William Carey (died at 4 months)</dd>
<dt>Married:</dt>
<dd>Healy Heady Mauden Bake, September 22, 1923</dd>
<dt>Children:</dt>
<dd>1-William Spurgeon, 2-Charles Baker, 3-Frank Tabor, 4-Elizabeth Lee "Baby Lee", 5-James Alfred, 6-John Fox, 7-Mary Jo "Jo", 8-Nancy Catherine, 9-Robert Haddon</dd>
</dl>
</div> <!-- END of .genertion-wrap-->
etc.....
Notice how we go logically from h1 to h2 to h3, Also note that you didn’t close the dd tags properly. You have this:
<dd>Mary Lyzinthe Hutchins (nee Tabor)<dd>
It should be this:
<dd>Mary Lyzinthe Hutchins (nee Tabor)</dd>
What you had is in effect two dd elements which in html5 will not produce an error but you could get two lines instead of one and will confuse screen readers and document outliners.
Don’t get despondent though as I see you are making good progress and there is nothing unusual in the mistakes you are making. All beginners (not to mention some intermediate and experts) make the same mistakes. 
That’s a lot to chew on. Let me see if I can respond to any of it.
There is no padding on those tags by default but there is a top and bottom margin on the dl and a left margin of 40px (in chrome) for the dd and nothing for the dt. You can set them all to zero if you wanted by saying.*
dl,dt,dd{margin:0;}
*You should investigate reset style sheets like normalise.css but I tend to use something very simple like this.[/quote] NOTE: If the preceding quote doesn’t work, it’s because bbCode tags seem to work differently here than I’m accustomed to.
Response:
It’s good to know that those tags contain no padding because I looked and looked and couldn’t find any declared. Nowhere in searching for information about the tags did I find the information your provided. Thank you.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* 2. Remove default margin */
html,
body,
h1, h2, h3, h4, h5, h6,
p, figure,
blockquote, dl, dd {
margin: 0;
}
/* 3. Remove list styles */
ul,
ol {
list-style: none;
margin:0;
padding:0;
}
/* 4. Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* 6. Inherit fonts for form elements */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. Avoid text overflows */
p,
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
It doesn’t cover all elements but is a good start. You then just have to remember to set the margins, padding and font-sizes that you want and not rely on any preconceived defaults.
Response:
I will chew on all that. At first glance I can see that there are elements unfamiliar to me. Also, I suspect that there are other lessons about usage that I will have to study to understand. There will probably be questions.
Good that’s fine :). You could have use the box-shadow property instead of filter which is a little more usable but does not exactly replicate that effect. The filter is good if you want that specific effect but be aware that using too many filters can cause a lag on the page as they are quite heavy in css terms although I doubt its much of an issue in your page. Generally you would use the filter where you want the shadow to follow an irregular shape or the alpha channel of an image. Box-shadow only works on regular shapes.
Response:
That’s good to know. I used filter because I found that tag used - and no mention of box-shadow - when I searched on how to code shadow. I’ll experiment with box-shadow as you suggest.
Regarding your html I’ve talked about this before and semantic meaning and structure is very important. Don’t use tags just for the way they look. As an example you have this code in your codepen:
<div class="generation-wrap">
<u>Franklin Pierce Hutchins</u>
<dl>
Franklin Pierce Hutchins is clearly a heading yet you have used an inline element the u tag to create an underline. Tags should not be used for their appearance. It should clearly be a heading tag of the correct logical hierarchal order. The heading tag you use will depend on what went before if its inside a h2 section then it should be an h3. You can’t jump from an h2 to an h4 for example.
The <u> tag actually represents a span of text with non-textual annotation, such as a proper name in Chinese, a misspelled word, or text marked for attention. It is an inline construct and its correct usage would be like this.
<p>The word <u>color</u> is commonly misspelled as <u>colour</u> in some regions.</p>
u{
font-weight:bold;
text-decoration:underline; /* not really needed as this is the default */
}
*Response: *
My intent was not to make the name (Franklin Pierce Hutchins) a heading but rather to make it more visible within the bordered container by using the underlining. I don’t want the font weight and padding that I’ve encountered using header tags. I’ll investigate using a header instead; but, as you say, using headers should be a hierarchy with no skips. That might present problems for me in getting the result I want.
Now you make a similar mistake here:
<dl>
<dt>LDS ID:</dt>
<dd></dd>
<dt>Date:</t>
<dd>May 27, 1894<dd>
The LDS:ID is a data term (dt) but you have no data definition for it (dd). Why is it there? If its a heading tag then it should be a heading above the dl itself. However I don’t really think its another heading and perhaps it can just be a simple p tag.
e.g.
<p><strong>LDS ID:</strong></p>
<dl> etc...
Response:
*I chose the definition list series of tags because I wanted the title/data presentation. There are probably other ways to do that (which I don’t know). The code as presented is not complete (I should have pointed that out in my OP); I didn’t recll the LDS number for my grandfather and simply left it out. It definitely is not a heading but is a title for the content to be provided in the <dd> </dd> tag pairs. I’ve experimented with <p> tags but find that they seem to have built-in parameters as to format. I could have used them as you suggest, but when I tried them they didn’t produce what I wanted. There are, no doubt, things I need to learn about how header and paragraph tags function.
In coding, I created his box as a model then copied and pasted the number of containers with the dl / dt / dd tags that I will come back to and complete with the data for each individual. That’s probably a bad practice, but it saves tons of time and prevents much fat fingering (which I’m prone to do).*
Another mistake I can see is this:
<h1 class="heading">The Hutchins Clan</h1>
<h3 class="sub-subheading">Hutchins Ancestral Line</h3>
You can’t go from an h1 straight to an h3. In your case that h3 should be an h2.
Therefore that whole section should look like this:
<div class="background-wrap">
<h1 class="heading">The Hutchins Clan</h1>
<h2 class="sub-subheading">Hutchins Ancestral Line</h2>
<div class="lineage-page-wrap">
<div class="generation-wrap">
<h3>Charles Haddon Spurgeon "Spurgeon" Hutchins</h3>
<p><strong>LDS ID:</strong></p>
<dl>
<dt>Date:</dt>
<dd>May 27, 1894<dd>
<dt>Mother:</dt>
<dd>Mary Lyzinthe Hutchins (nee Tabor)</dd>
<dt>Father:</dt>
<dd>Franklin Pierce Hutchins</dd>
<dt>Place:</dt>
<dd>Needmore Community, Nantahala Township, Swain County, North Caroline</dd>
<dt>Siblings:</dt>
<dd>1-Robert Leroy "Lee", 2-Amanda Jane (m. John Matt Davis), 3-Lyida Elizabeth (m. Tolvin Buchanan), 4-James Alfred, 5-John Henry, 6-(Spurgeon. 7-)William Carey (died at 4 months)</dd>
<dt>Married:</dt>
<dd>Healy Heady Mauden Bake, September 22, 1923</dd>
<dt>Children:</dt>
<dd>1-William Spurgeon, 2-Charles Baker, 3-Frank Tabor, 4-Elizabeth Lee "Baby Lee", 5-James Alfred, 6-John Fox, 7-Mary Jo "Jo", 8-Nancy Catherine, 9-Robert Haddon</dd>
</dl>
</div> <!-- END of .genertion-wrap-->
etc.....
Response:
*Duly noted. I observed the h1 to h3 leap later as I coded and have subsequently changed it. I had to make some adjustments to my CSS code for header elements to get the effects I wanted, mainly font size and weight. *
Are there ways to declare the header tag styles then alter them in the HTML code to better suit their use in a specific situation? My thought was that putting styling code into the HTML should be avoided except in cases where it is necessary, like using the span tag. Am I wrong about this?
Notice how we go logically from h1 to h2 to h3, Also note that you didn’t close the dd tags properly. You have this:
<dd>Mary Lyzinthe Hutchins (nee Tabor)<dd>
It should be this:
<dd>Mary Lyzinthe Hutchins (nee Tabor)</dd>
What you had is in effect two dd elements which in html5 will not produce an error but you could get two lines instead of one and will confuse screen readers and document outliners.
Response:
The missing slash in the closing tag was a typo. I use code validators to help me find such but failed to do that before pasting the code in my CodePen.
Don’t get despondent though as I see you are making good progress and there is nothing unusual in the mistakes you are making. All beginners (not to mention some intermediate and experts) make the same mistakes.
{NOTE: I haven’t figured out how to use the quote markup in the forum. It seems to be a bit different than I’ve used elsewhere. I wanted to quote Paul’s post in segments then respond to them. I couldn’t suss out the quote bbCode in use here so used italics to highlight my responses.]
Thanks for all you’ve done to mentor me, Paul. It is truly appreciated.
Here is a more complete version of the page I’m working on that was referenced in Paul’s post. It is still incomplete as far as the data goes (only one box is complete), but you can see the intent. This version is far better than my first attempt because it flows to fill the containers in all the right places which incorporates lessons I’ve taken aboard (I hope). I also made changes learned from Paul’s most recent response to my posts.
I have mentioned this a few times now but I’ve thrown a lot at you so it may be lost in the noise but I will say it again.
CSS doesn’t care what things look like.
You use semantic html for the content and then you make it look like you want with CSS. This means your h1 could be 1rem font size, underlined, overlined, non bold and skyblue pink. You just style it to suit the design.
Don’t pick tags for what they look like as that is just what the default user agent style sheet suggests. It’s your job to style the elements as you wish them to look.
HTML defines the semantics. CSS makes it look like you want.
There are a few exceptions such as some form controls but everything else is fair game
Thanks, Paul.
I want to use a common background wrapper and headline (The Hutchins Clan) on all my pages. Some pages will have sub-headings, some won’t. My thought was to style the h1 and h2 (and maybe the h3 and h4) tags in CSS to suit my common elements.
I’m probably overthinking the problem. Perhaps some context will help explain my question.
First, I had been using a single CSS file to contain all my styling elements. As the project progresses, that file is becoming large, making finding code a bit of a bother. I thought I might break my CSS down into multiple files to make finding and changing elements easier. (I know there is a “FIND” function in VS Code, but I tend to scroll to find things. That is, perhaps, a habit I need to break).
My thought was to have a separate CSS file that is common to all pages and individual CSS files for each page. I could then reference the common CSS file in every HTML file along with the specific CSS file for that page. Example:
<link type="text/css"
rel="stylesheet" href="common.css" media="screen">
<link type="text/css"
rel="stylesheet" href="personal-pages.css" media="screen">
In the common.css file I could include everything that is (or should be) common to all page styling, such as:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 1rem;
}
@media screen (max-width: 600px) {
}
h1.heading {
margin-top: -.5rem;
font-size: 3.5rem;
font-weight: normal;
text-align: center;
}
h2.subheading {
font-size: 2.5rem;
font-weight: normal;
margin-top: -4rem;
text-align: center;
}
h3.sub-subheading {
font-size: 1.5rem;
font-weight: normal;
text-align: center;
margin-top: -4rem;
}
.text-color-red {
color: red;
font-weight: 550;
}
dl {
display: grid;
column-gap: 0.5rem;
grid-template-columns: max-content;
}
dt {
font-weight: normal;
}
dd {
margin: 0;
grid-column-start: 2;
}
dl,dt,dd {
margin: 0;
}
I would then place code relevant only to the page I’m coding in a file:
.personal-pages-wrap {
display: grid; /* 3 rows / 3 columns*/
gap: .6rem 2rem;
grid-template-columns: 1fr 1fr 1.6fr;
padding: 0 3rem;
line-height: .9rem;
}
.life {
border: 1.5px solid #999;
border-radius: 5px;
padding: .5rem;
background-color: rgb(249, 247, 245);
}
.photo-wrap {
grid-row: 1;
grid-column: 1;
}
.photo-wrap > img {
width: 100%;
height: auto;
}
.birth-details {
grid-row: 1;
grid-column: 2;
}
.marriage-details {
grid-row: 2;
grid-column: 2;
}
.death-details {
grid-row: 3;
grid-column: 2;
}
.biography-wrap {
grid-row: 1;
grid-column: 3;
}
.children-wrap {
grid-row: 4;
grid-column: 1 / span 3;
}
.thumbnails-wrap {
grid-row: 5;
grid-column: 1 / span 3;
}
If I’m careful not to use the selectors from ‘common.css’ in other referenced CSS files, this should work, shouldn’t it? This will have the added benefit of keeping relevant CSS code with the HTML that it styles.
You get the idea.
This is what led me to the question you cited:
“Are there ways to declare the header tag styles then alter them in the HTML code to better suit their use in a specific situation?”
It arises, for example, when an h2 tag’s size might work nicely on one page but need to be smaller on another. Of course there are multiple ways to skin a cat. I could use my own definitions instead of header tags (but isn’t that bad form?). It’s that kind of situation that raised the question in my mind.
If you have suggestions for better ways to manage my CSS code, I’d love to hear them. I’ve read the MDN article on CSS strategies and a couple of others.
You should control the size of the h2 and not choose it because it looks big. If it’s a heading at a second level then it must be an h2.
You choose its size and how it looks. If you set a default look for it because that’s the way it’s used most then that’s fine.
If you then want it to look different in another section then just add a class and style it like you want it to look. Just the same as you would do to any other elements such as a div or a p or whatever.
Splitting style sheets into unique styles for different pages is fine but does mean you don’t benefit from the cache effect when navigating to different pages.
Most large sites will use multiple style sheets to help organise things but a small site can be done in one file if you are logical and methodical.
At the end of the day there is no hard and fast rule as some people like one method and others like a different method.
Thanks, Paul.
Your advice on headers and how they are styled is pretty much what I had figured out. It will entail using individual selectors instead of .h# in places that one would expect to find headers but it gives me the styling that I want.
I’ve decided to give the Mozilla (MDN) approach a try. It consists of a single stylesheet file that is commented with common/universal styles in a group and styles for different pages in their own areas encompassed by comments. This is a compromise but makes a bit more sense than the hodgepodge I had before.
"Once more into the breech . . . "
I’m trying to start fresh and peel the onion one layer at a time; so if I repeat my questions it’s because I haven’t learned the lessons needed. My apologies in advance.
The CodePen included here is the current state of one of my pages. It is not yet complete. So far I have the basic page elements (background, headings, … and the grid defined with content added (except for a photo and thumbnails). This format will be repeated a number of times for different individuals. I want to get it down - and understand its creation - before adding more people and more pages.
WRT the CodePen CSS: Some of it refers to styles for other pages. Trying to exclude the code that is not relevant caused problems: so I included it all. Hopefully comments will point out the relevant CSS.
I’m currently focusing on 2 issues:
The containers in column 1 and 2 ‘grow’ vertically to match the height of the container in grid column 3.
Can the height of container borders for columns 1 and 2 be constrained to a vertical dimension based on their content? They appear to have ‘grown’ to match the vertical dimension of column 3 whose content stretches it out.
Styling the ‘titles’ for the containers.
Inspecting the results with DevTools shows that the headings for the boxes are defined by the h3.title definitions in CSS. The HTML invokes the styling with thsis code:
<div class="personal-pages-wrap"> . . .
<div class="birth-details life offset-heading">
<h3 class="title">Birth</h3>
There is no font-size definition any of those class selectors. I tried inserting a large font size in each of them without effect. This made me suspect that the link to the CSS file was faulty; yet I can change other CSS in the linked file and see the effects of those changes which dispoves that notion. Similarly, I can’t find what places the lines before and after the titles by changing the CSS.
I went back to posts from PaulOB on May 23 (above) where he answered questions I posted without finding answers that clicked in my brain. In the CodePen CSS I commented lines from Paul to try to reflect my understanding of what they do.
So, the questions are:
Grid stretches items to the same length by default which is one of its key features as that was something very difficult to do before grid and flex. If you want uneven columns you set the alignment to the start.
e.g.
.personal-pages-wrap {
display: grid;
gap: .6rem 2rem;
grid-template-columns: 1fr 1fr 1.6fr;
padding: 0 3rem;
line-height: .9rem;
align-items: start;/* align items to top rather than stretch */
}
The h3 title font-size is in here.
h3.title {
display: flex;
gap: 1rem;
margin: 0;
position: relative;
margin-top: -1rem;
font-size: 1.5rem;
font-weight: normal;
}
It probably did not seem to work for you because you have duplicated those styles twice in your code so only the latter code is in effect. You can easily spot the first block as you have millions of comments in it but none on the second lot
The h3.title code (as above) styles the text and sets a flex box display.
The lines before and after the actual text are created by the border on the pseudo element ::before and ::after.
The first border is on the ::before element and stretches to a max-width of 1.5 rem. The second border is on the ::after element and starts after the text and stretches all the way to the end due to the nature of flex (flex:1 0 0 force the element to be as wide as it can in the available space).
h3.title:before,
h3.title:after {
content: "";
flex: 1 0 0;
height: 1rem;
border-top: 1px solid #000;
transform: translateY(1rem);
}
h3.title:before {
max-width: 1.5rem;
}
The translate is needed to push the borders into position otherwise they would just be in line with the text. The effect will not work well with rounded borders which is why I made the corners square.
It can be done with rounded corners but is a bit fragile as you have to rub out a 1pox border which relies on browsers being accurate.
Grid stretches items to the same length by default which is one of its key features as that was something very difficult to do before grid and flex. If you want uneven columns you set the alignment to the start.
Response:
I couldn’t find that descriptor anywhere despite having searched and read many articles on grid usage.
It probably did not seem to work for you because you have duplicated those styles twice in your code so only the latter code is in effect. You can easily spot the first block as you have millions of comments in it but none on the second lot
Response:
I embarass myself yet again. At least you can see that I did some research in order to create all those comments. I was able to change the font size to my satifaction.
The h3.title code (as above) styles the text and sets a flex box display.
The lines before and after the actual text are created by the border on the pseudo element ::before and ::after.
The first border is on the ::before element and stretches to a max-width of 1.5 rem. The second border is on the ::after element and starts after the text and stretches all the way to the end due to the nature of flex (flex:1 0 0 force the element to be as wide as it can in the available space).
h3.title:before,
h3.title:after {
content: "";
flex: 1 0 0;
height: 1rem;
border-top: 1px solid #000;
transform: translateY(1rem);
}
h3.title:before {
max-width: 1.5rem;
}
The translate is needed to push the borders into position otherwise they would just be in line with the text. The effect will not work well with rounded borders which is why I made the corners square.
It can be done with rounded corners but is a bit fragile as you have to rub out a 1pox border which relies on browsers being accurate.
Response:
I shall have to give this some more work to fully understand it. So far, I haven’t worked out placing the lines atop my borders. I’ll get rid of the radiused borders first and work from there.
Once again I am in your debt. Words cannot express my gratitude.
Continuing to show my ignorance and inability to understand when I do find information . . .
h3.title:before, /*/* Addresses area preceding 'h3.title' */
h3.title:after { /* Addresses area following 'h3.title' */
content: ""; /* Defines a blank line ? */
flex: 1 0 0;
height: 1rem; /* Sets 'h3.title' height to 1rem */
border-top: 1px solid #000; /* Defines a solid line 1px wide, color black */
transform: translateY(1rem); /* Shifts .title content 1rem up vertcally */
}
In the CSS class above, what do each of the three qualifiers (1 0 0) in the flex: 1 0 0 specifically refer to?
I found this “flex: flex-grow flex-shrink flex-basis|auto|initial|inherit” definition on the W3 Schools website.
“flex-basis” is further defined as ‘The length of the item. Legal values: “auto”, “inherit”, or a number followed by “%”, “px”, “em” or any other length unit’.
I interpret the code to mean that the “1” qualifier makes something grow, but what does it refer to? . . . all of the selectors (h3 and title:before and title:after)? I interpret the first “0” qualifier to mean that nothing is to shrink, and I have no clue about what the second “0” refers to. I might guess that the third qualifier (if not “auto” or “inherit”) is a relative or absolute length value; so the “0” says, in effect, ‘nothing to see here.’
WRT the last element (tranform: translateY(1rem)) can the ‘translateY’ qualifier take both positive and negative values, such as the (1rem) shown and (-1rem) to shift the selected title downward?
I’m still on the struggle bus on this one.
Yes that’s how it’s used in the last demo and positive values move the element downwards and negative values move the element upwards. Note that although the element is moved visually it only occupies its original space in the document flow. Transforms cause no effect on surrounding content.
It makes the flex-item grow as much as it can in the space available. If it was the only flex-item in that row then that would make it stretch to 100% of the available space. Otherwise it would just be content width wide which is generally not what you want. The other two values of shrink and basis are set to zero as they are not required to do anything in that example.
Probably best if you read this article first as it’s a complicated subject:)
flex is called flex because it can flex with content unlike setting a fixed width in px which is immutable and unresponsive.
Or this (I come back to this link now and then) :
The link gives me a ‘403 Forbidden’ response.
Which link is that?
All seem to be working for me.
The one you cited in post #33, above, re CSS Flexbox Layout Guide.
403 has to do with permissions which I apparently don’t have. 
It seems to be working for me.
Continuing on the matter of flex in CSS . . .
Is it possible to flex the height of a grid container and make it show 2 images? I’ve found various answers searching and using AI, but I haven’t been able to incorporate any of them and make them work in my project.
I was able to force Codepen to accept an <img src=" . . . " statement that fills the grid row 1 / column 1 element. Although it fails to show an image, it takes up the intended space. It’s that space (grid container) that I would like to place 2 images in. The grid is defined here:
.personal-pages-wrap {
display: grid; /* 5 rows / 3 columns*/
gap: .6rem 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 0 1rem;
line-height: .9rem;
align-items: start;
}
The space is styled by:
.photo-wrap {
grid-row: 1;
grid-column: 1;
}
.photo-wrap > img {
width: 100%;
height: auto;
}
Is it possible to modify the above CSS snippet to include a flex: . . . descriptor which would allow the display of multiple <img src=" . . . statements in the HTML within the “.photo-wrap” selector? The goal is to take up space in the first column to the left of the biography content by stacking images in the first column.
I hope I that makes sense.
I tried defining 2 elements; row 1 / column 1 and row 2 / column 1. That caused the top of the second image to align with the top of the Birth / Marriage / Death elements which is not what I want. I tried using an unordered list and the <li> tag to contain two <img src . . . declarations but that didn’t work at all, perhaps because I fat fingered something in either the CSS or the HTML which I couldn’t spot.
You could just place another image in photo wrap.
e.g.
<div class="photo-wrap life">
<img src="https://picsum.photos/id/238/300/300" class="photo-wrap">
<img src="https://picsum.photos/id/237/300/300" class="photo-wrap">
</div> <!-- END of .photo-wrap -->
However if you want to span more than one row you will need to make changes to how you placed it in the grid. That left column will need to span the number of rows in your grid.
As I mentioned before you are making this harder than it needs to be if all you want is two columns. You could just create a two column grid with no rows and then just stack stuff naturally in each column as needed without having to grid place everything. If you look at my original demo I explained this and implemented it for the top part.
I am just going offline now but will be back tomorrow afternoon with a longer answer.