HTML and CSS Basics

The Blueprint of the Web

Every website you visit, from a simple blog to a complex news site, is built on a foundation of HTML. Think of HTML (HyperText Markup Language) as the skeleton of a webpage. It doesn't control the colors or fonts, but it gives the page its fundamental structure.

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

HTML uses tags, which are keywords wrapped in angle brackets, to define different pieces of content. For example, a tag might tell the browser, "This is a heading," or "This is a paragraph." Almost every tag has a matching closing tag with a forward slash.

A basic HTML document has a standard structure that tells the browser it's reading a webpage. It looks like this:

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph on my first webpage.</p>
</body>
</html>

Let's quickly break that down:

<!DOCTYPE html>: This declaration defines the document type. It's a standard first line.
<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 your browser tab. Users don't see this content directly.
<body>: This contains all the visible content of the webpage, like headings, paragraphs, and images.

Common Building Blocks

With the basic structure in place, you can start adding content using different tags. Headings are created with <h1> through <h6>. <h1> is the most important heading on the page, and <h6> is the least.

Paragraphs of text are wrapped in <p> tags. When you want to link to another page, you use the <a>, or anchor, tag. It needs an href attribute to tell the browser where the link should go.

<h1>Main Title</h1>
<h2>A Subtitle</h2>
<p>This is some text about the topic.</p>
<p>To learn more, <a href="https://www.example.com">visit our website</a>.</p>

Lists are also fundamental. You can create an unordered (bulleted) list with <ul> or an ordered (numbered) list with <ol>. Each item within the list is then wrapped in an <li> tag.

To add an image, you use the <img> tag. This is a special tag because it's self-closing—it doesn't need a separate closing tag. It requires a src attribute to specify the image file's path and an alt attribute, which provides alternative text for screen readers or if the image fails to load.

<!-- This is an unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- This is an image -->
<img src="images/logo.png" alt="Company Logo">

Adding Style with CSS

HTML provides the structure, but CSS (Cascading Style Sheets) provides the style. CSS controls the colors, fonts, spacing, and layout of your webpage. It brings the skeleton to life.

CSS (Cascading Style Sheets) is like the paintbrush of the web. It brings your HTML skeleton to life, adding colors, shapes, layouts, and interactivity.

CSS works by selecting HTML elements and applying rules to them. A CSS 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 property and a value, separated by a colon.

/* This is a CSS comment */

h1 {
  color: navy;
  font-size: 24px;
}

p {
  color: gray;
  line-height: 1.5;
}

In this example, h1 and p are selectors. They target all <h1> and <p> elements on the page. Properties like color and font-size are given specific values.

The Box Model

A core concept in CSS layout is the box model. Every HTML element can be thought of as a rectangular box. This box consists of four parts, layered from the inside out: the content, padding, border, and margin.

Content: The actual text, image, or other media in the element.
Padding: The space between the content and the border. It's like the matting around a framed picture.
Border: A line that goes around the padding and content.
Margin: The space outside the border, creating distance between this element and other elements on the page.

Understanding how to manipulate these properties is key to controlling the layout and spacing of your webpage.

.my-box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 15px;
}

This CSS rule creates a box with specific dimensions for its content, padding, border, and margin, giving you precise control over its appearance and position on the page.

Time to check your understanding of these foundational concepts.

Quiz Questions 1/6

What is the primary purpose of the <body> tag in an HTML document?

Quiz Questions 2/6

Which attribute is used to specify the destination URL for a hyperlink (<a> tag)?

HTML and CSS are the essential first steps in web development. With a solid grasp of how to structure content and apply styles, you have the building blocks to create your first static websites.

Modern Website Development From Scratch