HTML and CSS Basics

The Blueprint of the Web

Every website you visit is built on a foundation of HTML, which stands for HyperText Markup Language. Think of it as the skeleton of a webpage. It doesn't handle the colors, fonts, or layout—it simply defines the structure and the content, like headings, paragraphs, and images.

HTML uses elements to build this structure. An element is usually made up of an opening tag, the content, and a closing tag. For example, to create a paragraph, you wrap your text in paragraph tags:

<p>This is a paragraph of text.</p>

The <p> is the opening tag, and </p> is the closing tag. The text in between is the content. Together, they form a paragraph element. There are many different tags for different types of content, like <h1> for the most important heading, <h2> for a subheading, and <img> for an image.

Adding More Information

Sometimes, an element needs extra information. This is where attributes come in. Attributes are added to the opening tag and provide details about the element. For instance, the anchor tag, <a>, creates a hyperlink. But on its own, it doesn't know where to link. You need to give it an href attribute to specify the destination.

<a href="https://www.example.com">Visit this cool website!</a>

In this example, href is the attribute name, and "https://www.example.com" is its value. Another common example is the <img> tag, which uses a src attribute to point to the image file it should display. Some tags, like <img>, are self-closing and don't need a separate closing tag.

Adding Style with CSS

An HTML document on its own looks very plain. To add visual style—colors, fonts, spacing, and layouts—we use Cascading Style Sheets, or CSS. If HTML is the skeleton, CSS is the clothing. It tells the browser how the HTML elements should look.

CSS works by selecting HTML elements and applying style rules to them. A 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.

p {
  color: blue;
  font-size: 16px;
}

This rule selects all <p> elements and makes their text color blue and their font size 16 pixels. The selector is p, and the declarations are color: blue; and font-size: 16px;.

Connecting HTML and CSS

So, how do you apply these CSS rules to an HTML document? There are three main ways to do it.

External Stylesheet: This is the most common and recommended method. You write your CSS in a separate file (e.g., styles.css) and link it to your HTML file using a <link> tag inside the <head> section.

<!-- In your index.html file -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

This approach keeps your content (HTML) and your presentation (CSS) separate, making your code cleaner and easier to manage.

Internal Stylesheet: You can place CSS rules directly inside your HTML file by putting them within a <style> tag, which also goes in the <head> section. This method is useful for single-page websites or for applying styles unique to one specific page.

<!-- In your index.html file -->
<head>
  <style>
    body {
      background-color: lightgray;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

Inline Styles: You can apply styles directly to a single HTML element using the style attribute. This method is generally discouraged because it mixes content with presentation and makes maintenance difficult. It's usually reserved for very specific, small-scale styling needs.

<p style="color: red; font-size: 20px;">This is a red, larger paragraph.</p>

Using an external stylesheet is the best practice for almost any project. It allows you to reuse the same styles across multiple pages, making your website consistent and much faster to update.

HTML provides the structure, and CSS provides the style. They are two separate languages that work together to create visually engaging websites.

Let's check your understanding of these core concepts.

Quiz Questions 1/5

What is the primary role of HTML in web development?

Quiz Questions 2/5

In the HTML code <a href="https://example.com">Click here</a>, what is href?

With HTML and CSS, you have the fundamental tools to build the structure and appearance of any webpage. Mastering these two languages is the first major step in web development.

Fixing Website Formatting with HTML CSS