HTML and CSS Basics

The Blueprint of the Web

Every webpage you visit, from a simple blog to a complex application, is built on a foundation of HTML. Think of HTML as the skeleton of a house. It provides the essential structure and defines where everything goes—the walls, the doors, the windows. It doesn't handle the colors or decorations, just the core framework.

HTML

noun

Stands for HyperText Markup Language. It's the standard language used to create and structure the content of web pages.

An HTML document is a plain text file made up of elements, which you create using tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Whatever you put between them becomes that type of element. The 'p' here stands for paragraph.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">This is a link.</a>
  </body>
</html>

Let's break that down. <!DOCTYPE html> tells the browser it's an HTML5 document. The <html> element wraps everything. The <head> contains meta-information, like the page title that appears in your browser tab. The <body> holds all the visible content.

Notice the <a> tag, which creates a link. It has an href part inside the tag itself. This is called an attribute. Attributes provide extra information about an element, like the destination for a link or the source for an image (<img src="photo.jpg">).

HTML gives content structure and meaning. Tags like <h1> (a main heading) and <p> (a paragraph) tell the browser what kind of content they contain.

The Document as a Tree

When a browser reads your HTML, it builds a model of the page's structure in memory. This model is called the Document Object Model, or DOM. The best way to visualize the DOM is as a family tree. The <html> tag is the root ancestor. It has two children: <head> and <body>. The <body> then has its own children, like <h1> and <p>.

This tree structure is crucial. It's how other technologies, like CSS and JavaScript, can find and manipulate specific parts of your page. Understanding the DOM helps you understand how web pages work behind the scenes.

Adding Style with CSS

If HTML is the skeleton, CSS (Cascading Style Sheets) is the paint, furniture, and decorations. It controls how the HTML elements look on the screen. With CSS, you can change colors, fonts, spacing, and layout. It separates the presentation of a document from its content, which makes your code much cleaner and easier to manage.

CSS is the language we use to style an HTML document.

CSS works by defining rules. A rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations, and each declaration includes a CSS property name and a value, separated by a colon.

/* This is a CSS comment */
p {
  color: blue;
  font-size: 16px;
}

In this example, p is the selector. It targets all paragraph elements. color and font-size are properties, and blue and 16px are their values. This rule tells the browser to make the text inside all <p> elements blue and 16 pixels tall.

You can also select elements by their class or id attributes. A class selector starts with a period (.), and an ID selector starts with a hash (#). IDs must be unique on a page, while a class can be used on multiple elements.

Selector	Example	Target
Element	`h1`	All `<h1>` elements
Class	`.highlight`	All elements with `class="highlight"`
ID	`#intro`	The element with `id="intro"`

To link your CSS to your HTML, you add a <link> tag inside the HTML's <head> section. This tells the browser where to find the stylesheet.

<head>
  <title>My Styled Page</title>
  <link rel="stylesheet" href="style.css">
</head>

When HTML and CSS work together, you can turn a plain document into a visually appealing webpage.

With these basics, you can structure content and apply simple styles. This foundation is the first step toward building anything on the web.

Quiz Questions 1/5

What is the primary role of HTML in web development?

Quiz Questions 2/5

In the HTML tag <img src="photo.jpg">, the src part is known as a(n) ________.

Now you have a grasp of the fundamentals that form the backbone and visual presentation of every website. Practice is key to making these concepts second nature.

Fix Website Formatting with HTML CSS