HTML and CSS - The Foundations of the Internet

HTML: The Backbone of the Web

HTML, or HyperText Markup Language, was created by Tim Berners-Lee, the father of the World Wide Web. Initially, HTML was a simple language designed to share scientific documents, but it had a grand dream: to create a universal system that anyone could use to share information online.

By 1995, HTML 2.0 emerged as the first official standard. It introduced key features like:

  • Forms,
  • Tables, and
  • Basic multimedia support.

The late 1990s saw the release of HTML 4.01, adding support for stylesheets (aka CSS) and improved accessibility (like alt text).

HTML5: The Web's Modern Foundation

The real revolution began in 2008 with the development of HTML5. Officially standardized in 2014, HTML5 was designed to meet the demands of modern web applications.

HTML5 introduced a host of new features, including:

  • Semantic tags (like <header> and <footer>), improving SEO and accessibility,
  • Native multimedia support (like <video> and <audio>),
  • and APIs for offline storage, geolocation, and more.
  • Improved semantics.

HTML5 marked the web's transition from a document-based medium to an application platform, enabling the creation of rich, interactive experiences.

CSS: The Web's Visual Language

CSS, or Cascading Style Sheets, was introduced in 1996 by the W3C to address a growing need: separating a webpage's content from its design. Before CSS, styling was embedded directly within HTML, making it difficult to manage and update websites. (Interestingly, frameworks like Tailwind seem to be regressing back to the old ways of inline styles, albeit with a better setup.)

  1. CSS1 (1996) offered basic styling capabilities- fonts, colors, and spacing. It was a revolutionary step but limited in scope.
  2. CSS2 (1998) expanded capabilities significantly, adding support for absolute positioning, z-index, and media types. It enabled complex layouts and greater design flexibility.
  3. In 2011, CSS3 introduced a modular approach, allowing individual features to evolve independently. Key innovations included flexbox and grid layouts, media queries, transitions, and animations.
    CSS3 empowered designers to create visually stunning, highly responsive

A Convergence of Power

Today, HTML and CSS continue to evolve alongside the web's dynamic needs. They are supported by a vast ecosystem of tools, frameworks, and libraries.

The evolution of HTML and CSS is not just a tale of technological advancements–it's a testament to how collaboration and innovation can reshape the way we connect and interact with the world. HTML and CSS have grown from simple tools into the cornerstones of a digital age, shaping how we experience the internet today.

Demo

This entire page serves as a demo. To get the html of this page, go to this page. For the CSS, go here.

HTML

In a HTML file (ending in .html), there is always a basic structure:

<!-- This is a comment (both multiline and single line comments use this syntax) -->
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/path/to/stylesheet.css"> 
    <title>Page Title</title> 
</head>
<style>
    /* CSS code can go here or in another file goes here */
</style>
<script> 
    // JavaScript code can go here or in another file
</script>
<body> 
    <header> 
        <h1>Header Title</h1> 
    </header>
    <nav>
        <!-- Navigation links go here -->
    </nav>
    <main>
        <section>
            <h2>Section Title</h2>
            <p>Section content goes here</p>
        </section>
    </main>
    <footer>
        <p>Footer content goes here</p>
    </footer>
</body>
</html>

As you can see, HTML is built using tags. Each tag tells the interpreter (browser) what is within it. Tags are formatted like so:

<tag [values]> Content </tag>

There are a few simple tags that can get you started in HTML:

  • Headings: <h1>, <h2>, <h3>
  • Paragraphs: <p>
  • Links: <a href="{url}">
  • Images: <img src="{src}">
  • Lists: <ol> (ordered/numbered list), <ul> (bulleted list), <li> (list item)
  • Organizational: <div>, <span> (inline div)
  • Text emphasis: <b> for bold, <i> for italicized, <u> for underlined

There are many more tags than the ones listed, such as meta tags (header, main, section, and footer) and other style tags (iframe, code). Many of those are used in this page.

There are also tags that are necessary for a well-structured document, like head, html, !DOCTYPE and body.

Tags also have an id or a class, which are organizational indicators that are used later in CSS styling.

CSS

CSS is a language that is used to style HTML. Usually, CSS is written in a separate file(s) and linked in the document's head, but it can also be written in the document itself. CSS is made up of selectors and properties. Selectors are used to target specific HTML elements, and properties are used to style those elements.

Here is an example of CSS:

/* This is a comment */
h1 {
    color: blue;
    font-size: 24px;
}
p {
    color: black;
    font-size: 16px;
}
.class {
    color: red;
    font-size: 20px;
}
#id {
    color: green;
    font-size: 18px;
}

As you can see, CSS is made up of selectors and properties. Selectors can be tags, classes, or ids. Tags are selected by their tag name, classes are selected by a period followed by the class name, and ids are selected by a hash followed by the id name. Properties are then applied to the selected elements.

There are many properties that can be applied to elements, such as color, font-size, background-color, and margin. There are also many more selectors that can be used, such as pseudo-classes and pseudo-elements.

CSS can also contain animations. An animation in CSS essentially tells the browser what it wants certain properties to look like at certain times, and is placed on a selector through the animation property.

Here is an example of a simple animation that changes the color of text over 10 seconds:

@keyframes colorchange {
    0% {
        color: red;
    }
    100% {
        color: blue;
    }
}

p {
    animation: colorchange 10s infinite;
}

Wrapping Up

HTML and CSS are the building blocks of the web. They are the foundation upon which all websites are built. HTML is used to create the structure of a webpage, while CSS is used to style that structure. Together, they allow developers to create beautiful, functional websites that are accessible to all users.

As you continue to learn and grow as a developer, remember that HTML and CSS are just the beginning. There is so much more to learn and explore in the world of web development. Keep pushing yourself to learn new things and try new technologies. The web is constantly evolving, and there is always something new to discover.