What Are HTML and CSS? A Clear Introduction to the Foundations of the Web

I aim to specialize in artificial intelligence and cybersecurity. Although these fields may seem unrelated to web development, understanding the fundamental systems behind all software—like HTML and CSS—gives a strong foundation. So I decided to start from zero and write this article to briefly explain what HTML and CSS are, how they work, and what I learned in my first steps.

1. What Is HTML?

HTML stands for HyperText Markup Language. It is not a programming language but a markup language. Its main job is to define the structure of content on a webpage—for example, “this is a heading”, “this is a paragraph”, or “this is an image”.

Analogy: Bricks and structure

Think of HTML as the skeleton of a webpage. Like walls and rooms in a building, HTML defines the parts of a webpage. It says what’s there—but not how it looks. That’s CSS’s job.

Example:

<h1>Hello!</h1>
<p>This is a paragraph.</p>

2. What Is CSS?

CSS stands for Cascading Style Sheets. It defines how content should look: colors, fonts, spacing, layout, and visual styling.

Analogy: Getting dressed

If HTML is the skeleton, CSS is the clothing. You can style the same HTML content in many different ways using CSS.

Example:

h1 {
  color: darkgreen;
  font-family: Arial, sans-serif;
  text-align: center;
}

3. Why Are HTML and CSS Kept Separate?

There are three main reasons for separating content (HTML) from presentation (CSS):

Clean code – Easier to manage and maintain
Reusability – One CSS file can be used for multiple pages
Accessibility – Assistive technologies can better understand semantic HTML

4. Basic HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is a sample paragraph.</p>
  </body>
</html>

<!DOCTYPE html> — Declares the document as HTML5

<head> — Contains metadata, title, styles, etc.

<body> — Holds the visible content shown in the browser

5. CSS Basics

p {
  color: blue;
  font-size: 16px;
}

CSS bir kural kümesidir ve üç ana bölümden oluşur:

Value: Özelliğe verilecek değer (örnek: blue, 16px)

Selector: Hangi HTML öğesini etkileyeceğini belirler (örnek: p)

Property: Değiştirilecek özellik (örnek: color, font-size)

6. The Box Model

Every HTML element is treated as a box with four layers:

Margin — The space between this element and others

Content — The actual text or image

Padding — The space around the content (inside the border)

Border — The visible edge or outline of the element

7. How HTML and CSS Work Together

Your browser reads the HTML, builds a structure (DOM), then applies CSS rules to style it. The combination becomes the final web page you see.

8. Essential HTML and CSS Tags

`<h1>` – Heading

<h1>Learning HTML and CSS</h1>

`<p>` – Paragraph

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

`<a>` – Link

<a href="https://example.com">Visit Site</a>

`<img>` – Image

<img src="image.jpg" alt="Description">

`<ul>` / `<ol>` / `<li>` – Lists

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

`<div>` – Block Container

<div>
  <h2>Title</h2>
  <p>Content here</p>
</div>

`color` – Text Color

p {
  color: red;
}

`font-size` – Font Size

h1 {
  font-size: 36px;
}

`background-color` – Background Color

div {
  background-color: lightgray;
}

`margin` and `padding` – Spacing

p {
  margin: 20px;
  padding: 10px;
}

`border` – Border

div {
  border: 2px solid black;
}

`text-align` – Text Alignment

h1 {
  text-align: center;
}

In Short

This post is my first attempt to summarize what I learned about HTML and CSS. Though they seem simple, these two tools form the foundation of everything on the web. More to come.

HTML and CSS for Beginners: A Simple Guide to Web Fundamentals

What Are HTML and CSS? A Clear Introduction to the Foundations of the Web