No history yet

HTML and CSS Basics

The Structure of the Web

Every webpage you visit, from a simple blog to a complex news site, has a skeleton. This underlying structure is built with HTML, which stands for HyperText Markup Language. It's not a programming language in the traditional sense; instead, it's a markup language used to organize and describe the content on a page.

Think of HTML as the blueprint for a house. It defines the rooms: this is a kitchen, this is a bedroom, this is a hallway. It tells the browser what each piece of content is.

HTML uses tags to define different types of content, called elements. A tag is usually composed of a keyword in angle brackets, like <h1> for a main heading or <p> for a paragraph. Most elements have an opening tag and a closing tag, with the content placed in between.

<h1>This is a Main Heading</h1>
<p>This is a paragraph of text.</p>

Some elements also have attributes, which provide extra information. Attributes are written inside the opening tag and usually come in name/value pairs, like name="value". For instance, the anchor tag <a> creates a hyperlink, and its href attribute specifies the destination URL.

<a href="https://www.example.com">Visit Example.com</a>

Every HTML document has a basic structure that tells the browser it's a webpage. It includes a document type declaration, <!DOCTYPE html>, followed by the <html> element, which wraps everything. Inside, the <head> contains metadata (like the page title), and the <body> holds all the visible content.

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my very first webpage.</p>
</body>
</html>

Styling the Skeleton

An HTML document on its own is functional but plain. To add style—colors, fonts, and layout—we use CSS, or Cascading Style Sheets. If HTML is the skeleton, CSS is the clothing. It dictates how the HTML elements should look.

Lesson image

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 CSS property name and a value, separated by a colon.

selector {
  property: value;
}

For example, to make all paragraph (<p>) elements on a page have blue text, you would use this rule:

p {
  color: blue;
}

There are many types of selectors. You can select elements by their tag name (like p or h1). You can also use class selectors (which start with a .) to style multiple elements the same way, or ID selectors (which start with a #) to target one unique element.

Selector TypeExampleDescription
Elementh1Selects all <h1> elements.
Class.highlightSelects all elements with class="highlight".
ID#main-logoSelects the single element with id="main-logo".

Putting It All Together

To build a webpage, you create an HTML file for the structure and a separate CSS file for the styles. This practice, known as separation of concerns, makes your code cleaner and easier to manage. You then link the CSS file to your HTML document using a <link> tag inside the <head> section.

The <link> tag's rel attribute is set to "stylesheet" to specify its relationship to the HTML file, and the href attribute points to the location of your CSS file.

Let's look at a complete example. Here is the HTML file, named index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My Styled Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="page-title">Welcome to My Page</h1>
  <p class="intro-text">This is a paragraph styled with CSS.</p>
  <p>This is another paragraph, also styled.</p>
</body>
</html>

And here is the corresponding CSS file, named styles.css:

/* This is a CSS comment */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

#page-title {
  color: #333;
  text-align: center;
}

.intro-text {
  color: navy;
  font-size: 18px;
}

p {
  line-height: 1.5;
}

When you open index.html in a web browser, the browser reads the HTML to understand the structure, sees the link to styles.css, and then applies the styles to render a visually formatted page.

Lesson image

With these two languages, you have the fundamental tools to create static websites. HTML provides the meaning and structure, while CSS provides the visual presentation and layout.

Quiz Questions 1/5

What is the primary role of HTML in web development?

Quiz Questions 2/5

In a CSS rule, what is the part that points to the HTML element you want to style called?