Fixing Website Formatting with HTML CSS
HTML and CSS Basics
The Web's Blueprint
Every website you visit is built on a foundation of HTML, which stands for HyperText Markup Language. Think of it as the skeleton or the blueprint of a house. It provides the essential structure and organizes all the content, from text and images to links.
Think of HTML as the bricks that you need to build anything for the web.
An HTML document has a standard structure that browsers read to display the page correctly. It starts with <!DOCTYPE html>, which tells the browser it's an HTML5 document. The <html> tag wraps everything. Inside, the <head> section holds metadata, like the page title that appears in your browser tab, while the <body> section contains all the visible content.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph on my first page.</p>
</body>
</html>
Building with Elements
HTML uses tags to create elements, which are the building blocks of a webpage. Headings are created with tags from <h1> (the most important) to <h6>. Paragraphs use the <p> tag. Links, which make the web interactive, are made with the <a> tag, short for anchor.
Many elements need extra information, which we provide through attributes. For a link, the href attribute specifies the destination URL. For an image, added with the <img> tag, the src attribute points to the image file's location, and the alt attribute provides descriptive text for accessibility.
<!-- A link to another website -->
<a href="https://www.example.com">Visit Example.com</a>
<!-- An image with descriptive alt text -->
<img src="images/cat.jpg" alt="A fluffy orange cat sleeping">
When a browser reads your HTML file, it builds an internal model of the page called the Document Object Model, or DOM. It organizes all the elements into a tree-like structure, with the <html> element at the root. This model is what allows browsers (and other tools like JavaScript) to understand and interact with the page's content.
Adding Style with CSS
While HTML provides the structure, Cascading Style Sheets (CSS) brings it to life with visual style. If HTML is the blueprint, CSS is the paint, furniture, and landscaping. It controls colors, fonts, spacing, and the layout of every element on the page.
CSS describes how HTML elements should be displayed.
CSS works by creating rules. A rule consists of a selector and a declaration block. The selector targets the HTML element you want to style. The declaration block, enclosed in curly braces { }, contains one or more declarations, each with a property and a value, separated by a colon.
/* This CSS rule makes all h1 elements red */
h1 {
color: red;
font-size: 24px;
}
Here, h1 is the selector, color and font-size are properties, and red and 24px are their respective values. This single rule will apply to every <h1> element in your HTML document.
Connecting HTML and CSS
To apply your CSS styles, you need to connect them to your HTML document. The most common and recommended way is to use an external stylesheet. You write all your CSS rules in a separate file with a .css extension, like styles.css.
Then, you link to this file from your HTML document using a <link> tag placed inside the <head> section.
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="styles.css">
</head>
To style specific elements without affecting all elements of the same type, we use more specific selectors. You can add a class attribute to any HTML element. In your CSS, you target that class with a period . followed by the class name.
Classes are reusable. You can apply the same class to multiple elements to give them a consistent style.
| HTML with Class | CSS Selector |
|---|---|
<p class="highlight">...</p> | .highlight { color: blue; } |
<h2 class="highlight">...</h2> | .highlight { color: blue; } |
For unique elements that appear only once on a page, like a main navigation bar or a footer, you can use an id attribute. In CSS, you target an ID with a hash symbol # followed by the ID name.
<!-- In your HTML file -->
<div id="main-header">
<h1>My Website</h1>
</div>
/* In your CSS file */
#main-header {
background-color: #f2f2f2;
padding: 20px;
}
With these basic building blocks of HTML structure and CSS styling, you have the power to create and design content for the web. Now let's review what we've covered.
What is the primary role of HTML in web development?
In an HTML document, where is the correct place to put the <link> tag to attach an external CSS stylesheet?
Understanding how HTML provides structure and CSS adds style is the first major step in web development. Mastering these fundamentals opens the door to creating clear, readable, and visually appealing web pages.