Author: AI Mastery

Estimated reading time: 80–85 minutes

Last updated: August 16, 2026

Introduction

Every website has a structure and a visual design. HTML and CSS are two of the main technologies used to create them.

HTML, which stands for HyperText Markup Language, provides the structure and meaning of a web page. It identifies content such as headings, paragraphs, links, images, lists, tables, and forms. HTML is the Web’s core markup language.

CSS, which stands for Cascading Style Sheets, controls how that content is presented. It can be used to change fonts, colours, spacing, borders, sizes, positioning, and page layouts. CSS is a core language of the open web platform for styling documents such as HTML pages.

A simple way to remember the difference is:

· HTML provides the structure and content.

· CSS controls the appearance and layout.

Think of a house. HTML is similar to the rooms, doors, windows, and walls that give the house its structure. CSS is similar to the paint, flooring, furniture arrangement, and decoration that determine how the house looks.

You do not need previous coding experience to begin learning HTML and CSS. You can start with a small web page, learn what each part does, make simple changes, and gradually build your knowledge.

This guide also shows how ChatGPT can be used as a learning and coding assistant. For example, you can use it to explain unfamiliar code, suggest a simple example, identify possible errors, or help you understand why something is not working. The purpose is not to replace learning the basics. It is to make the learning process easier to follow while you remain responsible for understanding and testing what you create.

Throughout the guide, you will work with small practical examples. You will learn how to create basic HTML content, apply CSS styling, connect the two together, preview the results in a web browser, and correct common beginner mistakes.

You will also learn several habits that matter when creating web content. A page should not only look correct; it should also be understandable and usable by different people. Web accessibility involves designing and developing websites and technologies so that people with disabilities can use them, and accessibility should be considered from the beginning rather than treated as an afterthought.

As you progress, the guide will also point out situations where you should consider privacy, security, copyright, licensing, and factual accuracy. These issues become especially important when code contains personal information, when you use images or other assets created by someone else, or when a website collects information from visitors.

The goal of this article is straightforward: to help you understand the foundations of HTML and CSS well enough to create, read, modify, and troubleshoot a simple web page with confidence, while using ChatGPT appropriately when it is useful.

You are not expected to memorize everything. Understanding what the main parts do and knowing how to find reliable help are far more useful first steps.

What You’ll Learn

By the end of this guide, you will understand the basic role of HTML and CSS and how they work together to create a web page.

You will learn how to:

· understand the difference between HTML and CSS

· recognize the basic structure of an HTML document

· create headings, paragraphs, links, images, and lists with HTML

· understand common HTML elements and attributes

· use CSS to change colours, fonts, spacing, borders, and layout

· understand the difference between inline, internal, and external CSS

· connect a CSS file to an HTML page

· create and save simple HTML and CSS files correctly

· preview your work in a web browser

· make simple changes and test the result

· use ChatGPT when you need help explaining, reviewing, or troubleshooting code

· recognize that suggested code may still contain mistakes and should be tested

· follow basic accessibility practices when creating web pages

· avoid common privacy and security mistakes when working with code

· recognize when images, fonts, templates, code libraries, or other assets may have licensing conditions

You will not need to build a large website in this article. The examples will stay small and practical so that you can concentrate on understanding what each part does.

The aim is to give you a solid foundation. Once the basics are clear, you will be better prepared to create more detailed pages and continue learning web development.

Before You Start

You do not need previous coding experience to follow this guide. You also do not need expensive software or a professional development setup.

For the exercises in this article, you will need:

· a computer

· a modern web browser

· a plain-text editor

· access to ChatGPT

· a folder where you can save your practice files

A simple text editor is enough for the first exercises. On Windows, for example, you can use Notepad. Later, you may choose a dedicated code editor, but that is not required to understand the basics.

Create a Practice Folder

Before writing any code, create a folder somewhere easy to find.

For example:

HTML-CSS-Practice

You can use this folder to store the HTML files, CSS files, and images you create while following the guide.

Keeping everything together will make it easier to understand how the files connect to one another.

Understand the Two Main File Types

For this article, you will mainly work with two filename extensions:

· .html for HTML documents

· .css for CSS stylesheets

For example:

index.html

style.css

The filename extension tells the computer what type of file it is.

A common beginner mistake is accidentally saving an HTML file as:

index.html.txt

If this happens, the browser may treat it as a normal text file instead of a web page.

When saving practice files, check the full filename carefully.

Use a Plain-Text Editor

HTML and CSS files contain plain text.

A word processor such as Microsoft Word or TextMaker is designed for formatted documents, so it is not the best choice for writing website code.

Use a plain-text editor for the coding exercises and keep TextMaker for writing or reviewing documents.

Keep Your First Project Small

Your first practice page does not need to be complicated.

A good beginner page might contain:

· one main heading

· one short paragraph

· one image

· one link

· one list

· a small amount of CSS

Starting with a simple page makes it easier to see what each line of code does and to identify problems when something does not work.

Protect Private Information

Practice with fictional information rather than real personal or confidential details.

Do not include passwords, account credentials, API keys, private customer information, payment details, or other sensitive information in examples that you share with an AI tool or other online service.

If you need help reviewing code that contains sensitive information, replace the private values with safe placeholders before sharing the relevant section.

For example, instead of using a real email address, use:

name@example.com

Instead of a real API key, use:

YOUR_API_KEY_HERE

This allows you to get help with the structure of the code without exposing information that should remain private.

Save Your Work as You Go

Make a habit of saving your files before making major changes.

When experimenting with a new idea, you can also keep a copy of the version that already works.

For example:

index-v1.html

index-v2.html

This simple habit makes it much easier to return to an earlier version if a change causes a problem.

Test One Change at a Time

When learning HTML and CSS, avoid changing many things at once.

A better approach is:

1 Make one small change.

2 Save the file.

3 Refresh the page in your browser.

4 Check what changed.

5 Continue only when you understand the result.

This method makes troubleshooting much easier and helps you learn what each piece of code actually does.

You are now ready to begin with the basic structure of HTML.

What Is HTML?

HTML stands for HyperText Markup Language. It is the language used to organize and describe the content of a web page.

HTML gives different parts of a page a specific meaning. For example, it can identify:

· the main heading

· smaller section headings

· paragraphs

· links

· images

· lists

· tables

· forms

HTML documents are made from elements, and those elements form the structure of the page.

A useful way to think about HTML is as the framework of a house. Before choosing paint colours, furniture, or decorations, the house needs walls, rooms, doors, and windows. In the same way, a web page needs structure before its appearance is added with CSS.

HTML Uses Elements and Tags

Consider this simple example:

<h1>My First Web Page</h1>

<p>Welcome to my website.</p>

The first line creates a main heading:

<h1>My First Web Page</h1>

The second line creates a paragraph:

<p>Welcome to my website.</p>

The browser recognizes the HTML elements and displays the content according to their meaning. The HTML standard defines a paragraph using the <p> element, for example.

Most HTML elements have an opening tag, some content, and a closing tag.

For example:

<p>Hello, world!</p>

This contains:

· <p> — opening tag

· Hello, world! — content

· </p> — closing tag

Together, these parts form the paragraph element.

The / in the closing tag tells the browser that the element ends there.

HTML elements can also be placed inside other elements. This is called nesting. Correct nesting matters because HTML elements should fit completely inside one another rather than overlap incorrectly.

What Are HTML Attributes?

HTML elements can contain additional information called attributes.

For example:

<a href=”https://example.com”>Visit Example</a>

The <a> element creates a hyperlink.

The attribute:

href=”https://example.com&#8221;

tells the browser where the link should lead.

Here is another example:

<img src=”garden.jpg” alt=”Red flowers growing in a garden”>

This image element contains two important attributes:

· src identifies the image file.

· alt provides a text alternative for the image when appropriate.

Attributes are written inside the opening tag.

You do not need to memorize all HTML elements or attributes. It is more useful at this stage to understand what they are and learn the common ones as you need them.

The Basic Structure of an HTML Page

A small HTML page can look like this:

<!doctype html>

<html lang=”en”>

<head>

  <meta charset=”utf-8″>

  <title>My First Web Page</title>

</head>

<body>

  <h1>Welcome to My Page</h1>

  <p>This is my first HTML page.</p>

</body>

</html>

This may look complicated at first, but there are only a few main parts.

Understanding the Main Parts

<!doctype html>

This declaration appears at the beginning of the document and tells the browser to process the page using modern HTML rules.

<html lang=”en”>

The <html> element contains the document.

The lang=”en” attribute identifies English as the main language of the page. Identifying the page language is also important for accessibility because assistive technologies can use this information when presenting content to users.

<head>

The <head> contains information about the document rather than the main content displayed on the page.

It can include information such as:

· the page title

· character encoding

· links to CSS files

· other document information

<meta charset=”utf-8″>

This specifies the character encoding used by the document.

<title>My First Web Page</title>

The <title> provides the document title. Browsers and other software can use this title when identifying the page.

<body>

The <body> contains the main content of the web page.

In our example, the visible content is:

<h1>Welcome to My Page</h1>

<p>This is my first HTML page.</p>

The heading and paragraph appear in the browser window.

HTML Describes Meaning, Not Just Appearance

A heading should normally be marked as a heading because it is a heading, not simply because you want the text to look large.

For example:

<h1>Beginner Gardening Guide</h1>

identifies the text as the main heading.

A section heading might use:

<h2>Choosing Your Plants</h2>

A normal paragraph might use:

<p>Choose plants that are suitable for your local climate.</p>

Using HTML elements according to the purpose of the content creates a clearer document structure. This is often called semantic HTML.

Good structure is useful for browsers, search technologies, assistive technologies, developers, and people who may need to maintain the page later.

You Do Not Need to Memorize HTML

Beginners sometimes believe they must memorize dozens of tags before they can build a web page.

That is not necessary.

Start by becoming familiar with a small group of commonly used elements, such as:

· <h1> to <h6> for headings

· <p> for paragraphs

· <a> for links

· <img> for images

· <ul> and <ol> for lists

· <li> for list items

As you practise, these elements will become familiar naturally.

The important first step is understanding the basic idea:

HTML gives the content of a web page its structure and meaning.

Figure 1. HTML organizes the different parts of a web page and gives each part a specific purpose.

Explanation: The HTML code provides the structure, while the browser interprets that structure and displays the page. At this stage, focus on recognizing the main parts rather than memorizing every tag.

What Is CSS?

CSS stands for Cascading Style Sheets. It is the language used to control the appearance and layout of web content.

HTML provides the structure of a page, while CSS determines how that structure is presented. The W3C describes CSS as a core language of the open web platform used to add styling such as fonts, colours, and spacing to web documents.

For example, HTML can create this heading:

<h1>My First Web Page</h1>

Without additional styling, the browser decides how the heading looks using its default styles.

CSS can then change its appearance:

h1 {

  color: blue;

  font-size: 36px;

}

This CSS tells the browser to display <h1> headings in blue with a font size of 36 pixels.

The HTML still identifies the text as a heading. CSS changes how that heading is presented.

Understanding a Simple CSS Rule

Consider this CSS:

p {

  color: darkblue;

  font-size: 18px;

}

This is called a CSS rule.

It contains several important parts.

Selector

p

The selector identifies which HTML element the rule should affect.

In this example, p means paragraphs.

Property

color

A property identifies what you want to change.

Examples of CSS properties include:

· color

· font-size

· background-color

· margin

· padding

· border

Value

darkblue

The value tells the browser what setting to use for the property.

Together:

color: darkblue;

is called a declaration.

The semicolon ; separates CSS declarations.

The declarations are placed inside curly brackets:

{

}

So this complete rule:

p {

  color: darkblue;

  font-size: 18px;

}

means:

Apply dark-blue text and an 18-pixel font size to paragraph elements.

CSS consists of rules that determine how elements in structured documents such as HTML are rendered.

HTML and CSS Work Together

Suppose your HTML contains:

<h1>My Gardening Guide</h1>

<p>Welcome to my beginner gardening page.</p>

The HTML identifies:

· a main heading

· a paragraph

You could then add this CSS:

h1 {

  color: green;

}

p {

  font-size: 18px;

}

The browser combines the HTML structure with the CSS styling.

The result is still a heading followed by a paragraph, but the heading is green and the paragraph uses the specified font size.

This separation is useful because you can change the appearance without rewriting the actual page content.

CSS Can Control Much More Than Colour

CSS is not limited to changing text colour.

It can control many aspects of a web page, including:

· fonts

· text sizes

· text alignment

· backgrounds

· borders

· spacing

· widths and heights

· positioning

· columns

· flexible layouts

· grid layouts

· how pages adapt to different screen sizes

You will begin with only a few basic properties in this guide.

There is no need to learn every CSS feature at once.

Why Is It Called “Cascading” Style Sheets?

The word cascading refers to the system CSS uses when more than one style rule could affect the same element.

A web page can receive styling from different sources and different rules. CSS defines how browsers determine which declaration takes precedence when rules compete and how some values can be inherited from other elements.

For a complete beginner, you do not need to understand all of these rules yet.

For now, remember:

More than one CSS rule can affect the same element, and CSS has rules for deciding which styling is ultimately used.

You will see simple examples later in the article.

Three Common Ways to Add CSS

CSS can be added to HTML in several ways. The three methods beginners commonly encounter are:

· inline CSS

· internal CSS

· external CSS

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

For example:

<p style=”color: blue;”>This paragraph is blue.</p>

This can be useful for understanding a very small example, but using inline styles extensively can make pages harder to maintain.

Internal CSS

Internal CSS is placed in a <style> element, normally within the document’s <head>.

For example:

<head>

  <style>

  p {

  color: blue;

  }

  </style>

</head>

This keeps the styling together inside the same HTML document.

The HTML standard defines the <style> element for embedding styling information in a document.

External CSS

External CSS is stored in a separate file.

For example:

style.css

The CSS file might contain:

p {

  color: blue;

}

The HTML document can then connect to that stylesheet with:

<link rel=”stylesheet” href=”style.css”>

HTML provides the link element with the stylesheet relationship for linking an external CSS stylesheet to a document.

External stylesheets are especially useful because the same CSS file can be used to style multiple HTML pages.

Later in this guide, you will create a separate CSS file and connect it to your HTML page.

A Simple Before-and-After Example

Imagine this HTML:

<h1>My Recipe Page</h1>

<p>Welcome to my collection of simple recipes.</p>

Without your own CSS, the browser uses its normal default appearance.

Now add:

body {

  background-color: lightgrey;

}

h1 {

  color: darkblue;

}

p {

  font-size: 18px;

}

The content has not changed.

It still contains:

· one heading

· one paragraph

But the page now has:

· a light-grey background

· a dark-blue heading

· larger paragraph text

This demonstrates the basic relationship:

HTML says what the content is. CSS says how the content should look and be laid out.

Common Beginner Mistake: Using CSS Instead of Proper HTML Structure

CSS can make ordinary text large and bold, but visual appearance does not change the meaning of the HTML.

For example, you could make a paragraph look like a heading:

<p class=”large-text”>My Main Heading</p>

with CSS:

.large-text {

  font-size: 36px;

  font-weight: bold;

}

It might visually resemble a heading, but it is still a paragraph in the HTML structure.

When the content really is the main heading, use the appropriate HTML element:

<h1>My Main Heading</h1>

Then use CSS to control how the heading looks.

Keeping structure in HTML and presentation in CSS generally produces clearer, more maintainable, and more accessible web pages. HTML itself is designed to describe document structure, while CSS provides the styling layer.

Figure 2. HTML provides the structure and content of a web page, while CSS controls its appearance and layout.

Explanation: Keeping HTML and CSS in their proper roles makes a page easier to understand and maintain. The HTML describes the content, and the CSS provides the visual presentation.

Create Your First HTML Page

Now that you understand the basic purpose of HTML, you can create a simple web page yourself.

You do not need a web server or special development software for this exercise. A basic HTML file can be saved on your computer and opened directly in a web browser.

The HTML standard defines an HTML document as a structured collection of elements and text, with the document element represented by <html>.

Step 1: Open Your Practice Folder

Open the HTML-CSS-Practice folder you created earlier.

This folder will contain the files for your first small web page.

Step 2: Open a Plain-Text Editor

On Windows, you can use Notepad for this exercise.

Do not use a word processor for the HTML file. HTML code needs to be saved as plain text.

Step 3: Enter the Basic HTML

Type or carefully copy the following code:

<!doctype html>

<html lang=”en”>

<head>

  <meta charset=”utf-8″>

  <title>My First Web Page</title>

</head>

<body>

  <h1>Welcome to My First Web Page</h1>

  <p>I am learning how HTML works.</p>

  <p>This page was created as a beginner practice project.</p>

</body>

</html>

This document follows the basic HTML structure discussed earlier. The HTML syntax places the DOCTYPE before the document’s <html> element, while the <head> contains document metadata and the <body> represents the document’s content.

Step 4: Save the File as HTML

In Notepad:

1 Select File > Save As.

2 Open your HTML-CSS-Practice folder.

3 Enter the filename:

index.html

4 If a Save as type option appears, choose All Files.

5 If an encoding option appears, choose UTF-8.

6 Select Save.

The important part is that the file ends with:

.html

and not:

.txt

Your finished filename should be:

index.html

Why Use the Name index.html?

You could name a practice HTML file something else, such as:

practice.html

or:

about.html

However, index.html is a common filename for the main or starting page of a simple website.

Using it now also prepares you for later exercises when several website files may be stored together.

Step 5: Open the Page in Your Browser

Locate index.html in your practice folder.

Double-click the file.

Your normal web browser should open it and display something similar to:

Welcome to My First Web Page

I am learning how HTML works.

This page was created as a beginner practice project.

The browser reads the HTML and interprets the elements to create the page you see. HTML documents are composed of elements and text arranged in a structured tree.

You have now created a real HTML document.

It is simple, but the basic principle is the same for much larger web pages: HTML describes the structure and meaning of the content.

Step 6: Make Your First Change

Return to Notepad.

Find:

<h1>Welcome to My First Web Page</h1>

Change it to something different, for example:

<h1>Welcome to My Gardening Page</h1>

Now change the first paragraph:

<p>I am learning how HTML works.</p>

to:

<p>This page contains beginner gardening ideas.</p>

Save the file.

Return to your browser and refresh the page.

You should now see your new heading and paragraph.

This simple exercise demonstrates an important development workflow:

1 Edit the HTML.

2 Save the file.

3 Refresh the browser.

4 Examine the result.

You will use this workflow repeatedly while learning HTML and CSS.

Add a Section Heading

Inside the <body>, below your introductory paragraphs, add:

<h2>My Favourite Plants</h2>

Then add:

<p>I enjoy growing tomatoes, herbs, and flowers.</p>

Your body could now look like this:

<body>

  <h1>Welcome to My Gardening Page</h1>

  <p>This page contains beginner gardening ideas.</p>

  <p>This page was created as a beginner practice project.</p>

  <h2>My Favourite Plants</h2>

  <p>I enjoy growing tomatoes, herbs, and flowers.</p>

</body>

Save the file and refresh your browser again.

You should now see a main heading, paragraphs, and a smaller section heading.

Add a Simple List

Suppose you want to list three plants.

Add this below the last paragraph:

<ul>

  <li>Tomatoes</li>

  <li>Basil</li>

  <li>Marigolds</li>

</ul>

The <ul> element represents an unordered list, while each <li> represents an item in the list. These elements are part of HTML’s structural vocabulary for representing content according to its meaning.

After saving and refreshing the browser, the three items should appear as a bulleted list.

Your page is becoming more structured, even though you have not added CSS yet.

Add a Link

You can also add a hyperlink.

For practice, add:

<p>

  <a href=”https://example.com”>Visit Example</a>

</p>

The <a> element represents a hyperlink when it has an href attribute identifying its destination.

When you open the page, the text Visit Example should appear as a clickable link.

For a real website, always check that links point to the correct and appropriate destination before publishing.

Your Complete Practice Page

At this stage, your HTML could look like this:

<!doctype html>

<html lang=”en”>

<head>

  <meta charset=”utf-8″>

  <title>My Gardening Page</title>

</head>

<body>

  <h1>Welcome to My Gardening Page</h1>

  <p>This page contains beginner gardening ideas.</p>

  <p>This page was created as a beginner practice project.</p>

  <h2>My Favourite Plants</h2>

  <p>I enjoy growing tomatoes, herbs, and flowers.</p>

  <ul>

  <li>Tomatoes</li>

  <li>Basil</li>

  <li>Marigolds</li>

  </ul>

  <p>

  <a href=”https://example.com”>Visit Example</a>

  </p>

</body>

</html>

Do not worry about making the page attractive yet.

Right now, the objective is to create a clear HTML structure that works correctly.

CSS will handle the visual design later.

What If the Page Does Not Work?

If the page does not appear as expected, check the simple problems first.

Look for:

· a missing < or >

· a closing tag that is missing

· a misspelled element name

· incorrectly nested elements

· a file accidentally saved as .txt

· changes that were not saved

· a browser page that was not refreshed

HTML elements need to be nested correctly rather than overlapping one another.

For example, this nesting is incorrect:

<p>This is <strong>important.</p></strong>

A correctly nested version is:

<p>This is <strong>important.</strong></p>

When troubleshooting, check one problem at a time rather than changing the entire document.

Using ChatGPT to Check a Small HTML Example

If you cannot identify a problem after checking the basics, ChatGPT can be useful as a second pair of eyes.

For example, you could use:

Prompt:

I am learning HTML as a complete beginner. Please check the following small HTML page for errors. Explain any problems in simple language and show me only the corrections that are necessary.

Then paste the relevant practice code below the prompt.

Before sharing code, remove passwords, private information, API keys, or anything else that should remain confidential.

Also remember that a suggested correction should still be tested in your browser. The browser result and reliable documentation remain important checks.

Common Beginner Mistake: Changing Too Much at Once

When a page works, it is tempting to add several headings, links, images, colours, and layout changes at the same time.

That can make troubleshooting difficult.

How to Avoid This Mistake: Make one small change, save the file, refresh the browser, and confirm the result before moving on.

This may seem slower at first, but it usually saves time because you can identify exactly which change caused a problem.

Figure 3. A simple HTML workflow is to write the code, save the HTML file, open it in a browser, and then edit, save, and refresh as you make changes.

Explanation: Testing small changes immediately makes HTML easier to learn and troubleshoot. If something stops working, you can compare the latest change with the version that worked before.

Add CSS to Your First HTML Page

Your practice page now has HTML structure, but it still uses the browser’s default appearance.

The next step is to add CSS.

For this exercise, you will create a separate CSS file and connect it to your HTML document. Keeping the CSS in a separate file is a useful habit because the same stylesheet can later be used by more than one HTML page.

HTML supports linking an external stylesheet with a <link> element using the stylesheet relationship.

Step 1: Create a CSS File

Open your plain-text editor.

Create a new blank file.

Enter:

body {

  background-color: #f5f5f5;

  font-family: Arial, sans-serif;

}

h1 {

  color: darkblue;

}

h2 {

  color: darkgreen;

}

p {

  font-size: 18px;

}

Save this new file inside the same HTML-CSS-Practice folder as your HTML file.

Name it:

style.css

Your folder should now contain:

· index.html

· style.css

Keeping both files in the same folder makes the first exercise easier because the HTML file can refer directly to style.css.

Step 2: Connect the CSS File to HTML

Open:

index.html

Inside the <head> section, add:

<link rel=”stylesheet” href=”style.css”>

Your <head> should now look similar to this:

<head>

  <meta charset=”utf-8″>

  <title>My Gardening Page</title>

  <link rel=”stylesheet” href=”style.css”>

</head>

The important part is:

href=”style.css”

This tells the browser where to find the stylesheet.

Because index.html and style.css are in the same folder, the filename alone is enough for this simple example.

Step 3: Save and Refresh

Save both files.

Return to the browser and refresh the page.

You should notice several changes:

· the page background becomes light grey

· the main heading becomes dark blue

· the section heading becomes dark green

· the paragraph text becomes larger

· Arial is used when it is available, with a generic sans-serif font as the fallback

The HTML content has not changed.

The CSS changed its presentation.

This demonstrates the central relationship between the two technologies:

HTML describes the page structure. CSS controls its presentation.

CSS is specifically designed to describe how structured documents such as HTML are rendered.

Step 4: Change One CSS Value

Open style.css.

Find:

h1 {

  color: darkblue;

}

Change it to:

h1 {

  color: green;

}

Save the CSS file.

Refresh the browser.

The main heading should now appear green.

Notice that you did not need to change the HTML heading:

<h1>Welcome to My Gardening Page</h1>

The HTML still describes the content as the main heading. Only its appearance changed.

This separation becomes increasingly useful as a website grows.

Step 5: Add Some Spacing

Pages are generally easier to read when content is not pressed against the edges of the browser window.

Add this property to your existing body rule:

padding: 20px;

The complete rule becomes:

body {

  background-color: #f5f5f5;

  font-family: Arial, sans-serif;

  padding: 20px;

}

Save and refresh the page.

The content should now have additional space around it.

Step 6: Improve Paragraph Readability

You can also control the space between lines of text.

Change your paragraph rule to:

p {

  font-size: 18px;

  line-height: 1.6;

}

Save the file and refresh the page.

The lines in your paragraphs should now have more vertical space between them.

Small adjustments such as font size, line spacing, and surrounding space can make content easier to read.

However, visual choices should not be based only on personal preference. Later in this article, we will look at accessibility considerations such as readable text, colour contrast, keyboard use, meaningful structure, and alternative text.

Your CSS File So Far

At this point, style.css could contain:

body {

  background-color: #f5f5f5;

  font-family: Arial, sans-serif;

  padding: 20px;

}

h1 {

  color: green;

}

h2 {

  color: darkgreen;

}

p {

  font-size: 18px;

  line-height: 1.6;

}

Your HTML remains in:

index.html

and your styling remains in:

style.css

This is an example of using an external stylesheet.

What Happens If the CSS Does Not Appear?

If you refresh the page and nothing changes, check the simple causes first.

Look for:

· whether style.css was saved

· whether it was accidentally saved as style.css.txt

· whether index.html was saved after adding the <link> element

· whether the filename in href=”style.css” exactly matches the CSS filename

· whether both files are in the expected folder

· whether a {, }, :, or other important character is missing from the CSS

For example, this is correct:

h1 {

  color: green;

}

This is incorrect:

h1

  color: green;

}

The second example is missing the opening {.

Common Beginner Mistake: Mixing Up HTML and CSS Syntax

HTML commonly uses angle brackets:

<p>Hello</p>

CSS commonly uses selectors, curly brackets, properties, and values:

p {

  color: blue;

}

These are two different languages with different syntax.

How to Avoid This Mistake: Keep your HTML in index.html and your external CSS in style.css. When an error occurs, first determine whether the problem is with the page structure or with its styling.

Using ChatGPT When a CSS Rule Does Not Work

If you have checked the filename, file location, and basic syntax but still cannot find the problem, you can ask ChatGPT to examine a small relevant section of the code.

For example:

Prompt:

I am a beginner learning HTML and CSS. My CSS is not changing the heading colour. Check the HTML and CSS below for the likely problem. Explain the cause in simple language and show only the correction I need.

Then provide the relevant HTML and CSS.

Do not include passwords, API keys, confidential information, or other sensitive data.

After receiving a suggested correction, make the change yourself, save the files, and test the page again. This helps you understand both the problem and the solution instead of simply replacing your code without knowing why.

Figure 4. The HTML document links to the external CSS file, allowing the browser to combine the page structure with its visual styling.

Explanation: Separating HTML and CSS makes their different roles easier to understand. The HTML file contains the page structure and content, while the CSS file contains the styling instructions.

Use Common CSS Properties

Once your HTML page is connected to style.css, you can begin experimenting with a few common CSS properties.

You do not need to learn dozens of properties at once. Start with the ones that make an obvious visual difference, then build from there.

Change Text Colour

The color property controls the foreground colour of text. CSS supports named colours as well as other colour formats.

For example:

h1 {

  color: darkblue;

}

This makes the text inside <h1> elements dark blue.

You can also use hexadecimal colour values:

h1 {

  color: #003366;

}

For beginners, named colours are often easier to understand. As you gain experience, hexadecimal and other colour formats provide more precise control.

Change the Background Colour

You can give the whole page a background colour:

body {

  background-color: #f5f5f5;

}

Or you can apply a background to a particular element:

h2 {

  background-color: lightgrey;

}

When choosing text and background colours, appearance is not the only consideration. The text must also remain easy to read.

We will look more closely at colour contrast in the accessibility section later in this guide.

Change the Font

The font-family property tells the browser which font family or families to use.

For example:

body {

  font-family: Arial, sans-serif;

}

CSS allows you to provide a prioritized list of font families. If the first font is unavailable, the browser can try the next suitable choice.

In this example:

· Arial is the preferred font.

· sans-serif is a generic fallback.

A fallback is useful because a particular font may not be installed on every visitor’s device.

Change the Font Size

Use font-size to control text size:

p {

  font-size: 18px;

}

You can also give headings different sizes:

h1 {

  font-size: 36px;

}

h2 {

  font-size: 28px;

}

Avoid using CSS size alone to create document structure.

For example, a large bold paragraph is still a paragraph. If the text is genuinely a heading, use the appropriate HTML heading element and then style that element with CSS.

Add Space Inside an Element

The padding property adds space between an element’s content and its border.

For example:

body {

  padding: 20px;

}

This creates space between the page content and the edges of the body area.

Another example:

h2 {

  padding: 10px;

}

This adds space around the content inside the <h2> element.

Add Space Around an Element

The margin property controls space outside an element’s border area. CSS treats content, padding, border, and margin as parts of an element’s box model.

For example:

h2 {

  margin-top: 30px;

}

This adds space above the heading.

Or:

p {

  margin-bottom: 20px;

}

This adds space below paragraphs.

A simple way to remember the difference is:

· padding = space inside the element’s border

· margin = space outside the element’s border

Add a Border

A border can help you see where an element begins and ends.

For example:

p {

  border: 1px solid grey;

}

You can combine the border with padding:

p {

  border: 1px solid grey;

  padding: 10px;

}

The padding prevents the text from sitting directly against the border.

Try a Simple Content Box

Add the following HTML inside your <body>:

<div class=”tip-box”>

  <h2>Gardening Tip</h2>

  <p>Check the soil before watering your plants.</p>

</div>

The <div> creates a container that can group related content.

The attribute:

class=”tip-box”

gives the container a class name that CSS can target.

Now add this to style.css:

.tip-box {

  background-color: #ffffff;

  border: 1px solid #cccccc;

  padding: 20px;

  margin-top: 20px;

}

Save both files and refresh the browser.

You should now see a simple box containing the heading and paragraph.

What Does the Dot Mean?

Notice this selector:

.tip-box

The dot . tells CSS that tip-box is a class name.

It matches HTML such as:

<div class=”tip-box”>

This allows you to create a reusable style and apply it to different elements that share the same class.

For example:

<div class=”tip-box”>

  <p>Tip number one.</p>

</div>

<div class=”tip-box”>

  <p>Tip number two.</p>

</div>

Both containers can use the same CSS rule.

Improve Your Practice Page

Your CSS could now look similar to this:

body {

  background-color: #f5f5f5;

  font-family: Arial, sans-serif;

  padding: 20px;

}

h1 {

  color: darkblue;

  font-size: 36px;

}

h2 {

  color: darkgreen;

  font-size: 28px;

  margin-top: 30px;

}

p {

  font-size: 18px;

  line-height: 1.6;

}

.tip-box {

  background-color: #ffffff;

  border: 1px solid #cccccc;

  padding: 20px;

  margin-top: 20px;

}

You have now used several important CSS concepts:

· selectors

· properties

· values

· colours

· fonts

· font sizes

· margins

· padding

· borders

· classes

That is already enough to make meaningful changes to a simple page.

Common Beginner Mistake: Adding Too Many Styles

When you discover CSS, it can be tempting to change every colour, add several borders, use many different font sizes, and fill the page with visual effects.

The result can quickly become difficult to read.

How to Avoid This Mistake: Start with a small number of consistent styles. Use clear headings, readable text, comfortable spacing, and restrained colours. Add extra styling only when it improves the page.

Simple and readable usually works better than complicated and decorative.

Figure 5. The CSS box model describes an element as content surrounded by padding, a border, and margin.

Explanation: Understanding the box model makes spacing much easier to control. Padding creates space inside an element’s border, while margin creates space outside it.

Use ChatGPT as an HTML and CSS Learning Assistant

Once you understand the basic roles of HTML and CSS, ChatGPT can be useful when you need an explanation, an example, or help finding a problem.

ChatGPT can be useful for focused coding explanations, examples, and troubleshooting. OpenAI currently provides Codex as its dedicated software-development experience for tasks such as writing or debugging code, running tests and commands, and reviewing changes.

For a beginner, however, the most useful approach is not simply asking for a complete website and copying the result.

A better approach is to use ChatGPT for small, understandable tasks.

Ask for an Explanation

Suppose you see this CSS:

.tip-box {

  padding: 20px;

  margin-top: 20px;

}

and you do not understand it.

You could ask:

Example prompt:

I am a complete beginner learning CSS. Explain this code in simple language. Explain what .tip-box, padding, margin-top, and 20px mean. Give me one small example of what would happen if I changed each value.

This type of prompt does more than ask for an answer. It asks for an explanation that helps you understand the code.

Ask for a Small Example

If you are learning links, for example, you could ask:

Example prompt:

Show me a very simple HTML example containing one heading, one paragraph, and one link. Explain each line. Do not add CSS or JavaScript.

Keeping the request small makes the result easier to examine and test.

After receiving the example:

1. Read the explanation.

2. Type or copy the code into your practice file.

3. Save the file.

4. Open or refresh it in your browser.

5. Check whether the result matches the explanation.

6. Change one part and test it again.

This turns the example into a learning exercise rather than a copy-and-paste exercise.

Ask ChatGPT to Review Your Own Code

You can also write the code yourself first and then ask for help reviewing it.

For example:

Example prompt:

I wrote the HTML below myself. Check it for basic HTML errors and incorrect nesting. Do not redesign the page. List the problems first, explain them simply, and then show the corrected version.

Then paste the relevant code.

This approach is particularly useful because you attempt the task before seeing a suggested solution.

Ask for Help with One Specific Problem

When something does not work, describe the problem precisely.

Instead of:

My CSS doesn’t work. Fix it.

try:

My <h1> text remains black even though I tried to make it dark blue. I have included my HTML and CSS below. Find the most likely cause, explain it simply, and show only the change I need to make.

A specific question gives important context:

· what you expected

· what actually happened

· which part of the page is affected

· what kind of explanation you need

This also makes it easier for you to understand the proposed correction.

Ask Why a Correction Works

Finding a working answer is useful. Understanding why it works is more valuable for learning.

After correcting an error, you can ask:

Example prompt:

The correction worked. Explain why my original code failed and why the corrected version works. Use beginner-friendly language.

You can then compare the explanation with your original and corrected files.

Ask for Alternatives

There is often more than one way to achieve a result with HTML or CSS.

For example:

Example prompt:

Show me two beginner-friendly ways to add space around this box with CSS. Explain the difference between margin and padding and tell me when each is appropriate.

This can help you understand that web development is not always about finding one single correct line of code.

Different approaches can have different effects, advantages, and limitations.

Give ChatGPT Enough Context

If you ask for troubleshooting help, provide the smallest amount of code needed to understand the problem.

For example, if the problem concerns one heading and its CSS, you may only need to provide:

<h1 class=”page-title”>My Gardening Page</h1>

and:

.page-title {

  color: darkblue;

}

You usually do not need to provide an entire website for a small styling question.

Providing focused examples can make both the question and the answer easier to understand.

Do Not Share Secrets or Private Information

Before pasting code into an online AI service, check it for information that should remain private.

Remove or replace information such as:

· passwords

· API keys

· authentication tokens

· private URLs

· database credentials

· customer information

· personal contact details that are not needed for the question

· confidential business information

For example, change:

API_KEY=real-secret-value

to:

API_KEY=YOUR_API_KEY_HERE

The code can still demonstrate the problem without exposing the real secret.

Do Not Assume Suggested Code Is Correct

A code suggestion can look convincing and still contain mistakes.

It might:

· use the wrong HTML element

· contain invalid syntax

· misunderstand your intended design

· introduce an accessibility problem

· create unnecessary complexity

· use an approach that is inappropriate for your project

· solve one problem while creating another

For this reason, treat suggested code as something to review and test, not as automatically correct.

A useful beginner workflow is:

1. Ask for help with a specific problem.

2. Read the explanation.

3. Examine the suggested code.

4. Make the change in your practice file.

5. Save the file.

6. Test it in your browser.

7. Check that the rest of the page still works.

8. Keep the change only when you understand and accept the result.

Keep the Original Working Version

Before replacing a large section of working code with a suggested version, save a copy.

For example:

index-before-change.html

and:

index-after-change.html

This makes it easier to compare the two versions or return to the earlier one if the change causes problems.

For larger projects, professional developers often use version-control systems, but simple backup copies are enough for the beginner exercises in this article.

A Useful Prompt Formula for Beginners

You can build clearer coding questions using this simple formula:

Skill level + Goal + Current code + Problem + Type of help wanted

For example:

I am a complete beginner learning CSS. I want a light-grey box around a paragraph. My current HTML and CSS are below. The border appears, but there is no space between the text and the border. Explain what is missing and show the smallest correction.

This is much more useful than simply saying:

Fix my code.

Common Beginner Mistake: Copying a Large Block of Code Without Understanding It

It can be tempting to request a complete page, paste everything into a file, and stop when the browser displays something attractive.

The problem is that when the page later breaks, you may have no idea which part controls the heading, spacing, colours, or layout.

How to Avoid This Mistake: Build the page in small pieces. Understand each addition before moving to the next one.

ChatGPT is most valuable to a beginner when it helps make the code more understandable, not when it hides the learning process.

Figure 6. Use ChatGPT to support the learning process: ask a focused question, review the explanation and suggested code, test the result, and understand the change before keeping it.

Explanation: The most useful beginner workflow combines assistance with your own testing and judgement. This helps you gradually learn how HTML and CSS work instead of depending on code you do not understand.

Make Your Page Work on Different Screen Sizes

People may view a website on a large desktop monitor, a laptop, a tablet, or a small phone.

A page that looks comfortable on a wide screen can become difficult to read if its layout is too wide or if elements cannot adapt when the available space becomes smaller.

Designing a page so that it adapts to different screen and window sizes is commonly called responsive web design.

CSS provides several tools for creating flexible layouts. One of the most important is the media query, which allows CSS rules to be applied when particular conditions are met, such as the width of the display area.

Start with a Flexible Page Width

Your practice page currently allows the content to use most of the available browser width.

On a very wide monitor, long lines of text can become uncomfortable to read.

You can place the main content inside a container.

Change the HTML inside <body> so that it begins with:

<div class=”container”>

and ends with:

</div>

For example:

<body>

  <div class=”container”>

  <h1>Welcome to My Gardening Page</h1>

  <p>This page contains beginner gardening ideas.</p>

  <h2>My Favourite Plants</h2>

  <p>I enjoy growing tomatoes, herbs, and flowers.</p>

  </div>

</body>

Now add this CSS:

.container {

  max-width: 900px;

  margin: 0 auto;

}

The max-width property limits how wide the container can become.

The declaration:

margin: 0 auto;

allows the browser to distribute the remaining horizontal space around the container when space is available.

The result is a page that can remain narrower on a large display while still becoming smaller when the browser window narrows.

Avoid Fixed Widths That Cause Problems

Consider this:

.container {

  width: 1200px;

}

A fixed width of 1200 pixels may fit on a large monitor but can be much wider than the available space on a small screen.

That can cause horizontal scrolling or make part of the page difficult to reach.

For simple beginner layouts, a flexible approach is often safer:

.container {

  width: 100%;

  max-width: 900px;

}

This allows the container to use the available width while preventing it from becoming excessively wide.

Make Images Flexible

Images can also become wider than a small screen if their dimensions are not handled carefully.

A useful beginner rule is:

img {

  max-width: 100%;

  height: auto;

}

This allows an image to shrink when necessary instead of extending beyond its available container.

The height: auto declaration helps preserve the image’s proportions when its displayed width changes.

Responsive images can involve more advanced HTML features as well, but this simple CSS rule is a good starting point for a basic practice page.

What Is a Media Query?

A media query allows you to apply certain CSS only when a condition is true.

For example:

@media (max-width: 600px) {

  h1 {

  font-size: 28px;

  }

}

This means:

When the viewport is 600 CSS pixels wide or narrower, use a 28-pixel font size for the main heading.

Media queries can test characteristics of the display environment and are used with CSS @media rules to apply styles conditionally.

Try a Simple Responsive Change

Suppose your normal styles include:

body {

  padding: 20px;

}

h1 {

  font-size: 36px;

}

You could add this at the bottom of style.css:

@media (max-width: 600px) {

  body {

  padding: 10px;

  }

  h1 {

  font-size: 28px;

  }

}

On a wider screen, the original styles remain.

When the available width reaches 600 pixels or less:

· the page padding becomes smaller

· the main heading becomes smaller

This is a simple example of adapting a design to the available space.

Test It Without a Phone

You can perform a basic test on your computer.

1. Open your HTML page in the browser.

2. Make the browser window wide.

3. Slowly make the window narrower.

4. Watch the content change.

5. Check whether text remains readable.

6. Check whether anything extends unnecessarily beyond the window.

When the window becomes narrow enough to meet the media-query condition, you should see the smaller heading and reduced padding.

Browser developer tools can provide more advanced device testing later, but simply resizing the browser window is enough to demonstrate the basic idea.

Responsive Design Is Also an Accessibility Issue

Responsive layouts are not only about making websites look attractive on phones.

Users may enlarge text or zoom the page because they need larger content to read comfortably.

WCAG 2.2 includes requirements concerning reflow, with the aim of allowing content to be presented at narrow widths without requiring two-dimensional scrolling for ordinary content, except where a two-dimensional layout is necessary for its use or meaning.

A layout that adapts to available space can therefore benefit:

· people using smaller screens

· people who enlarge text

· people who zoom a page

· people who use a browser window that is not full screen

Responsive design and accessibility often support the same goal: allowing people to use content in different circumstances.

Do Not Hide Important Content Just to Make the Page Fit

A common shortcut is to remove content whenever the screen becomes small.

For example, a design might hide an important instruction simply because there is less room.

That can create an accessibility problem because users on smaller or enlarged views may lose information available to other users.

W3C accessibility guidance identifies loss of content at narrow viewport widths as a potential failure of the reflow requirement.

Instead, try to make the content:

· wrap onto additional lines

· move below other content

· resize appropriately

· reflow into a simpler layout

The information should normally remain available.

Common Beginner Mistake: Designing for Only Your Own Screen

It is easy to create a page on a desktop computer, see that it looks correct, and assume everyone will see the same thing.

They will not.

Different visitors can have:

· different screen sizes

· different browser-window sizes

· different zoom settings

· different default font settings

· different accessibility needs

How to Avoid This Mistake: Regularly resize the browser window while you work. Check that text remains readable, images fit within the available space, and important content does not disappear.

You do not need to create a perfect responsive website during your first HTML and CSS lesson. The important concept is that a web page should be able to adapt rather than depending on one exact screen size.

Figure 7. Responsive CSS allows the same web content to adapt to different available screen and browser widths.

Explanation: A responsive page should preserve important content while allowing the layout to adjust as the available space changes. Media queries are one CSS tool that can apply different styling under specified conditions.

Build Accessibility into Your HTML and CSS

Accessibility means designing and developing web content so that people with disabilities can use it.

This can include people who have:

· visual disabilities

· hearing disabilities

· limited mobility

· cognitive or learning disabilities

· speech disabilities

· temporary limitations or injuries

The W3C Web Accessibility Initiative explains that accessibility involves making web content perceivable, operable, understandable, and robust. WCAG 2.2 is the current W3C Recommendation in the WCAG 2 series.

For beginners, accessibility may sound complicated. You do not need to understand every WCAG requirement before creating your first practice page.

Start with a few good habits.

Use Proper HTML Headings

Headings should describe the structure of the page.

For example:

<h1>Beginner Gardening Guide</h1>

<h2>Choosing Plants</h2>

<p>Choose plants suited to your climate.</p>

<h2>Watering Plants</h2>

<p>Check the soil before watering.</p>

The heading elements provide more than visual formatting. They identify relationships and structure in the document. WCAG requires information and relationships conveyed visually to also be programmatically determinable or available in text.

Do not use a paragraph simply because CSS can make it look like a heading.

For example:

<p class=”big-text”>Choosing Plants</p>

may look large after styling, but it still remains a paragraph in the HTML.

When the content really is a section heading, use the appropriate heading element.

Provide Useful Alternative Text for Images

Consider this image:

<img src=”tomatoes.jpg” alt=”Ripe red tomatoes growing on a garden plant”>

The alt attribute provides a text alternative.

Alternative text can help when an image cannot be seen or when assistive technology is being used.

However, there is no single description that is correct for every image in every situation. W3C guidance emphasizes that appropriate alternative text depends on the image’s purpose and context.

For example, an informative gardening photograph might use:

alt=”Ripe red tomatoes growing on a garden plant”

A purely decorative image may need different treatment.

Do not automatically fill every alt attribute with a long description of everything visible in the picture.

Ask instead:

What information or purpose does this image provide in this particular page?

That question usually leads to more useful alternative text.

Do Not Use Colour Alone to Communicate Important Information

Imagine a form that says:

Fields shown in red are required.

A person who cannot distinguish the colour may miss the information.

A better approach is to provide another indicator, such as:

Required

or:

<label for=”email”>Email address (required)</label>

Colour can still reinforce the message, but it should not be the only way important information is communicated.

WCAG 2.2 includes a requirement that colour must not be the only visual means used to convey information, indicate an action, prompt a response, or distinguish a visual element when that information matters.

Make Sure Text Has Enough Contrast

Text should be easy to distinguish from its background.

For example, very pale grey text on a white background may look elegant to some people but can be difficult for others to read.

WCAG 2.2 Level AA generally requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for qualifying large text, subject to specific exceptions.

For example, this may be difficult to read:

p {

  color: #dddddd;

  background-color: #ffffff;

}

A darker text colour will generally provide stronger contrast:

p {

  color: #333333;

  background-color: #ffffff;

}

Do not judge colour contrast only by looking at your own screen.

Contrast-checking tools can help you measure the actual ratio before publishing a website.

Keep Links Understandable

Compare these two links:

<a href=”watering.html”>Click here</a>

and:

<a href=”watering.html”>Read the beginner watering guide</a>

The second version gives the reader more information about where the link leads.

Clear link text is especially useful when users navigate through links separately from the surrounding paragraphs.

Whenever practical, describe the destination or purpose rather than relying on vague phrases such as:

· Click here

· More

· Read this

The surrounding context still matters, but meaningful link wording usually makes navigation easier.

Make Interactive Features Work with a Keyboard

Not everyone uses a mouse.

A visitor may navigate with:

· a keyboard

· a switch device

· assistive technology that works through keyboard-style interaction

WCAG requires functionality to be operable through a keyboard interface where applicable, subject to limited exceptions for interactions that depend on a path of movement rather than just endpoints.

For a beginner page containing ordinary HTML links and form controls, using the correct native HTML elements gives you a strong starting point.

For example, use a real link:

<a href=”contact.html”>Contact Us</a>

rather than trying to make an unrelated element behave like a link using styling alone.

Similarly, use a real button when the user needs to activate a button action:

<button type=”button”>Show Details</button>

Native HTML controls already provide useful browser behaviour that can be difficult to reproduce correctly with custom code.

Keep Keyboard Focus Visible

When a keyboard user presses the Tab key, the browser normally moves focus from one interactive element to another.

There should be a visible indication of which element currently has focus.

Do not remove that indication simply because you dislike how it looks.

For example, avoid blindly adding:

a:focus {

  outline: none;

}

without providing an accessible replacement.

WCAG includes requirements for visible keyboard focus, and WCAG 2.2 also contains additional focus-related criteria.

If you customize the focus appearance later, make sure the replacement remains clearly visible.

Make Text Comfortable to Read

Accessibility is not achieved by one special HTML tag.

Many small design decisions matter.

Helpful beginner practices include:

· using readable font sizes

· providing comfortable line spacing

· avoiding unnecessarily long lines of text

· keeping paragraphs reasonably short

· using clear headings

· leaving adequate space around content

· avoiding excessive animation or flashing

· allowing layouts to adapt when text or the page is enlarged

W3C’s preliminary accessibility checks specifically include headings, colour contrast, text resizing, keyboard access, visible focus, form labels, image alternatives, and basic page structure among useful areas to examine.

Accessibility Is Not Something to Add at the End

A common mistake is to finish an entire website and then ask:

How do I make this accessible?

It is usually easier to consider accessibility while creating the page.

For example:

· choose the correct HTML element when you create the content

· write meaningful link text when adding the link

· provide appropriate alternative text when adding an informative image

· check colour contrast when selecting colours

· test keyboard navigation when adding interactive features

· test narrow layouts while designing the page

These habits reduce the amount of correction required later.

Common Beginner Mistake: Assuming an Attractive Page Is Automatically Accessible

A page can look polished and still be difficult or impossible for some people to use.

For example, it may have:

· weak colour contrast

· missing image alternatives

· unclear heading structure

· controls that cannot be reached with a keyboard

· important information communicated only with colour

· content that disappears when the page is enlarged

How to Avoid This Mistake: Treat visual design and accessibility as related but separate checks. Test both.

Can ChatGPT Check Accessibility?

ChatGPT can help identify possible accessibility issues in small HTML and CSS examples, but it should not be treated as proof that a page conforms to WCAG.

For example, you could ask:

Example prompt:

Review this small HTML and CSS example for obvious beginner accessibility problems. Check the heading structure, image alt text, link wording, colour use, and keyboard-related HTML. Explain possible problems, but do not claim that the page passes WCAG.

The final wording is important.

Automated or AI-assisted review can help identify issues, but accessibility evaluation also requires human judgement and testing. W3C provides accessibility evaluation guidance and describes preliminary checks as only an initial review rather than a complete conformance assessment.

Figure 8. Beginner accessibility starts with good structure, useful text alternatives, readable contrast, meaningful links, keyboard usability, and flexible page design.

Explanation: Accessibility should be considered throughout the design and coding process. These beginner checks do not cover every WCAG requirement, but they establish better habits for creating web content that more people can use.

Protect Privacy and Security While You Practise

HTML and CSS are beginner-friendly technologies, but good privacy and security habits should start from your first project.

The most important rule is simple:

Do not place secrets or sensitive information in code that may be shared, uploaded, published, or sent to an online service.

Never Put Passwords or API Keys in HTML or CSS

HTML and CSS used by a normal web page are delivered to the visitor’s browser.

That means information placed directly in those files should not be treated as secret.

Do not put information such as:

· passwords

· private API keys

· authentication tokens

· database passwords

· private access codes

· confidential customer information

into front-end files.

OWASP warns that sensitive information such as private API keys can be exposed when it is hard-coded into client-side web content.

For example, do not write something like:

<p>My API key is ABC123SECRET</p>

You should also avoid placing a real secret in code simply because the value is hidden from the visible page.

Something that does not appear on the screen can still be present in the page source.

Use Safe Placeholder Information

When practising or asking for coding help, use fictional values.

For example:

YOUR_API_KEY_HERE

or:

name@example.com

This allows you to demonstrate the structure without exposing real information.

If code already contains sensitive details, remove or replace them before sharing it.

Be Careful with HTML Comments

HTML comments can be useful for leaving notes in your code.

For example:

<!– Main page heading –>

<h1>My Gardening Page</h1>

However, comments are part of the document source.

Do not use comments to store private information such as:

<!– Admin password: secret123 –>

Removing information from the visible page does not automatically make it private.

Forms Need More Than HTML and CSS

HTML can create a form:

<form>

  <label for=”email”>Email address</label>

  <input type=”email” id=”email” name=”email”>

  <button type=”submit”>Send</button>

</form>

This creates the visible form controls, but HTML and CSS alone do not provide a complete secure system for collecting and processing personal information.

A real form may require additional work involving:

· secure data transmission

· server-side processing

· validation

· storage

· access controls

· privacy notices

· appropriate retention practices

The HTML standard defines form controls and how they submit information, but protecting the data received by a real web application requires security measures beyond the visible HTML form.

For this beginner article, keep form exercises fictional unless you already understand the system that will receive and protect the submitted information.

Do Not Rely Only on What Happens in the Browser

A future project may use JavaScript to check information before a form is submitted.

Browser-side checks can improve usability, but they should not be treated as the only security protection.

OWASP notes that client-side protections can be bypassed and should not be relied upon as the sole defence for sensitive operations.

This is an important distinction:

HTML and CSS create the page interface. They do not replace the security controls required behind a real website or application.

Check Code Before Sharing It with ChatGPT

If you use ChatGPT to review a coding problem, examine the code before pasting it.

Remove information such as:

· passwords

· access tokens

· API keys

· private URLs

· customer records

· personal contact information that is unnecessary for the question

· confidential company information

For example, change:

API_KEY=sk-real-secret-value

to:

API_KEY=YOUR_API_KEY_HERE

The important part of a coding question is normally the structure or behaviour of the code, not the real secret.

Understand ChatGPT Data Controls

For personal ChatGPT accounts, OpenAI states that content may be used to improve its models depending on the user’s settings. Users can turn off Improve the model for everyone in Settings > Data Controls so that new conversations are not used for model training.

OpenAI also provides Temporary Chat. According to current OpenAI documentation, Temporary Chats do not appear in normal chat history, do not create memories, and are not used to train models. OpenAI states that Temporary Chats are deleted from its systems after 30 days and may be reviewed only to monitor for abuse.

These controls are useful, but they are not a reason to paste passwords or other secrets into a conversation.

The safest beginner rule remains:

Do not share information that does not need to be shared.

OpenAI’s privacy features, product settings, and retention practices can change, so check the current official information when you first use a relevant feature, when you change plans or settings, when you receive a policy-update notice, and periodically thereafter.

Be Careful Before Publishing Your Practice Files

Before uploading a practice project to a public website, hosting service, portfolio, or code-sharing platform, inspect the files first.

Look for:

· personal names or addresses you did not intend to publish

· private email addresses

· account information

· secret keys or tokens

· private comments

· confidential filenames

· images containing private information

· copied material you may not have permission to publish

Anything placed on a public website should be treated as potentially viewable by other people.

Common Beginner Mistake: Assuming Hidden Means Private

A value can be absent from the visible page and still exist in the HTML, JavaScript, metadata, browser storage, or other client-side resources.

OWASP specifically recommends checking web-page content for information leakage because sensitive details can be exposed in client-side resources.

How to Avoid This Mistake: Never depend on visual hiding as a security measure. Do not put a secret into public-facing code in the first place.

Common Beginner Mistake: Publishing AI-Suggested Code Without Reviewing It

A suggested piece of code may contain features you did not request or fully understand.

Before publishing it:

1 Read the code.

2 Identify what information it uses.

3 Remove anything private.

4 Check unfamiliar features.

5 Test it locally.

6 Review accessibility and security implications.

7 Publish only when you understand what the code is doing.

For anything that handles passwords, payments, accounts, personal information, or other sensitive data, beginner experimentation is not a substitute for appropriate professional security review.

Figure 9. Review code for passwords, keys, personal information, private comments, and other sensitive data before sharing or publishing it.

Explanation: Front-end code should not be treated as a safe place for secrets. Remove unnecessary sensitive information before asking for assistance or making files publicly available.

Check Copyright and Licensing Before Reusing Code and Assets

As you learn HTML and CSS, you will probably encounter code examples, images, fonts, icons, templates, and other resources created by other people.

Finding something online does not automatically mean you have permission to copy, modify, or publish it.

Copyright can apply to many types of creative work, including computer programs, photographs, illustrations, written material, and other original works.

The rules can vary by country and by the particular material involved. This section provides general educational guidance, not legal advice.

Your Own Practice Code Is Different from Third-Party Material

When you write a simple HTML page yourself, such as:

<h1>My Gardening Page</h1>

<p>Welcome to my website.</p>

you are creating your own practice material.

The situation becomes different when you copy substantial code, a template, an image, a font, an icon collection, or another resource created by someone else.

Before reusing third-party material, find out:

· who created or owns it

· what licence applies

· whether modification is permitted

· whether commercial use is permitted

· whether attribution is required

· whether notices or licence information must be preserved

· whether other restrictions apply

Do not rely only on where you found the material.

“Open Source” Does Not Mean “No Rules”

You may encounter code described as open source.

Open-source software is distributed under licences that permit activities such as use, modification, and redistribution according to the terms of the particular licence. The Open Source Initiative maintains a list of licences that have passed its review process and comply with the Open Source Definition.

Examples of widely used open-source licences include:

· MIT License

· Apache License 2.0

· BSD licences

· GNU General Public License

Different licences can impose different requirements.

Therefore:

Do not assume that “open source” means you can remove the licence information and use the material in any way you want.

Read the licence that applies to the specific resource.

Free Does Not Always Mean Copyright-Free

The word free can be confusing.

A resource may be:

· free of charge

· available under an open licence

· available only for personal use

· available for commercial use with conditions

· available with an attribution requirement

· subject to another specific licence

These are not the same thing.

Before using a resource on a real website, check the licence terms rather than assuming that a zero-dollar price means unrestricted use.

Check Images Before Publishing Them

Images are especially easy to copy from websites or search results, but visibility online does not automatically grant permission to reuse them.

Copyright can apply to photographs, illustrations, and other visual works.

For a real project, use images that you:

· created yourself

· obtained with appropriate permission

· licensed for the intended use

· obtained from a source whose terms allow your intended use

· can lawfully use under an applicable copyright exception or limitation

If an image carries a licence, follow its requirements.

Understand Creative Commons Licences

Some creators publish material under Creative Commons licences.

Creative Commons provides standardized licences that allow creators to give the public specified permissions while retaining copyright. There are several Creative Commons licence types, and their conditions differ.

Depending on the licence, conditions can concern matters such as:

· attribution

· commercial use

· modifications

· sharing adaptations under particular terms

For this reason, seeing a Creative Commons symbol is not enough.

Check which Creative Commons licence applies and follow its conditions.

Check Font Licences Too

Fonts are another resource beginners may overlook.

For example, Google Fonts states that fonts in its collection are released under open-source licences. That does not mean every font you find elsewhere on the internet has the same terms.

Before downloading and publishing a font, verify:

· its source

· its licence

· whether web use is permitted

· whether commercial use is allowed for your project

· whether any notices or licence files must be retained

Be Careful with Templates, Icons, and Code Libraries

A website template may contain several separately licensed components.

For example, it might include:

· HTML

· CSS

· JavaScript

· fonts

· icons

· photographs

· illustrations

· third-party code libraries

Do not assume that one permission automatically covers every component.

Check the documentation and licence information for the materials you actually use.

AI Assistance Does Not Remove Licensing Responsibilities

The same rule applies when ChatGPT or another AI tool suggests:

· a library

· a framework

· a font

· an icon set

· a template

· an image source

· a block of third-party code

Do not assume that a suggested resource is automatically copyright-free, open source, commercially permitted, or suitable for your project.

Check the original source and its current licence before relying on it.

For example, if a coding suggestion tells you to install a particular library, locate the project’s official documentation and licence information before using it in a published or commercial project.

Keep a Simple Licence Record

As your projects become larger, record where important third-party assets came from.

A simple record might contain:

· resource name

· creator or publisher

· source

· licence

· date checked

· attribution required

· copy of the licence or permission where appropriate

For example:

Resource: Example Font

Source: Official provider

Licence: Licence name

Checked: August 2026

Attribution: Check licence requirements

Keeping records is much easier than trying to reconstruct the information months later.

If the licence terms later matter, you will have a record of what you checked when the asset was added.

Common Beginner Mistake: Copying Code Because It Is Publicly Visible

A beginner may find a useful website, open its page source, copy a large portion of the code, and assume that this is acceptable because the browser displayed it publicly.

Public visibility and permission to reuse are not the same thing.

Copyright can apply to computer programs and other original works.

How to Avoid This Mistake: Learn from examples, but check ownership and licensing before copying substantial third-party material into a project you intend to publish.

For the exercises in this article, we will continue using small original examples created specifically for learning HTML and CSS.

Common Beginner Mistake: Assuming AI-Generated Means Automatically Safe to Use

An AI tool may produce code or recommend an asset quickly, but that does not eliminate your responsibility to check what you are using.

How to Avoid This Mistake: Before publishing, identify any third-party code, libraries, templates, fonts, images, icons, or other assets and verify their current licences and usage conditions at the original source.

For important commercial or legal questions about copyright or licensing, obtain appropriate professional advice rather than relying solely on an AI response.

Figure 10. Before reusing code, images, fonts, icons, or templates, identify the source, check the applicable licence, and confirm that your intended use follows its conditions.

Explanation: A resource being available online or free of charge does not by itself determine how it may be reused. Keeping licence and permission records helps you document the sources and conditions of third-party materials used in a project.

Common HTML and CSS Mistakes Beginners Make

Mistakes are a normal part of learning HTML and CSS. Many beginner problems are caused by a small typo, a missing character, or a file saved in the wrong place.

Learning how to recognize these problems is more useful than trying to avoid every mistake.

Mistake 1: Forgetting a Closing Tag

Some HTML elements use both an opening and a closing tag.

For example:

<p>This is a paragraph.</p>

A beginner may accidentally write:

<p>This is a paragraph.

Browsers may try to recover from incomplete HTML, but the result may not be what you intended.

How to Avoid This Mistake: When an element requires a closing tag, check that the opening and closing tags match.

Mistake 2: Nesting Elements Incorrectly

HTML elements should be nested correctly.

This is incorrect:

<p>This text is <strong>important.</p></strong>

The <strong> element starts inside the paragraph but ends outside it.

A correctly nested version is:

<p>This text is <strong>important.</strong></p>

Think of nested elements like boxes: a smaller box placed inside a larger box should close before the larger box closes.

Mistake 3: Misspelling an HTML Element

HTML element names must be written correctly.

For example:

<paragraf>Hello</paragraf>

is not the standard HTML paragraph element.

Use:

<p>Hello</p>

If something does not behave as expected, check the element name before making larger changes.

Mistake 4: Forgetting CSS Curly Brackets

A CSS rule normally uses curly brackets:

h1 {

  color: darkblue;

}

This is incorrect:

h1

  color: darkblue;

}

The opening { is missing.

A single missing character can stop part of a stylesheet from being interpreted correctly.

Mistake 5: Forgetting the Colon Between a Property and Value

A CSS declaration should contain a colon between the property and its value:

color: blue;

This is incorrect:

color blue;

The basic pattern is:

property: value;

For example:

font-size: 18px;

Mistake 6: Using the Wrong CSS Selector

Suppose your HTML contains:

<p class=”intro”>Welcome to my page.</p>

To target the class, the CSS selector needs a dot:

.intro {

  color: darkblue;

}

Writing:

intro {

  color: darkblue;

}

would target an element named <intro> instead of the class intro.

For beginners, remember:

· p targets <p> elements

· .intro targets class=”intro”

· #main targets id=”main”

You will encounter more selector types as you continue learning CSS.

Mistake 7: Saving the CSS File with the Wrong Name

Your HTML might contain:

<link rel=”stylesheet” href=”style.css”>

but the actual file might be named:

styles.css

or:

style.css.txt

The browser will not find the expected file if the filename or path is wrong.

How to Avoid This Mistake: Compare the filename in your HTML with the actual filename character by character.

Mistake 8: Saving HTML as a Text File

On some computers, a file intended to be:

index.html

may accidentally become:

index.html.txt

The browser may then treat it as an ordinary text file.

When saving files, verify the complete filename and extension.

Mistake 9: Forgetting to Save Before Refreshing

You change the code, refresh the browser, and nothing happens.

Sometimes the problem is simply that the file was never saved.

A useful routine is:

1 Make one change.

2 Save the file.

3 Refresh the browser.

4 Check the result.

This simple sequence prevents a surprising amount of confusion.

Mistake 10: Editing the Wrong File

Once you have several versions, you may accidentally edit:

index-v1.html

while the browser is displaying:

index.html

The code can be perfectly correct and still appear unchanged because you are working in a different file.

How to Avoid This Mistake: Check the filename in the editor and the file opened in the browser.

Mistake 11: Making Too Many Changes at Once

Suppose a page works correctly and you simultaneously change:

· the HTML structure

· several colours

· the font

· the layout

· the image size

· the CSS file location

If the page then breaks, identifying the cause becomes difficult.

How to Avoid This Mistake: Change one small thing at a time and test after each change.

Mistake 12: Using CSS to Fix Incorrect HTML

CSS can control appearance, but it should not be used to disguise incorrect page structure.

For example, if text is a real heading, write:

<h2>Watering Tips</h2>

rather than creating a paragraph and styling it to imitate a heading:

<p class=”fake-heading”>Watering Tips</p>

Correct HTML structure should come first. CSS should then control presentation.

Mistake 13: Relying Only on How the Page Looks

A page may look correct while still containing structural, accessibility, or usability problems.

For example:

· an image may have inappropriate or missing alternative text

· keyboard focus may be difficult to see

· colour contrast may be too weak

· heading levels may be confusing

· important information may disappear on a narrow screen

Visual appearance is only one part of a successful web page.

Mistake 14: Copying Code You Do Not Understand

A large block of code may work immediately, but that does not mean you understand how to maintain it.

If a future change causes a problem, unfamiliar code can make troubleshooting much harder.

How to Avoid This Mistake: Build in small sections and understand the purpose of each important part before moving on.

Mistake 15: Assuming Every Error Requires New Code

Sometimes beginners respond to a small problem by replacing the entire file.

That can introduce additional problems.

Start with the simplest possibilities:

· Was the file saved?

· Is the filename correct?

· Is a bracket missing?

· Is a tag misspelled?

· Is the CSS file connected?

· Is the selector correct?

· Did you refresh the browser?

Only make larger changes after checking the basics.

A Simple Troubleshooting Routine

When something does not work, use this sequence:

1. Identify exactly what is wrong.

2. Check the most recent change.

3. Save the file.

4. Confirm the filenames and file locations.

5. Check HTML tags and CSS punctuation.

6. Refresh the browser.

7. Undo the last change if necessary.

8. Test a smaller version of the problem.

9. Consult reliable documentation when needed.

10. Ask for help only after you can clearly describe the problem.

This method keeps troubleshooting focused.

If you use ChatGPT for assistance, include the relevant small piece of code and explain what you expected to happen and what actually happened. Remove sensitive information before sharing the code, and test any suggested correction yourself.

Figure 11. Most beginner HTML and CSS problems are easier to solve when you check the latest change, syntax, filenames, and saved files before making larger changes.

Explanation: Troubleshooting works best when you isolate one problem at a time. Small, deliberate checks make it easier to find the cause and understand the correction.

Benefits and Limitations of Using ChatGPT for HTML and CSS

ChatGPT can be useful while learning HTML and CSS, especially when you need an explanation, a small example, or help investigating an error. OpenAI currently describes ChatGPT and its coding tools as supporting tasks such as understanding, writing, testing, and reviewing code.

However, it should be used as an assistant, not as a replacement for understanding, testing, or reliable technical documentation.

Benefits for Beginners

Explain Code in Simple Language

When you encounter unfamiliar HTML or CSS, you can ask for an explanation at your own level.

For example:

Example prompt:

Explain this CSS to me as a complete beginner. Tell me what each selector, property, and value does. Then show what would happen if I changed one value at a time.

This can make unfamiliar code easier to examine without requiring you to understand every technical term immediately.

Break a Large Problem into Smaller Steps

Instead of requesting an entire website at once, you can work through one task at a time.

For example:

1. Create the HTML heading.

2. Add a paragraph.

3. Add a list.

4. Connect the CSS file.

5. Change the colours.

6. Add spacing.

7. Test the page.

Working in small steps makes it easier to understand what each change does.

Help Identify Simple Errors

ChatGPT can review a small section of HTML or CSS and suggest possible reasons something is not working.

For example:

Example prompt:

My heading is not changing colour. Check the HTML and CSS below for a beginner mistake. Explain the problem first, then show the smallest correction.

This can be useful for problems such as:

· a missing bracket

· a misspelled selector

· an incorrect filename

· an unclosed HTML element

· a CSS rule targeting the wrong element

The suggested correction should still be tested in your browser.

Show Alternative Approaches

There is often more than one way to achieve a result.

For example, you might ask:

Show me two simple ways to centre this content with CSS. Explain the difference and recommend the easier method for a beginner.

Comparing alternatives can help you understand why one approach may be more appropriate than another.

Help You Practise

You can also ask for small exercises rather than answers.

For example:

Give me a beginner HTML exercise using one heading, two paragraphs, one link, and one unordered list. Do not show the solution until after the exercise.

This can make ChatGPT useful as a practice partner rather than simply a code generator.

Limitations You Should Understand

ChatGPT can produce incorrect or misleading information, including answers that sound confident even when they are wrong. OpenAI explicitly warns users that ChatGPT can make mistakes and recommends checking important information.

That matters when learning code because an incorrect answer may still look convincing.

Limitation 1: Suggested Code May Contain Errors

A response may contain:

· invalid HTML

· incorrect CSS

· unnecessary code

· a misunderstanding of your request

· an outdated or unsuitable approach

· a change that fixes one issue but creates another

How to Reduce This Limitation: Test the code yourself and compare important technical information with reliable documentation.

Limitation 2: It May Misunderstand Your Goal

Suppose you ask:

Make my page look better.

That request is very broad.

The result may be completely different from what you wanted because “better” can mean many things.

A clearer request would be:

Keep my existing HTML structure. Make the page easier to read by improving spacing and text size. Do not add animations, JavaScript, or additional sections.

The more clearly you describe the task, the easier it is to evaluate whether the response actually meets your needs.

Limitation 3: A Working Page Is Not Necessarily a Good Page

Code can display correctly in a browser while still having problems involving:

· accessibility

· privacy

· security

· maintainability

· licensing

· responsive behaviour

· incorrect semantic HTML

Testing whether the page looks right is therefore only one check.

You should also consider whether the page is structured properly and appropriate for its intended use.

Limitation 4: Large Generated Projects Can Be Difficult for Beginners to Understand

If you ask for an entire website containing hundreds of lines of HTML and CSS, you may receive something that works but is difficult to learn from.

When you do not understand the code, even a small future change can become confusing.

How to Reduce This Limitation: Request small sections and build the project gradually.

For example:

Create only the HTML structure for a simple profile page. Do not add CSS yet. Explain each part before we continue.

After you understand the HTML, you can move to the CSS.

Limitation 5: It Cannot Replace Testing

Even when code appears reasonable, you still need to:

1 Save it.

2 Open it in a browser.

3 Test the result.

4 Resize the browser window.

5 Check links and interactive elements.

6 Review accessibility.

7 Confirm that no private information is exposed.

For more important projects, additional browser, device, security, and accessibility testing may also be required.

Limitation 6: Information and Features Can Change

ChatGPT itself continues to change, and OpenAI maintains current release notes and product documentation for updated capabilities.

You do not need to reread every product page before every coding exercise.

A practical approach is to check current official information when:

· you first begin using a feature

· you change plans or tools

· a feature behaves differently from what you expect

· you receive an update notice

· an important project depends on a particular capability

· you periodically review your workflow

Reality: ChatGPT Does Not Remove the Need to Learn HTML and CSS

It may be possible to generate a page without knowing much about the underlying code.

That may produce a quick result, but it leaves you dependent on outside help whenever something needs to be changed or repaired.

For beginners, the more useful goal is:

Use ChatGPT to make HTML and CSS easier to learn, not to avoid learning them.

If you understand the foundations, you can judge suggested code more effectively, recognize obvious mistakes, make your own changes, and ask much better questions.

Figure 12. ChatGPT can support learning, explanation, practice, and troubleshooting, but beginners still need to understand, review, and test the code they use.

Explanation: AI assistance is most useful when it strengthens your understanding rather than replacing it. OpenAI also cautions that ChatGPT can produce incorrect or misleading answers, so important code and information should be checked.

Useful ChatGPT Prompts for Practising HTML and CSS

Good prompts make it easier to get useful explanations and practice exercises.

For beginners, the most effective prompts are usually specific, limited in scope, and focused on learning.

You do not need complicated wording. Simply explain:

· your skill level

· what you are trying to do

· what code you already have

· what is going wrong

· what kind of help you want

Prompt 1: Explain HTML Line by Line

I am a complete beginner learning HTML. Explain the following code one line at a time in simple language. Tell me what each tag and attribute does. Do not add new code unless something is incorrect.

Use this when you receive or find HTML that you do not fully understand.

Prompt 2: Explain CSS Line by Line

I am a complete beginner learning CSS. Explain this CSS rule one line at a time. Tell me what the selector, properties, and values mean, and describe what I should see in the browser.

This is useful when a CSS rule works but you are not sure why.

Prompt 3: Check a Small HTML Page

Review this small HTML page for beginner mistakes. Check the document structure, closing tags, nesting, headings, links, and image attributes. Explain each problem before showing the corrected code.

This helps you learn from your own work rather than simply replacing it.

Prompt 4: Find a CSS Problem

My CSS is not producing the result I expected. I will give you the relevant HTML and CSS. Identify the most likely problem, explain it in beginner-friendly language, and show the smallest correction needed.

When using this prompt, also describe what you expected to happen.

For example:

I expected the heading to be dark blue, but it remains black.

That extra detail can make troubleshooting more focused.

Prompt 5: Ask for a Practice Exercise

Give me a beginner HTML exercise using one main heading, two paragraphs, one link, and one unordered list. Do not show the solution until after I try it.

You can adjust the exercise as your skills improve.

For example:

Give me a beginner CSS exercise using text colour, background colour, padding, margin, and a border.

Prompt 6: Ask for a Hint Instead of the Answer

Sometimes you learn more when you do not receive the complete solution immediately.

Try:

I am stuck on this HTML exercise. Give me one hint only. Do not show the corrected code yet.

If you are still stuck, ask for another hint.

This encourages you to think through the problem yourself.

Prompt 7: Compare Two Pieces of Code

Compare these two HTML examples. Explain how they are different, which structure is clearer for this purpose, and why. Use beginner-friendly language.

Or for CSS:

Compare these two CSS approaches. Explain what each one does and which is simpler for this beginner project.

Comparisons are useful when more than one solution appears to work.

Prompt 8: Improve Accessibility Without Redesigning the Page

Review this small HTML and CSS example for obvious beginner accessibility problems. Check headings, image alt text, link wording, colour use, keyboard-related HTML, and readable structure. Do not redesign the page. Explain each suggested change.

Remember that this type of review can identify possible issues but does not prove complete accessibility compliance.

Prompt 9: Make a Page More Responsive

Review this simple HTML and CSS page for problems on narrow screens. Suggest only beginner-friendly changes that help the layout adapt. Explain each change and do not add JavaScript.

You can then resize your browser and test the suggested changes yourself.

Prompt 10: Simplify Complicated Code

If you receive code that looks too advanced, ask:

Rewrite this example using the simplest HTML and CSS suitable for a complete beginner. Remove unnecessary features, keep the same basic result, and explain what you removed.

Simpler code can be easier to learn, maintain, and troubleshoot.

Prompt 11: Explain an Error Without Rewriting Everything

Find the error in this HTML or CSS. Do not rewrite the entire file. Tell me where the problem is, why it causes an issue, and show only the corrected line or small section.

This is especially useful when most of your page already works.

Prompt 12: Test Your Understanding

Ask me five beginner questions about the HTML and CSS concepts in this code. Ask one question at a time. Wait for my answer before explaining whether I am correct.

This turns your own practice page into a learning exercise.

Prompt 13: Create a Small Project Challenge

Give me a small beginner project using only HTML and CSS. It should include headings, paragraphs, one image, one link, one list, and simple styling. Give me the requirements only. Do not provide the finished code until I ask for help.

Possible projects could include:

· a personal profile page using fictional information

· a simple recipe page

· a gardening tips page

· a hobby page

· a basic information page for an imaginary business

Keep practice projects free of real confidential or sensitive information.

Prompt 14: Review Before Publishing

For a small practice project that you are considering publishing, you could ask:

Review this HTML and CSS as a beginner pre-publication check. Look for obvious structural errors, broken links, accessibility concerns, exposed private information, and unnecessary code. List the issues first. Do not claim that the review guarantees security, accessibility, or legal compliance.

This can provide an additional review, but it should not replace appropriate testing or professional review where the project involves sensitive information or important legal, security, or accessibility requirements.

A Better Prompt Usually Includes Context

Compare these two requests:

Too vague:

Fix my website.

More useful:

I am a beginner learning CSS. My heading should be dark blue, but it remains black. The HTML and CSS are below. Find the likely cause, explain it simply, and show only the correction needed.

The second prompt makes the task clearer because it explains:

· your experience level

· the expected result

· the actual result

· the type of help you want

Keep Prompts Focused

Avoid asking for ten unrelated changes in one request.

Instead of:

Fix the colours, make it responsive, improve accessibility, add a contact form, change the fonts, redesign the menu, and fix every error.

work through the project in smaller stages.

For example:

1. Check the HTML structure.

2. Fix the CSS problem.

3. Test the page.

4. Review the responsive layout.

5. Review basic accessibility.

6. Check for private information.

7. Make final visual improvements.

This makes each change easier to understand and verify.

Common Beginner Mistake: Asking for a Complete Replacement Too Quickly

If a small part of your code is wrong, replacing the entire page may remove code that already works and introduce new problems.

How to Avoid This Mistake: Ask for the smallest necessary correction first.

A useful phrase is:

Show only the part that needs to change.

This keeps the troubleshooting process manageable and makes it easier to learn what actually caused the problem.

Figure 13. A useful coding prompt explains your skill level, goal, relevant code, the problem you observed, and the type of help you want.

Explanation: Clear prompts make troubleshooting and learning more focused. For beginners, small and specific requests are usually easier to understand and test than requests for an entire replacement project.

Common Myths About HTML, CSS, and ChatGPT

Beginners often hear simplified claims about web development and AI-assisted coding. Some contain a little truth, but they can create the wrong expectations.

Understanding these myths early can make learning easier.

Myth 1: HTML and CSS Are the Same Thing

They work together, but they have different purposes.

Reality: HTML describes the structure and meaning of web content, while CSS controls its presentation. The HTML standard defines the elements and structure of HTML documents, while W3C describes CSS as a core web language for adding styling such as fonts, colours, and spacing.

A simple way to remember this is:

· HTML = structure and content

· CSS = appearance and layout

Myth 2: HTML Is a Programming Language Like JavaScript or Python

HTML contains instructions that browsers interpret, but it is normally classified as a markup language rather than a general-purpose programming language.

Reality: HTML defines elements, attributes, document structure, and semantics for web content.

This distinction is useful because HTML is mainly concerned with describing content and structure.

Myth 3: You Must Memorize Every HTML Element and CSS Property

HTML and CSS include many features, and CSS continues to be developed through multiple specifications.

Reality: Beginners do not need to memorize everything.

A better approach is to learn the most common concepts first and become comfortable looking up less familiar features when needed.

For HTML, start with elements such as:

· headings

· paragraphs

· links

· images

· lists

For CSS, begin with:

· colours

· fonts

· sizes

· margins

· padding

· borders

Your knowledge will grow naturally through practice.

Myth 4: If the Page Looks Correct, the Code Must Be Correct

Browsers are designed to handle many imperfect documents, so a page may still display even when the code contains problems.

Reality: Appearance alone does not prove that the structure is appropriate, accessible, maintainable, or error-free.

You should also check:

· HTML structure

· CSS syntax

· accessibility

· links

· responsive behaviour

· privacy and security concerns

A visually attractive result is only one part of a good page.

Myth 5: CSS Is Only for Colours and Fonts

Colours and fonts are common beginner examples, but CSS does much more.

Reality: CSS can control spacing, sizing, borders, positioning, flexible layouts, grid layouts, responsive behaviour, and many other aspects of how a document is presented. W3C maintains the CSS specifications covering these capabilities.

You do not need these advanced features immediately, but CSS becomes much more powerful as your skills develop.

Myth 6: ChatGPT Always Produces Correct Code

A coding answer can look professional while still containing mistakes.

Reality: OpenAI states that ChatGPT can produce incorrect or misleading output and may sometimes sound confident even when it is wrong.

That means you should still:

1. read the suggested code

2. understand the important parts

3. test it in your browser

4. check unfamiliar features

5. compare important technical details with reliable documentation

Myth 7: If ChatGPT Generated the Code, You Do Not Need to Understand It

A generated page may appear to work immediately.

That can be convenient, but it can become a problem when you need to change or repair it.

Reality: Understanding the main HTML and CSS concepts makes you better able to evaluate suggestions, identify mistakes, and make your own changes.

OpenAI currently describes its coding tools as supporting activities including understanding, writing, testing, and reviewing code. They are tools within the development process, not a substitute for knowing what your project does.

Myth 8: More Code Means a Better Website

A long stylesheet or complicated HTML structure can look impressive.

Reality: Extra code is useful only when it serves a purpose.

For a beginner project, simpler code is usually easier to:

· understand

· test

· correct

· maintain

· explain

Do not add complexity simply because you can.

Myth 9: You Need Expensive Software to Learn HTML and CSS

Professional tools can make development more convenient, but basic HTML and CSS are plain-text technologies.

Reality: You can learn the fundamentals with a text editor and a browser.

More advanced tools can be introduced later when they provide a real benefit.

Myth 10: A Website Is Finished Once It Works on Your Computer

A page may work perfectly on your own screen and still cause problems elsewhere.

Reality: A real website should be checked under different conditions, including different screen widths, browsers, zoom levels, and input methods.

It may also require additional accessibility, privacy, security, licensing, and performance reviews depending on what the website does.

Myth 11: Anything Found Online Can Be Copied into Your Website

Publicly visible material may still be protected by copyright or subject to licence conditions.

Reality: Check the source and licence before reusing third-party code, images, fonts, icons, templates, or other assets.

Availability online does not automatically mean unrestricted reuse.

Myth 12: Once You Learn HTML and CSS, You Know Everything Needed to Build Any Website

HTML and CSS are foundational, but modern websites can involve many additional technologies.

These may include:

· JavaScript

· servers

· databases

· content-management systems

· APIs

· authentication

· security controls

· testing and deployment tools

Reality: HTML and CSS give you an important foundation. They are the beginning of web development, not the end.

That is good news for beginners: you do not need to learn the entire web-development ecosystem at once.

Learn the foundation first and add new skills only when you need them.

Figure 14. Common beginner myths can make HTML, CSS, and AI-assisted coding seem either harder or easier than they really are.

Explanation: HTML and CSS are approachable when learned gradually. ChatGPT can support that learning process, but understanding, testing, accessibility, security, and responsible reuse still require your attention. OpenAI also advises users to verify important information because ChatGPT can make mistakes.

Frequently Asked Questions

Is HTML difficult for a complete beginner?

HTML is generally one of the easier web technologies to begin learning because you can create a useful page with only a small number of elements.

You do not need to memorize the entire language before starting. Begin with headings, paragraphs, links, images, and lists, then add more elements as you need them.

The best way to learn is to create small pages and test each change in your browser.

Is CSS harder than HTML?

CSS can feel more complicated because several styling rules may affect the same element and because layouts become more advanced as a website grows.

For a beginner, start with simple properties such as:

· color

· background-color

· font-family

· font-size

· margin

· padding

· border

Once those concepts are familiar, you can gradually learn responsive layouts, Flexbox, Grid, and other CSS features.

You do not need advanced CSS to create your first useful web page.

Do I need to learn HTML before CSS?

It is helpful to understand basic HTML first because CSS styles HTML elements.

For example, if you understand that:

<h1>My Page</h1>

creates a main heading, it is easier to understand what this CSS does:

h1 {

  color: darkblue;

}

You do not need to master HTML before touching CSS. Learn a small amount of HTML, style it with CSS, and continue building both skills together.

Can I create a website using only HTML and CSS?

Yes, you can create many useful static web pages with HTML and CSS alone.

For example, you can create:

· an information page

· a simple portfolio

· a recipe page

· a basic business-information page

· a personal hobby page

· a landing page

More advanced features may require additional technologies.

For example, interactive applications, account systems, databases, payments, or complex forms usually require technologies beyond HTML and CSS.

Do I need JavaScript to learn HTML and CSS?

No.

JavaScript is an important web technology, but you do not need it to begin learning HTML and CSS.

Learning the page structure and visual styling first can make JavaScript easier to understand later because you will already know how the page itself is organized.

Can ChatGPT build the whole page for me?

It can generate HTML and CSS examples, including complete page suggestions, but receiving the code is not the same as understanding it.

For a beginner, a better learning approach is to build the page in smaller parts.

For example:

1 Create the HTML structure.

2 Test it.

3 Add basic CSS.

4 Test again.

5 Add one feature at a time.

6 Ask for help when you encounter a specific problem.

This makes it much easier to understand what each part does.

Should I type the code myself or copy and paste it?

Both can be useful.

Typing short examples yourself can help you become familiar with:

· HTML tags

· CSS punctuation

· filenames

· indentation

· common spelling patterns

Copying a longer example can save time, but read it carefully before using it.

For beginner exercises, a good compromise is to copy the basic example and then make several changes yourself.

Does HTML care about uppercase and lowercase letters?

HTML syntax is generally written using lowercase element and attribute names in modern examples.

For example:

<p>Hello</p>

rather than:

<P>Hello</P>

Using lowercase consistently makes your code easier to read and matches common modern practice.

CSS selectors and values can have their own case-sensitivity rules depending on what they refer to, so consistency is a useful habit.

Why is my CSS not changing the page?

Common causes include:

· the CSS file was not saved

· the HTML file links to the wrong filename

· the CSS file was accidentally saved as .txt

· a selector does not match the HTML

· a bracket, colon, or other character is missing

· another CSS rule is overriding the style

· the browser has not been refreshed

Check the simplest possibilities first.

Do not replace the entire stylesheet because one colour or spacing rule is not working.

What is the difference between a class and an ID?

A class can be used for multiple elements.

For example:

<p class=”note”>First note</p>

<p class=”note”>Second note</p>

CSS can target that class with:

.note {

  background-color: lightgrey;

}

An ID identifies a particular element and should be unique within the document.

For example:

<h1 id=”page-title”>My Gardening Page</h1>

CSS can target it with:

#page-title {

  color: darkblue;

}

For many reusable styles, classes are usually the more flexible choice.

Do I need a paid code editor?

No.

A plain-text editor is enough for the exercises in this guide.

Dedicated code editors can later provide useful features such as:

· syntax highlighting

· automatic indentation

· code completion

· file navigation

· error hints

These features can make coding more convenient, but they are not required to understand HTML and CSS.

Can I use HTML and CSS in WordPress?

Yes, although the amount of direct HTML and CSS you can or should add depends on the WordPress setup, theme, editor, plan, and available features.

WordPress normally creates much of the underlying page structure for you, so beginners do not need to manually code every page.

Learning basic HTML and CSS can still help you understand:

· how web pages are structured

· what certain blocks produce

· why formatting behaves in a particular way

· how custom styling works

· how to communicate more clearly when troubleshooting a website

Always test custom changes carefully and keep a backup before making substantial modifications.

Does learning HTML and CSS still matter when AI can generate code?

Yes.

AI tools can make coding faster in some situations, but basic knowledge helps you determine whether the result actually makes sense.

When you understand HTML and CSS, you can more easily:

· recognize incorrect structure

· modify generated code

· troubleshoot problems

· spot unnecessary complexity

· review accessibility

· explain what you want more precisely

· decide whether a suggested change should be used

The ability to generate code makes understanding more valuable, not less.

Can I publish the practice page created in this guide?

You can publish your own practice work, but review it first.

Before publishing, check:

· that private information has been removed

· that links work

· that images and other assets have appropriate permissions or licences

· that the page works on different screen sizes

· that basic accessibility has been considered

· that no secret keys, passwords, or confidential information appear in the files

If your project begins collecting personal information, accepting payments, handling accounts, or performing other sensitive functions, additional privacy, security, legal, and technical requirements may apply.

Do I need to become a professional developer to benefit from HTML and CSS?

No.

Even a basic understanding can help you:

· make small website changes more confidently

· understand what a web developer is talking about

· troubleshoot simple formatting problems

· evaluate code suggestions more carefully

· understand how WordPress and other website tools create pages

· continue into more advanced coding if you choose

For a beginner, the goal is not to know everything. It is to understand the foundation well enough to know what you are looking at and what to learn next.

Key Takeaways

HTML and CSS become much easier to understand when you learn them in small steps and test each change as you go.

Remember these main points:

· HTML provides structure and meaning. Use it for headings, paragraphs, links, images, lists, forms, and other page content.

· CSS controls presentation. Use it for colours, fonts, spacing, borders, sizing, and layout.

· Keep HTML and CSS in their proper roles rather than using visual styling to imitate meaningful HTML structure.

· Start with simple files such as index.html and style.css.

· Save your files and refresh the browser after each change.

· Check filenames, tags, brackets, selectors, colons, and file locations before assuming a problem is complicated.

· Make one change at a time so that mistakes are easier to identify.

· Use semantic HTML whenever possible because meaningful structure improves clarity and supports accessibility.

· Design pages so that they can adapt to different screen sizes rather than depending on one fixed display width.

· Consider accessibility while building the page, not only after the visual design is finished.

· Protect passwords, API keys, authentication tokens, personal information, and confidential data. Do not place secrets in public-facing HTML or CSS.

· Check licences before reusing third-party code, images, fonts, icons, templates, or other website assets.

· Do not assume that something is free to reuse simply because it is available online.

· Use ChatGPT for focused tasks such as explanations, small examples, troubleshooting, comparisons, and practice exercises.

· Review and test code suggested by ChatGPT rather than assuming that it is correct.

· Remove private or sensitive information before sharing code with an online service.

· Keep copies of working versions before making substantial changes.

· Learn the foundations instead of depending on large blocks of code you do not understand.

The most important beginner habit is simple:

Understand what you are changing, make one change at a time, and test the result.

Once that routine becomes familiar, HTML and CSS stop looking like mysterious code and start becoming understandable building blocks for the web.

Final Tip

Do not try to learn HTML and CSS by memorizing large amounts of code.

A better approach is to build one small page, understand what each part does, and improve it gradually.

When you are unsure about something:

1. Check the part of the code you just changed.

2. Test the page in your browser.

3. Compare the result with what you expected.

4. Look up the relevant HTML or CSS feature in reliable documentation.

5. Use ChatGPT for a focused explanation or troubleshooting help when needed.

6. Keep the change only when you understand what it does.

The strongest beginner habit is not writing code quickly. It is developing the confidence to look at a small piece of HTML or CSS and say:

“I understand what this does, why it is here, and how to test it.”

That foundation will make future web-development topics much easier to learn.

Continue Learning

HTML and CSS are the foundation of web pages, but they are only the beginning of the coding skills you can develop.

After completing this guide, a useful next step is to keep practising with small projects rather than jumping immediately into a large website.

Try creating:

· a simple personal profile page using fictional information

· a recipe page

· a gardening or hobby page

· a basic information page for an imaginary business

· a one-page portfolio

· a simple landing page

For each project, practise the same workflow:

1. Plan the page structure.

2. Write the HTML.

3. Open it in your browser.

4. Add CSS gradually.

5. Test one change at a time.

6. Check the page at different widths.

7. Review basic accessibility.

8. Check for private information and licensing issues.

9. Ask ChatGPT for focused help only when needed.

10. Keep a working copy before making major changes.

Continue with the AI Mastery AI Coding Series

Article 086 continues the AI Mastery AI Coding series after Articles 084 and 085.

If you are following the series in order, review the earlier lessons when you need help understanding coding concepts or asking ChatGPT to explain unfamiliar code.

As later articles are published, they can build on the HTML and CSS foundation covered here and introduce additional coding topics gradually.

The goal is not to learn every web technology at once.

Build a strong foundation first. Once HTML and CSS feel familiar, more advanced topics become much easier to understand.

Sources and References

The following official and authoritative sources were reviewed for the technical, accessibility, privacy, security, copyright, and licensing information in this article. Information was checked on August 16, 2026. Web standards, product features, policies, and licence conditions can change, so readers should check current official information when it matters to their project.

HTML and CSS Standards

WHATWG — HTML Living Standard. Primary technical reference for current HTML syntax, document structure, elements, attributes, links, images, forms, and semantic markup. The Living Standard was current during this review in August 2026.

W3C — CSS Snapshot 2026. Collects the specifications that define the state of CSS in 2026 and describes CSS as a language for rendering structured documents such as HTML.

W3C — Media Queries Level 5. Technical reference for media queries used to apply CSS conditionally, including responsive styling based on viewport characteristics.

W3C — CSS Box Model Level 4. Technical reference for content, padding, borders, margins, sizing, and the CSS box model.

W3C — CSS Color Module Level 4. Technical reference for CSS colour values and colour-related properties.

W3C — CSS Fonts Module Level 4. Technical reference for font families, fallback fonts, font sizing, and related CSS font behavior.

Accessibility

W3C Web Accessibility Initiative — WCAG 2.2. Current WCAG 2 Recommendation used for guidance on structure, text alternatives, contrast, keyboard access, focus, and responsive reflow.

W3C WAI — An Alt Decision Tree. Practical guidance for choosing appropriate alternative text based on an image’s purpose and context.

W3C WAI — Easy Checks / Preliminary Accessibility Review. Explains that preliminary checks can find some accessibility issues but do not constitute a complete conformance evaluation.

ChatGPT, Privacy, and Data Controls

OpenAI — ChatGPT Work and Codex. Current OpenAI product guidance distinguishing conversational ChatGPT use from Codex, which is dedicated to software development and technical work.

OpenAI — Data Controls FAQ. Current guidance for the “Improve the model for everyone” setting and Temporary Chat behavior, including the 30-day deletion period stated by OpenAI.

OpenAI — How Your Data Is Used to Improve Model Performance. Explains how ChatGPT data controls affect model improvement and confirms that Temporary Chats are not used to train models.

OpenAI — Privacy Policy. Current privacy-policy reference for personal-data handling in OpenAI services. Product settings and practices can change, so readers should check current official information when it matters.

Security

OWASP — Review Web Page Content for Information Leakage. Security guidance showing that sensitive information such as private API keys, credentials, internal routes, and other details can leak through client-side resources.

OWASP — Secrets Management Cheat Sheet. Best-practice guidance for managing passwords, API keys, credentials, and other secrets without exposing them in application code.

OWASP — Input Validation Cheat Sheet. Explains that client-side validation can be circumvented and that security-relevant validation must also be enforced on the server side.

Copyright and Licensing

WIPO — Copyright. General copyright reference explaining that protected works can include computer programs, photographs, drawings, written material, databases, and other creative works.

Open Source Initiative — OSI Approved Licenses. Explains that open-source software is distributed under licences that permit use, modification, and sharing according to their terms.

Creative Commons — CC Licenses. Official reference for Creative Commons licence types and conditions involving attribution, commercial use, modifications, and share-alike requirements.

Google Fonts — Frequently Asked Questions. Official Google Fonts information about the open-source licences used for fonts in the Google Fonts collection. Individual font licence information should still be checked before use.

Important Note

This article provides general educational information about HTML, CSS, accessibility, privacy, security, copyright, and licensing. It is not legal, cybersecurity, or other professional advice.

Policies, standards, software features, and licence conditions can change. Readers do not need to reread every policy before every small practice exercise, but they should check current official information when first using a tool or resource, changing plans or features, receiving an important policy update, beginning a commercial or sensitive project, and periodically thereafter.