HTML and CSS

The Blueprint and the Paint

Every building starts with a blueprint. It defines the structure: where the rooms are, the placement of doors, and the height of the ceilings. On the web, that blueprint is HTML, which stands for HyperText Markup Language. It gives a webpage its fundamental structure.

HTML (HyperText Markup Language) is the foundation of web development.

Once the structure is built, you need to make it look good. You choose paint colors, hang pictures, and arrange furniture. This is the job of CSS, or Cascading Style Sheets. CSS takes the raw structure of HTML and adds all the visual flair—colors, fonts, and layout—to create a polished final product.

Let's look at the basic structure of an HTML document. It's a bit like a formal letter, with a header and a body. Everything is wrapped in tags, which are keywords surrounded by angle brackets, like <p> for a paragraph.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Here’s a breakdown:

<!DOCTYPE html>: Declares that this is an HTML5 document.
<html>: The root element that wraps everything.
<head>: Contains meta-information, like the page title. This part isn't visible on the page itself.
<body>: Holds all the visible content—headings, paragraphs, images, and links.

Within the <body>, you use various tags to structure your content. Headings range from <h1> (the most important) to <h6>. Paragraphs are wrapped in <p> tags, and links use the <a> (anchor) tag with an href attribute to specify the destination URL. Unordered (bulleted) lists use <ul> with <li> for each item, while ordered (numbered) lists use <ol>.

Creating Forms

Forms are essential for collecting user input, from simple search bars to complex registration pages. The <form> tag is the container for all your input fields.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Submit">
</form>

The <label> provides a description for the input field, which improves accessibility. The <input> tag is versatile; its type attribute can be set to text, password, checkbox, radio, submit, and more. This simple structure is the backbone of interaction on the web.

Styling with CSS

Now for the fun part: adding style. CSS works by selecting HTML elements and applying rules to them. You can select elements by their tag name (e.g., p), a class name (e.g., .important-notice), or a unique ID (e.g., #main-header).

/* This is a CSS comment */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
  text-align: center;
}

.highlight {
  background-color: yellow;
}

This CSS code does three things:

Sets a default font and a light gray background for the entire page.
Makes all <h1> headings navy blue and centered.
Gives any element with class="highlight" a yellow background.

To link a CSS file to an HTML document, you add a <link> tag inside the <head> section: <link rel="stylesheet" href="styles.css">.

Understanding Space and Layout

To control the layout of elements, you need to understand the CSS box model. Every HTML element can be thought of as a rectangular box. This box consists of four parts: the content itself, padding, border, and margin.

Mastering the box model is key to controlling spacing. Beyond that, CSS positioning properties let you place elements exactly where you want them. The position property can be static (the default), relative (offset from its normal position), absolute (positioned relative to its nearest positioned ancestor), or fixed (stuck in the same place in the viewport, even when you scroll).

Finally, websites need to look good on all devices, from phones to desktops. This is called responsive design. A core technique for this is using media queries. A media query allows you to apply different CSS rules based on the screen size.

/* On screens that are 600px wide or less, 
   make the background color lightblue */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

With media queries, you can change layouts, hide elements, or adjust font sizes to create a seamless experience on any device.

Ready to test your knowledge? Let's see what you've learned about the building blocks of the web.

Quiz Questions 1/5

What are the respective primary roles of HTML and CSS in web development?

Quiz Questions 2/5

In an HTML document, which tag is the correct container for all visible content, such as headings, paragraphs, and images?

By combining a solid HTML structure with thoughtful CSS styling, you can build static web pages that are both organized and beautiful.

Web App Development Fundamentals