Fixing Website Formatting with HTML CSS
HTML and CSS Basics
Blueprint and Paint
Every webpage you visit is built with two core languages: HTML and CSS. Think of them like building a house. HTML (HyperText Markup Language) is the blueprint and the raw materials. It creates the structure: the walls, the rooms, the doors, and the windows. It defines what the content is—a heading, a paragraph, an image, or a link.
CSS (Cascading Style Sheets) is the paint, the wallpaper, and the furniture. It takes the raw structure from HTML and makes it look good. CSS controls the colors, fonts, spacing, and the overall layout. You can't have a decorated house without walls, and you can't have a styled webpage without HTML. They work together.
HTML creates the structure of the blog website, and CSS adds styles to make the UI better.
Building with HTML
HTML documents are simple text files made up of elements. You create elements using tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Whatever content you put between them becomes that type of element. The forward slash in the closing tag is what makes it a closing tag.
A basic HTML page has a standard structure that tells the web browser how to read it. It starts with a <!DOCTYPE html> declaration, followed by the <html> element, which wraps everything. Inside, there are two main parts: the <head> and the <body>.
The
<head>contains meta-information about the page, like the title that appears in your browser tab. The<body>contains all the visible content, like text, images, and links.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>This is a main heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">This is a link</a>
</body>
</html>
Inside the <body>, you use different tags to structure your content. Here are a few common ones:
<h1>to<h6>: Heading tags, from most important (h1) to least (h6).<p>: A paragraph.<a>: An anchor tag, used to create hyperlinks.<ul>and<ol>: Unordered (bulleted) and ordered (numbered) lists, respectively. List items go inside<li>tags.
Some tags, like the one for images (<img>), are self-closing. They don't need a separate closing tag because they embed content directly.
Many HTML tags can also have attributes, which provide extra information. Attributes are written inside the opening tag and usually come in name/value pairs, like name="value". For example, the <a> tag needs an href attribute to know where the link should go.
<!-- The href attribute tells the browser the link's destination -->
<a href="https://www.wikipedia.org">Go to Wikipedia</a>
<!-- The src attribute specifies the image file path -->
<img src="/images/photo.jpg">
Styling with CSS
Once you have your HTML structure, you can use CSS to style it. The syntax of CSS is based on rules. A rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style. The declaration block, enclosed in curly braces
{}, contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value.
In the example above, the selector p targets all paragraph elements (<p>). The rule declares that the color property for these elements should be set to the value blue. There are three main ways to apply these CSS rules to an HTML document.
1. Inline Styles
You can add CSS directly to an HTML element using the style attribute. This is useful for one-off styles but gets messy quickly. It mixes content and presentation, which is generally best to avoid.
<p style="color: red; font-size: 20px;">This is a red, larger paragraph.</p>
2. Internal Styles
You can place CSS rules inside a <style> tag within the <head> section of your HTML file. This affects only the current page, which can be useful for single-page websites or page-specific styles.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>A Styled Heading</h1>
</body>
</html>
3. External Stylesheets
The most common and recommended method is to put all your CSS rules into a separate file with a .css extension (e.g., style.css). You then link this file to your HTML document using a <link> tag in the <head>.
This approach keeps your HTML clean and separates the structure from the styling. It also means you can use the same stylesheet to style many pages, making site-wide changes easy.
<!-- In your index.html file -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* In your style.css file */
body {
font-family: Arial, sans-serif;
}
p {
line-height: 1.6;
}
Understanding this fundamental separation—HTML for what it is, CSS for how it looks—is the first major step in web development. Now let's test what you've learned.