Here is a screenshot showing HTML code and preview from VS Code
And this is the third post on the topic because I can only post one image at a time.
And here is a screenshot showing CSS code .
In Post 1 on this topic you can see part of the mockup screen that I want to create for my web site. I’m looking for feedback on what I’ve done so far and what I need to do to make it work. FWIW the HTML will run in my browser but no CSS styling appears. I am aware that these are in-progress modules and probably contain text that I need to delete.
I don’t know how to make the boxes appear side by side and one over the other. I suspect that the
tag should be used but I haven’t discovered how to do it.
Please post your actual code instead of a screenshot.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
every class will apply except first class in paragraph, because in html classes dont have dot. and you didnt close p tag.
last class wont apply as well because u closed p > before giving it class.
that’s why your text shows what it shouldnt in last sentence.
- if you wanna test thumbnails [which are images] put div around them, not p
Hello!
It looks like you are doing great!
Are these the updates, somebody suggested you put on for us to see the updates as you go along?
If so, I suggest perhaps, though I am not sure being me, they be posted in the Feedback area.
It you are looking for help with an issue, you have some of the best, of the best , in here and throughout the forum, available to help you.
(I am just a learner, who likes to feed on the positive energy and provide as much as I can, too, for all of us. )
Happy coding! 
OK, here’s another attempt at posting my code.
First is the CSS module
/* THIS IS THE CSS-HTML INTEGRATION TEST CSS FILE */
body
{
margin:auto;
width:1200px;
padding:10px;
background-color:bisque;
font-size:14px;
font-family:Verdana;
}
name-box{
/* <div class="name-square"> */
height: 30px
width: 100%;
border-style: solid; 1px #300691
padding: 5px;
radius 5px;
}
/*left-align
text-align:center;*/
photo{/*FIXED [if exists PHOTO]
<div class="photo-square">*/
height: 250px;
width: 250px;
border: 1px solid #300691
padding: 5px;
radius 5px;
/*left-align DIV1? */
}
.birth{/*FIXED [if exists BIRTH]
<div class="birth-square"> </div>*/
height: 80px;
width: 950px;
border: 1px solid #300691
padding: 5px;
radius 5px;
/* date - line 1
place - line 2
parents - line 3*/
}
.marriage{/*FIXED [if exists MARRIAGE]
<div class="marriage-square"> </div> */
height: 80px;
width: 950px;
border: 1px solid #300691
padding: 5px;
radius 5px;
/*right-align DIV2?
MARRIAGE
spouse - line 1
date - line 2
place - line 3*/
}
.death{/*FIXED [if exists DEATH]
<div class="death-square"> </div>*/
height: flex px;
width: 60%;
border: 1px solid #300691
padding: 5px;
radius 5px;
/*right-align DIV2?
DEATH
date - line 1
place - line 2
buried at - line 3 */
}
.bio{/* OPTIONAL [if exists BIO]
<div class="bio-square"> </div> */
height: flex px;
width: 100%;
border: 1px solid #300691
padding: 5px;
radius 5px;
/* left-align */
}
.children{/* OPTIONAL [if exists CHILDREN
<div class="children-square"> </div>*/
height: flex px;
width: 100%;
border: 1px solid #300691
padding: 5px;
radius 5px;
/* left-align */
}
.thumbnails{/* OPTIONAL [if exists THUMBNAILS */]
<div class="thumbnails-square"> </div>
height: flex px;
width: 100%;
border: 1px solid #300691
padding: 5px;
radius 5px;
/* left-align
{border style:solid}
border radius: 5px
hyperlinks to large photos */
}
. . . and next the HTML module (comments are examples for me to see)
<!DOCTYPE html>
/* THIS IS THE HTML-CSS INTEGRATION TEST INDEX FILE */
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<link rel="stylesheet" href="clan.css">
<!--
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
-->
<body>
<p class=name-box> Robert Haddon Hutchins
</p>
<p class=".photo"> test a photo
</p>
<p class=".birth"> test birth
</p>
<p class=".marriage"> test marriage
</p>
<p class=".death"> test death
</p>
<p class=".bio"> test bio
</p>
<p class=".children"> test children
</p>
<p class=".thumbnails"> test thumbnails
</p>
</body>
Is this better? As you can see, I’m struggling a bit with syntax.
1 Like
You need to use the “preformatted text” button or the backtick button on your keyboard. You used backslashes
I’ve only been here a day; so I have much to learn. Am I posting in the wrong forum for feedback on my code? If so, please point me to the correct one.
1 Like
Is it proper protocol here to ask an admin to move my post to its proper place?
This subforum works fine.
You seem to have some confusion on how CSS class selectors work?
Double check the examples here:
Thanks, Jeremy. Yes, I am confused.
Before diving into how CSS and HTML interact, can you please straighten me out on placement of files? As I see it at the moment, the INDEX-HTML file is the file containing HTML code that the browser interprets. The index file can contain a CSS tag to point to a separate file containing the CSS code and it can contain <img src . . . > tags to point to files containing images. Of course, CSS statements can be withing the HTML file within a STYLE block or can be declared in line, as I understand it.
My question is: Do the html code (index.html) file and the css and image files all have to be in the same folder for the browser to access them? Or, can pathnames point the browser to different folders? I think my confusion on this point is causing some of my confusion with CSS code when I try to test locally.
Am I anywhere close to understanding the relationships?
Your link element needs to use the correct relative path to your CSS file.
Does that mean that if the “clan.css” file is in the same folder as the index.html file all is well; but if the css file is in a different folder, say a folder named CSS, then the link element should read <link rel="stylesheet" href="css/clan.css:>?
My understanding is that “stylesheet” in that element is a reserved word and not a user-defined name.
href="css/clan.css" only works if you have a folder called css right next to your HTML file.
But if clan.css is in the same folder as the index.html file, the link should work?
This question might not represent actual practice. Suppose a complex web site having all CSS in a single, separate file instead of declaring CSS styles inline in the HTML or in a <style> . . . </style> element in the HTML <head> . . . </head> section of the HTML file AND supposing that he file containing the CSS code was in a layer of subfolders, would a statement like<link rel="stylesheet" href="X:/folder1/folder2/folder3/css-file.css"> be appropriate if the CSS were on a separate drive?
like I already said
class does NOT have dot in html!!!
but it HAS TO HAVE DOT IN CSS !!!
you are also forgetting semicolons after the properties;
therefore your css is not displaying properly.
try forgetting semicolon in JS for example. page will stop showing. errors will display.
not so forgiving.
well, neither is css, but JS is worse.
If clan.css is in the same folder as index.html, then href="clan.css" will work fine, yea.
You don’t usually put the CSS file so far away. If you put it in an adjacent folder, then your file structure locally and on your hosted website are the same.
also why is it called clan.css instead of just style.css?
I mean yeah, you can call it pluto.css if you link to pluto.css properly.
but usually if you have only one stylesheet that stylesheet is normally called style.css
no need to invent other names.
I just went back through both my CSS file and my HTML file correcting spelling/syntax errors by running them both through code validators until they were clean; however, my browsers (Firefox, Brave, Chrome) fail to show the style markup. I use VS Code. In the <link rel="stylesheet" href="clan.css"> the clan.css is underlined. Both files are located in the same folder on my system.
It seems that there is a problem relating the files to each other but I cannot see the problem.
I named it that to distinguish it from another CSS file I have for a different HTML - CSS combo. My convention is to name the CSS file with the associated HTML title. Since it doesn’t matter, this convention should cause no harm should it?