HTML and CSS Basics

The Blueprint of a Webpage

Every website you visit is built with two core languages: HTML and CSS. Think of them as the skeleton and the skin of a webpage. HTML, or HyperText Markup Language, provides the fundamental structure. It tells the browser what each piece of content is — a heading, a paragraph, a link, or an image.

HTML, or HyperText Markup Language, provides the skeleton for your web content.

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 goes between them is the content of that element. Let's look at the basic structure of any HTML page.

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>

  <h1>This is a Main Heading</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://www.example.com">This is a link</a>

</body>
</html>

Here’s a quick breakdown:

<!DOCTYPE html>: This tells the browser the document is an HTML5 page.
<html>: This is the root element that wraps all the content on the page.
<head>: This contains meta-information about the page, like the title that appears in the browser tab. It's stuff the user doesn't see directly on the page.
<body>: This holds all the visible content, such as headings, paragraphs, and images.

Common HTML Tags

While there are many HTML tags, you'll use a handful of them constantly. Headings are created with <h1> through <h6>, with <h1> being the most important. Paragraphs use the <p> tag, and links, or anchors, use the <a> tag. The href attribute within the <a> tag specifies the URL the link should go to.

Tag	Purpose
`<h1>` - `<h6>`	Headings, from most to least important.
`<p>`	A paragraph of text.
`<a>`	A hyperlink.
`<img>`	An image.
`<ul>`	An unordered (bulleted) list.
`<ol>`	An ordered (numbered) list.
`<li>`	A list item (used inside `<ul>` or `<ol>`).

Adding Style with CSS

Once you have your HTML structure, you can add style using CSS, which stands for Cascading Style Sheets. CSS controls the presentation: colors, fonts, spacing, and layout. It brings your webpage to life.

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

CSS works by selecting HTML elements and applying rules to them. 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: navy;
  font-size: 16px;
}

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

Connecting CSS to HTML

There are three ways to apply CSS to an HTML document. The most common and recommended method is using an external stylesheet. You create a separate file with a .css extension and link to it from your HTML file using the <link> tag inside the <head> section.

<!-- In your index.html file -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

This approach keeps your content (HTML) and your presentation (CSS) separate, making your code cleaner and easier to manage.

To target specific elements, you can use class or ID selectors. An ID is unique to one element, while a class can be applied to multiple elements.

In HTML, you add the attribute id="some-name" or class="some-name".

In CSS, you select an ID with a hash (#) and a class with a period (.).

/* CSS */
#main-header {
  background-color: #f2f2f2;
}

.highlight {
  color: orange;
}

This CSS would style an HTML element with id="main-header" and any elements with class="highlight".

Ready to check your understanding?

Quiz Questions 1/6

What is the primary role of HTML in web development?

Quiz Questions 2/6

Which tag contains all the content that is visible to the user on a webpage?

Mastering these fundamentals of HTML and CSS is the first major step toward building beautiful, functional websites.

Fix Your Website Formatting with HTML & CSS