What is HTML & CSS

HTML

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two fundamental technologies used in web development to create and style web pages. They work together to structure and design web content, allowing developers to create visually appealing and functional websites. Let's explore each of them in detail:

HTML (Hypertext Markup Language):

HTML is the backbone of every web page. It is a markup language used to structure the content of a web page, defining elements and their relationships. HTML documents are made up of collections of elements, denoted by tags enclosed in angle brackets (<>). Here is a breakdown of the main features of HTML:

Elements: HTML documents consist of elements, which are the building blocks of a web page. Elements are defined by tags and can be nested inside each other. Common elements include headings (<h1>, <h2>, etc.), paragraphs (<p>), lists (<ul>, <ol>, <li>), links (<a>), images (<img>), forms (<form>, <input>, <button>), and more.

Attributes: Elements can have attributes that provide additional information about them. Attributes are placed inside the opening tag of an element and are used to modify an element's behavior or appearance. For example, the src attribute in an <img> tag specifies the image source.

Document Structure: HTML documents follow a hierarchical structure. The top-level element is usually <html>, which contains two main sections: <head> (for metadata like title and links to style sheets) and <body> (for the visible content of the page).

Semantic HTML: HTML5 introduced semantic elements such as <header>, <nav>, <article>, <section> and <footer>, which provide meaning to the structure and content of a page. Using semantic elements improves accessibility and search engine optimization.

Spacing and Formatting: HTML ignores whitespace and extra line breaks, so proper indentation and formatting are for readability and maintenance purposes.

Comments: HTML can be commented using  to provide comments to developers or temporarily disable parts of the code.

Example of a simple HTML document:

html

Copy code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph of text.</p>

<a href="https://www.example.com">Visit Example.com</a>

</body>

</html>

CSS (Cascading Style Sheets):

CSS is used to control the presentation and layout of HTML elements on a web page. It allows you to define how elements should appear, specifying attributes like colors, fonts, sizes, margins, and positioning. Here are the main aspects of CSS:

Selectors: CSS selectors are used to target HTML elements. You can select elements by tag name, class, ID, or other attributes. For example, to style all <p> elements, you would use p { ... }.

Properties: CSS properties define the visual characteristics of selected elements. Common properties include color (text color), font-size (text size), margin (spacing around an element), padding (spacing inside an element), and background-color (background color).

Values: Properties are assigned values that determine how the selected elements should be styled. Values can be specific colors, sizes (e.g., pixels, percentages), or other units.

Selectors and Properties Combining: CSS rules consist of selectors and properties enclosed in curly braces. Multiple rules can be combined in an external CSS file or embedded within HTML using the <style> element.

Cascading: CSS stands for "Cascading Style Sheets" because styles can cascade, meaning that styles applied at different levels (e.g., inline, internal, external) can affect an element's appearance. The cascade follows a specific order of precedence.

Example of CSS applied to HTML:

/* External CSS file (styles.css) */ h1 { color: blue; font-size: 24px; } p { color: #333; margin: 10px; } /* Inline CSS (inside HTML) */ <div style="background-color: #FFC0CB;">This is a pink div.</div>