HTML & CSS

#webdev #beginners #programming #tutorial

HTML
hypertext markup language used to create webpage.
markup is the special tag and element used to structure and decribe the content of webpage.
HTML describes the structure of a Web page
HTML consists of a series of elements

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Explaination
The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

The<body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <h1> element defines a large heading

The <p> element defines a paragraph

Feature of html-5
HTML5 introduced powerful new features that make modern web applications faster, more interactive, and more multimedia-friendly.

It added semantic tags, native audio/video support, offline storage, better graphics, and APIs for real-time communication, making it the backbone of today’s dynamic websites.

Tag vs Element
A tag is the code snippet inside angle brackets < >.

Tags are instructions to the browser about how to interpret content.

They usually come in pairs:
Opening tag:<p>
Closing tag:</p>

An element is the complete structure: the opening tag, the content, and the closing tag together.

It represents the actual component on the webpage.

CSS
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

CSS syntax
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.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

p {
color: red;
text-align: center;
}

p is a selector in CSS (it points to the HTML element you want to style:

color is a property, and red is the property value
text-align is a property, and center is the property value

types of css
Inline
Internal
External

Inline css
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>