Fix Website Formatting with HTML CSS
HTML and CSS Basics
The Skeleton and the Style
Every website you visit is built with two core languages: HTML and CSS. Think of them like this: HTML is the skeleton that gives a webpage its structure, while CSS is the clothing that gives it style.
HTML (HyperText Markup Language) organizes the content. It tells the browser what is a heading, what is a paragraph, and what is a link. It's all about structure and meaning.
CSS (Cascading Style Sheets) controls the presentation. It tells the browser what color the text should be, what font to use, and how to arrange elements on the page. It's all about aesthetics.
HTML provides a website’s structure and layout.
Understanding HTML Structure
HTML documents are made of elements. An element is a piece of content, like a paragraph or an image. You create elements using tags.
Most tags come in pairs: an opening tag and a closing tag. For example, to create a paragraph, you wrap your text in <p> and </p> tags. The p stands for paragraph.
The entire unit, from the opening tag
<p>to the closing tag</p>, including the content in between, is the HTML element.
Here’s a look at a basic HTML document. It has a head section for metadata (like the page title) and a body section for the visible content.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>This is a Main Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Some elements need extra information. This is where attributes come in. Attributes are added to the opening tag and provide details about the element. For example, the anchor tag <a> creates a link, but it needs an href attribute to know where to link to.
<a href="https://www.example.com">Visit Example.com</a>
In this case, href is the attribute name, and "https://www.example.com" is the attribute value.
Styling with CSS
While HTML gives us structure, it doesn't look very exciting on its own. CSS is how we add color, adjust spacing, and change fonts. The basic syntax of a CSS rule involves a selector and a declaration block.
The selector points to the HTML element you want to style. The declaration block, inside curly braces
{}, contains one or more property-value pairs.
For example, if you wanted to make all paragraphs blue and increase their font size, the CSS rule would look like this:
p {
color: blue;
font-size: 16px;
}
Here, p is the selector. color and font-size are properties, and blue and 16px are their respective values. Each declaration ends with a semicolon.
How to Connect CSS and HTML
There are three ways to apply CSS styles to an HTML document. Each has its own use case.
1. Inline Styles
You can add styles directly to a single HTML element using the style attribute. This method is useful for quick, specific changes, but it's not efficient for styling an entire website.
<p style="color: red; font-size: 20px;">This is a red, larger paragraph.</p>
2. Internal Stylesheet
You can place CSS rules inside a <style> tag within the <head> section of your HTML file. These styles will apply to all matching elements on that specific page.
<head>
<title>My Styled Page</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: navy;
}
</style>
</head>
3. External Stylesheet
This is the most common and recommended method. You write all your CSS in a separate file (e.g., styles.css) and link it to your HTML document using a <link> tag in the <head>. This allows you to use the same styles across many pages, making your website easier to maintain.
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
With these fundamentals, you have the building blocks to structure and style web content. Understanding how HTML elements work and how CSS targets them is the first major step in creating clean, professional-looking websites.
If a webpage were a house, what would HTML and CSS represent?
Which of the following is a correctly formed CSS rule to make all paragraph text red?