HTML Introduction

HTML stands for Hyper Text Markup Language. It is the standard language used to create web pages.

HTML describes the structure of a web page
HTML consists of elements
HTML elements tell the browser how to display content

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML Structure

Every HTML document has a basic structure.

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>

</body>
</html>

HTML Elements

An HTML element usually consists of a start tag, content, and an end tag.

Example

<p>This is a paragraph</p>
<a href="#">This is a link</a>

HTML Attributes

Attributes provide additional information about HTML elements.

Example

<img src="image.jpg" alt="My Image">
<a href="">Visit Example</a>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

HTML Paragraphs

The <p> tag defines a paragraph.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

CSS Introduction

CSS stands for Cascading Style Sheets. CSS is used to style HTML elements.

Example

p {
    color: blue;
    font-size: 18px;
}

CSS Selectors

CSS selectors are used to select HTML elements you want to style.

Example

/* Element selector */
p {
    color: red;
}

/* Class selector */
.box {
    background: lightgray;
}

/* ID selector */
#header {
    height: 60px;
}

CSS Colors

Colors in CSS can be set using names, HEX, RGB, or HSL.

Example

h1 {
    color: #04aa6d;
}

p {
    color: rgb(50, 50, 50);
}

CSS Box Model

The CSS box model consists of margins, borders, padding, and content.

Example

.box {
    margin: 20px;
    padding: 15px;
    border: 2px solid black;
}