Fixing Website Formatting with HTML CSS
HTML and CSS Basics
The Blueprint of the Web
Every webpage you visit is built with HyperText Markup Language, or HTML. It’s the standard language for creating web pages. Think of it as the skeleton that gives a site its structure. HTML isn't a programming language; it's a markup language, which means it uses tags to define the content and structure of a document.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
An HTML document has a standard structure. It starts with a declaration <!DOCTYPE html> to tell the browser it's an HTML5 document. The entire document is then wrapped in <html> tags. 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 the actual content you see on the screen, like text, images, and links.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>
This basic structure forms the foundation of every single site on the internet.
Building with Elements
HTML uses "elements" to build a page. Most elements are written with a start tag and an end tag, with the content in between. For example, <p>This is my text.</p> creates a paragraph.
Some common elements you'll use constantly are:
<h1>to<h6>for headings<p>for paragraphs<a>for links<img>for images
Many elements can also have "attributes," which provide extra information. Attributes are always included in the start tag. For a link, the href attribute specifies the destination URL. For an image, the src attribute specifies the file path.
<h1>A Main Heading</h1>
<p>This is a paragraph with a <a href="https://www.example.com">link</a>.</p>
<img src="image.jpg" alt="A descriptive caption">
When a browser reads your HTML file, it builds a model of the page's structure in memory. This model is called the Document Object Model, or DOM. The DOM represents the document as a tree of objects, where each HTML element is a node. This tree structure is what allows browsers (and other tools, like JavaScript) to interact with the page's content and structure.
Adding Style
While HTML provides the structure, Cascading Style Sheets (CSS) provides the style. CSS is used to control the presentation, formatting, and layout of your web pages. It tells the browser how to display the HTML elements, from colors and fonts to spacing and positioning.
CSS describes how HTML elements should be displayed.
A CSS 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 declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
/* This is a CSS comment */
p {
color: blue;
font-size: 16px;
}
In this example, p is the selector, which targets all <p> elements. color and font-size are properties, and blue and 16px are their values.
Selectors are powerful. You can select elements by their tag name (p), their class (.my-class), or their ID (#unique-id). Classes are reusable and can be applied to multiple elements, while an ID must be unique to a single element on the page.
| Selector | Example | Description |
|---|---|---|
| Element | h1 | Selects all <h1> elements. |
| Class | .highlight | Selects all elements with class="highlight". |
| ID | #header | Selects the element with id="header". |
To apply CSS to an HTML document, you typically create a separate .css file and link to it from the HTML's <head> section. This keeps your content (HTML) and presentation (CSS) separate, which is a core principle of modern web development.
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="styles.css">
</head>
Time to test your knowledge.
What is the primary role of HTML in web development?
Which HTML tag is used to contain the visible content of a web page, like paragraphs, headings, and images?
With HTML for structure and CSS for style, you have the two core technologies needed to build any webpage.