Fix Your Website Formatting
HTML and CSS Basics
The Blueprint of the Web
Every webpage you visit is built on a foundation called HTML, which stands for HyperText Markup Language. Think of it as the skeleton of a website. It provides the basic structure and holds all the content, like text, images, and links.
An HTML document is just a plain text file with a specific structure. It's made up of elements, which are defined by tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Let's break that down:
<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 page.<html>: This is the root element that wraps everything else.<head>: This section contains meta-information about the page, like the title that appears in your browser tab. It's not visible on the page itself.<body>: This is where all the visible content goes, from headings and paragraphs to images and videos.
Building with Elements
Within the <body>, we use different elements to structure our content. Headings, written with <h1> through <h6> tags, create a hierarchy. <h1> is the most important heading, while <h6> is the least.
Paragraphs are created with the <p> tag. These are the basic building blocks for most of the text on a page.
Some elements need extra information, which we provide using attributes. Attributes are always included in the opening tag and provide details about the element. For example, to create a link, we use the <a> (anchor) tag with an href (hypertext reference) attribute to specify the destination.
<a href="https://www.example.com">Visit this website!</a>
To add an image, we use the <img> tag. It's a self-closing tag, meaning it doesn't need a separate closing tag. It requires a src (source) attribute to point to the image file and an alt (alternative text) attribute, which describes the image for screen readers and search engines.
<img src="images/cat.jpg" alt="A photo of a fluffy cat.">
Adding Style with CSS
HTML handles the structure, but it doesn't do much for appearance. That's where CSS, or Cascading Style Sheets, comes in. CSS is the language used to style the HTML elements. It controls colors, fonts, spacing, layout, and more. Keeping HTML and CSS separate makes websites easier to manage.
HTML creates the structure of the blog website, and CSS adds styles to make the UI better.
CSS works by applying rules to HTML elements. 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 property-value pairs.
There are different types of selectors. The simplest is the element selector, which targets all instances of an element type.
/* This makes all paragraphs red */
p {
color: red;
}
To style specific elements, we use class and ID selectors. A class can be applied to multiple elements, while an ID must be unique to a single element on the page.
In your HTML, you add the class or ID as an attribute:
<p class="highlight">This paragraph will be highlighted.</p>
<p id="main-point">This is the most important point.</p>
In your CSS, you target a class with a period (.) and an ID with a hash (#).
/* Styles elements with the 'highlight' class */
.highlight {
background-color: yellow;
}
/* Styles the element with the 'main-point' ID */
#main-point {
font-weight: bold;
font-size: 18px;
}
With these basics, you can build the structure of a webpage and apply simple styles to control its appearance. Let's review what you've learned.
What is the primary role of HTML in web development?
In an HTML document, all the visible content, such as headings, paragraphs, and images, is placed inside which element?