AI Batteries Included

Start here for our introduction to HTML and CSS, two languages we'll use to create static webpages in VSCode.

Summary

HTML, or HyperText Markup Language, is what we'll use to define the structure of our website and its content.

CSS, or Cascading Style Sheets, is a language we'll use to define our website's look through styling.

An HTML file is our website's base -- what the browser reads and displays, with a basic structure.
A CSS file gives the browser instructions on how to style that structure, with fonts, color, spacing, and more.

What is HTML?

When we create an .html file, we define the structure of our website along with its text/image content.

With HTML, we want to define our website's structure: headers, navigation bars, content sections, and more.

A web browser, like Chrome, is able to read an .html file and display it -- but without styling, it'll look generic. That's where CSS comes in.

How does HTML work?

An HTML is a set of instructions, which a browser reads to then display your website. The basic structure of an HTML file might look like this:

<head>: metadata, references to external resources like CSS
<header>: our site name, logo, navigation menu
<main>: our main content area, can contain other elements
<footer>: site summary and internal links

Basic HTML language

The structural pieces we saw above are called elements, which are packages of instructions that contain tags and content.

Tag: a pair of brackets that surround markup instructions
Content: our content, surrounded by a pair of tags
Element: a package of tags and content, acting as a set of instructions

Let's look at some basic HTML that creates a header section:

<header>
    <h1>My Website</h1>
</header>

Here,

<header> is the opening tag for the header section
- <h1> is the opening tag for header 1
  - “My Website” is the text content
- </h1> is the closing tag for header 1
</header> is the closing tag for the header

Types of HTML elements

<h1>...<h6>: Headings (largest to smallest)
<p>: Paragraphs
<div>: General containers
<header>, <main>, <footer>: Semantic sections
<a>: Links
<img>: Images
<ul>, <ol>, <li>: Lists

We've shown a few of these already, and there are more semantic elements that we can use as we create our page structure.

Remember: we want to strategically use elements in HTML to define the purpose of our content groups, which we can style later with CSS.

What is CSS?

CSS, or Cascading Style Sheets, is another language used to style our HTML structure -- defining fonts, colors, spacing, margins, and more.

CSS allows us to globally define our website's style, with individual definitions for each of our elements.

We can use a globals.css file to define our styles, which we'll reference in our .html files in the <head>.
This directs the browser to style our HTML accordingly.

CSS syntax examples

Let's model what the body section of a globals.css file might look like:

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #000000;
    background-color: #FFFFFF;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

As we can see, here we can define our global styling constants for our body text in HTML. For our layout components such as our footer, we'll further define their styling:

footer {
    background-color: #000000;
    color: #ffffff;
    padding: 2rem;
    text-align: center;
    margin-top: auto;
}

Here, we're setting white text (#ffffff) on a black background (#000000), centering it on the page, and adding a margin-top to separate our footer from our main content.

CSS selectors and properties

We can be even more specific with our selectors, defining unique styles for elements as needed:

header h1 {
    color: #333333;
    font-size: 2rem;
}

.highlight {
    background-color: yellow;
}

#main-title {
    font-weight: bold;
}

HTML Glossary

Element: A complete HTML structure (opening tag + content + closing tag)
Tag: The <> markers that define an element
Attribute: Additional information in an opening tag (like href in <a href=“...”>)
Semantic HTML: Using elements that describe their meaning (header, nav, main, footer)
Block elements: Take up full width (div, p, h1-h6)
Inline elements: Flow with text (span, a, strong)

CSS Glossary

Selector: Specifies which HTML elements to style
Property: What aspect to style (color, font-size, margin)
Value: The setting for a property
Class selector: Styles elements with a specific class (.classname)
ID selector: Styles a single element with a specific ID (#idname)
Box model: The concept of margin, border, padding, and content
Responsive design: Adapting layout for different screen sizes

Summary & Next Steps

HTML and CSS are two essential languages for building modern websites:

HTML provides the structure and content
CSS provides the visual styling and layout

They work together: HTML defines what appears on the page, and CSS defines how it looks.

Ready to start building?

Now that you understand the basics of HTML and CSS, you're ready to:

Want to learn more?

Visit our Education Hub for more guides and resources!