MSDN Documentation - HTML & CSS Tutorials

HTML & CSS Basics

Welcome to the fundamental tutorial for building web pages with HTML and CSS. This section will guide you through the essential building blocks of the web.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

Here's a basic HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Common HTML Tags

<h1> to <h6>: Headings
<p>: Paragraph
<a>: Anchor (link)
<img>: Image
<ul>, <ol>, <li>: Unordered/Ordered lists and list items
<div>: Division (container)
<span>: Inline container

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Linking CSS to HTML

There are three ways to insert CSS:

Inline CSS: Using the style attribute within HTML elements.
Internal CSS: Using the <style> tag within the <head> section of an HTML document.
External CSS: Linking to a separate .css file using the <link> tag in the <head> section. (Recommended for larger projects)

Basic CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
    property: value;
    property: value;
}

Example:

p {
    color: navy;
    font-size: 16px;
}

Styling the Example

Let's style our basic HTML example using an external CSS file named style.css.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This paragraph is styled by CSS.</p>
</body>
</html>

CSS (style.css):

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f8ff; /* AliceBlue */
}

h1 {
    color: #0056b3; /* Darker Blue */
    text-align: center;
}

p {
    color: #333;
    font-size: 1.1em;
    line-height: 1.5;
}

Next Steps

Now that you understand the basics of HTML and CSS, you can move on to learning about JavaScript to add interactivity to your web pages. Explore the links in the sidebar to continue your learning journey!

For more detailed information, refer to the HTML Element Reference and CSS Property Reference.