HTML and CSS

The Blueprint and the Paint

Every website you visit is built on two core technologies: HTML and CSS. Think of them like building a house. HTML, or HyperText Markup Language, is the blueprint. It creates the structure: the walls, the rooms, the doors, and the windows. It gives the content meaning.

CSS, or Cascading Style Sheets, is the paint, the furniture, and the decorations. It takes the structured blueprint and makes it look good. CSS controls the colors, the fonts, the spacing, and the overall layout. You can't have a well-decorated room without walls, and you wouldn't want to live in a house with only a bare frame. The two work together.

Introduce the concept of separation of concerns - HTML for structure, CSS for presentation, JavaScript for behavior.

Structuring with HTML

HTML uses 'tags' to define different types of content. Most tags come in pairs: an opening tag like  and a closing tag like . Everything between them is considered part of that element. For example, This is a paragraph. creates a paragraph.

A basic HTML document has a standard structure that tells the browser what kind of file it is and where the main content lives.

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is my very first paragraph.</p>
</body>
</html>

Let's break that down:

<!DOCTYPE html>: Declares that this is an HTML5 document.
<html>: The root element that wraps everything.
<head>: Contains meta-information about the page, like the title that appears in the browser tab. This content isn't displayed on the page itself.
<body>: Contains all the visible content of the page, like headings, paragraphs, and images.

There are many HTML elements, each with a specific purpose. Using the right tag for the right job is called 'semantic HTML'. It helps search engines, screen readers, and other developers understand your content.

Tag	Purpose
`<h1>` to `<h6>`	Headings, from most to least important.
`<p>`	A paragraph of text.
`<a>`	An anchor, used to create hyperlinks.
`<img>`	An image.
`<ul>`, `<ol>`, `<li>`	Unordered (bulleted) and ordered (numbered) lists, and their list items.

Styling with CSS

Once you have your HTML structure, CSS brings it to life. You write CSS rules to select HTML elements and apply styles to them. A CSS rule consists of a selector and a declaration block.

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

In this example, p is the selector. It targets all paragraph elements. The block in curly braces {} contains the declarations. color: navy; is one declaration, and font-size: 16px; is another. Each declaration has a property (like color) and a value (like navy), separated by a colon.

There are different ways to select elements:

Element Selector: Targets all elements of a certain type, like h1 or p.
Class Selector: Targets elements with a specific class attribute. You define it in HTML like  and select it in CSS with a period, like .intro-text.
ID Selector: Targets one specific element with an id attribute. You define it in HTML like <div id="main-header"> and select it in CSS with a hash, like #main-header.

A fundamental concept in CSS is the 'box model'. Every HTML element can be thought of as a rectangular box. This box is made of four parts: the content itself, padding, a border, and a margin.

Content: The actual text or image.
Padding: The space between the content and the border.
Border: A line that goes around the padding and content.
Margin: The space outside the border, clearing an area around the element.

Understanding how these parts work together is key to controlling layout and spacing on a webpage.

Making it Responsive

Today, people browse the web on phones, tablets, laptops, and giant desktop monitors. A website needs to look good on all of them. This is called 'responsive design'.

CSS gives us tools to create responsive layouts. The most powerful tool is the media query. A media query allows you to apply specific CSS rules only when certain conditions are met, like when the screen is below a certain width.

/* Default styles for all screens */
.container {
  width: 900px;
  margin: 0 auto; /* Center the container */
}

/* Styles for screens smaller than 920px */
@media (max-width: 920px) {
  .container {
    width: 100%; /* Make it full-width */
  }
}

This code tells the browser to use a 900-pixel wide container by default. But if the browser window's width is 920 pixels or less, it applies the rule inside the media query, making the container take up the full width of the screen. This simple technique is the foundation of building websites that adapt to any device.

Quiz Questions 1/5

Using the analogy of building a house, what is the primary role of CSS?

Quiz Questions 2/5

In an HTML document, which tag contains all the visible content of the webpage, like headings and paragraphs?

With HTML for structure and CSS for style, you have the fundamental building blocks for creating any webpage you can imagine.

Foundations of Web Development