What are you asking? What “it” are you asking about?
The code that I posted is correctly written HTML with a small amount of CSS to style it.
YOUR code in post #1 contains HTML and CSS.
What are you asking?
HTML creates the content on a web page.
CSS styles the HTML to change its appearance in dozens to thousands of different ways. How CSS is coded depends on the HTML and the design intent (purpose) of the web page. CSS does not act alone. CSS does not render anything in a browser without HTML to affect. CSS styles the HTML.
What are you asking? Are you asking if your code is syntactically correct, valid? Then the answer is a qualified “almost”.
In the HTML:
(1) The space inside the beginning of the img tag, < img, is invalid, it will break the code. The images will not render. Delete that space and the code becomes valid.
(2) The quote marks around the images, and classes and in the alt=“” attribute are correct. That’s very good!
(3) Adding the trailing space and slash " />" to the images (“empty tags”) is an X-HTML convention. Although browsers have been coded to ignore it, it is not appropriate in HTML.
(4) It is recommended that you add the width and height attributes to each of the foreground images in the HTML.
Overall, except for the space at the beginning of the image tags, the HTML is acceptable but can be improved.
In the CSS:
(1) The CSS that you posted is valid.
(2) However, img.small {height:15%} does nothing. It is useless code and should be deleted.
(3) Using percents for height is not straight forward and simple. Avoid percents for heights until you learn specifically how they behave.
(4) Avoid routinely assigning heights to most containers. Allow the contents to dictate the height of most containers. It’s fundamental to fluid design.
Your CSS and HTML are valid when included in a proper “working page”. However, without images or the image dimension attributes, there is no way for me to know if the CSS is performing as your expect it to perform. In other words, you can write syntactically valid code that doesn’t work together.
Is your code correct? I don’t know. Technically, it is valid but whether it renders what you expect it to or not, I don’t know.
I added an outline and background color to highlight the area of the images. Using outlines and background colors is very useful when developing a page. The can be removed without adversely affecting your code. The don’t cause trouble.
This is a repeat of @cpradio’s instructions for posting code.
Begin by putting three backticks on a line by themselves before your code.
Add your formatted code below those backticks.
End by putting three backticks on a line by themselves after your code.
Like this:
```
your code here
```
Starts with three backticks on a line by themselves and Ends with three backticks on lines by themselves.
A “working page” might look something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Name here</title>
<style>
on-page CSS here
</style>
</head>
<body>
<div class="outer">
<header>
your HTML code here
</header>
<main>
your HTML code here
</main>
<footer>
your HTML code here
</footer>
</div>
</body>
</html>
Starts with three backticks, Ends with three backticks on lines by themselves.
As you discover more about the forum, you will learn that you can highlight your code in the editor, then click the </> symbol in the edit menu to keep the code properly formatted and visible.
It may be worth mentioning that images display inline by default. So the html alone (without css) will place the 4 images in a row, provided they fit on the screen, otherwise they will wrap to a new line.
Assuming you want to alter the default behaviour, to perhaps stop the images wrapping on smaller screens and keep them in one line, CSS can be used in a few ways to make this happen. Display table, flex box, or just using % widths to name a few.
Thanks! I am learning HTML/CSS from John Duckett’s book, but I am getting different ways to code things online. I have heard that using correct syntax is important, so I want to make sure I’m doing things the right way.