• Locked
No replies
Wed, 2019-09-25 15:44
wb0gaz
wb0gaz's picture
Offline
newbie
Last seen: 3 years 26 weeks ago
Timezone: GMT-6
Joined: 2019-09-25
Posts: 1
Points: 2

Hello - I am a basic-level HTML programmer and absolute total beginner at HTML.

I am trying to learn HTML + CSS using a simple text editor (notepad) to compose a single HTML file.

There are numerous beginner-level examples on the web showing CSS examples from which I can learn, but I am unable to find any examples (yet) that show a single HTML file with CSS embedded. The parts are all there (many many snippets of CSS code), but I cannot successfully tie them (CSS and HTML) together into a single HTML file to generate an expected output on the browser.

My eventual goal in this exercise is to generate and populate a grid containing small images each with link, however, I am stuck at a much simpler level - how to get CSS instructions into a HTML file.

Below (first) is an example HTML file which does not work.
Below (second) is the output displayed on the browser.

(I deliberately want to to keep this extremely simple, so I want to put everything into a single HTML file (I call the file below css.html) that I can edit with a simple text editor.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>CSS test</title>
</head>
 
<body>
 
Expected output is a set of five boxes stacked vertically with the words "One" .. "Five" inside the box <br>
 
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
 
 
.wrapper {
  display: grid;
}
 
</body>
</html>

Here is the output as seen on my browser:

Expected output is a set of five boxes stacked vertically with the words "One" .. "Five" inside the box
One
Two
Three
Four
Five
.wrapper { display: grid; }

As noted above, only the raw text is shown - the boxes do not appear.

Looking for help in how to arrange this example (from which I think I can make much further progress!)

Thank you!

Top
Tags: