HTML and CSS Basics

The Skeleton and the Style

Every webpage you visit is built with two core languages: HTML and CSS. Think of them as a team. HTML (HyperText Markup Language) provides the structure, like a skeleton. It defines the different parts of a page, such as headings, paragraphs, and images.

HTML creates the structure of the blog website, and CSS adds styles to make the UI better.

CSS (Cascading Style Sheets) is the clothing and personality. It tells the browser how to display the HTML elements. This includes everything from colors and fonts to the layout of the page. Without CSS, the web would be a very plain place, just structured text on a white background.

Building with HTML

An HTML document is a plain text file that contains tags. These tags are keywords surrounded by angle brackets, like <body>. Most tags come in pairs: an opening tag and a closing tag. The closing tag has a forward slash before the tag name, like </body>.

Every HTML page has a basic structure that includes the <!DOCTYPE html> declaration, followed by <html>, <head>, and <body> tags. The <head> section contains information about the page (like the title), while the <body> holds all the visible content.

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Inside the <body>, we add elements to build our content. Here are a few of the most common ones:

<h1> to <h6>: These are for headings, with <h1> being the most important.
<p>: This is for a paragraph of text.
<a>: This creates a hyperlink. The href attribute specifies the URL.

Let's add some of these to our page.

<body>
  <h1>Welcome to My Site</h1>
  <p>This is my very first paragraph. It's exciting!</p>
  <a href="https://www.example.com">Visit Example.com</a>
</body>

Styling with CSS

Now that we have our structure, let's add some style. CSS works by creating rules. A rule consists of a selector and a declaration block.

Selector: This points to the HTML element you want to style (e.g., h1, p).
Declaration Block: This is wrapped in curly braces {} and contains one or more declarations. Each declaration includes a CSS property name and a value, separated by a colon (e.g., color: blue;).

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

p {
  color: gray;
}

In this example, the h1 selector targets all <h1> elements. The declarations inside the curly braces make their text color navy and their font size 32 pixels. The p selector targets all paragraph elements and sets their text color to gray.

Connecting the Files

To apply our CSS to our HTML, we need to link them together. The best practice is to keep your CSS in a separate file (e.g., style.css). You can then link to it from your HTML file using the <link> tag inside the <head> section.

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Site</h1>
  <p>This is my very first paragraph. It's exciting!</p>
  <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

With this link in place, the browser will fetch the style.css file and apply all the rules you've defined to the HTML elements. Your plain page is now styled.

Here are a few basic styling properties to get you started:

color: Sets the color of text.
background-color: Sets the background color of an element.
font-family: Sets the font for text (e.g., Arial, Times New Roman).
font-size: Sets the size of text.
text-align: Aligns text (left, center, right).

Try creating an h1 with a centered, dark green title and a light gray background. This simple exercise combines multiple properties to quickly change the look and feel of your page.

Now you know the fundamentals. HTML provides the structure, and CSS provides the style. Mastering how they work together is the first major step in web development.

Let's check your understanding of these core concepts.

Quiz Questions 1/4

In the context of web development, what is the primary role of HTML?

Quiz Questions 2/4

Consider the following CSS code block:

h1 {
  color: navy;
  font-size: 32px;
}

What is the h1 portion of this rule called?

With these basics, you have a solid foundation for understanding how websites are built and styled.

Fixing Website Formatting with HTML CSS