CSS types & HTML elements

Types of CSS (Cascading Style Sheet)
CSS is used to style and layout web pages, controlling the appearance of HTML elements. It allows developers to create visually appealing designs and ensure a consistent look across a website.

Types of CSS
CSS can be implemented in three different ways:

1. Inline CSS
2. Internal or Embedded CSS
3. External CSS

1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This method allows for specific styling of elements within the HTML document, overriding any external or internal styles.
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s style element. It applies styles to specified HTML elements. The CSS rule set should be within the HTML file in the head section. In other words, the CSS is embedded inside the style tag within the head section of the HTML file.
3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, ... etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages

HTML Elements
HTML elements are the basic building blocks of a webpage, defining its structure and content using start tags, content, and end tags.

HTML elements start with an opening tag and end with a closing tag , and can contain text, attributes, or other nested elements.
Some elements are self-closing (e.g., break tag, image tag), and browsers use elements to render the page visually.
Properly nesting elements ensures valid, accessible, and well-structured HTML.

Case Sensitivity
HTML tags are not case-sensitive, but using lowercase is recommended for consistency and readability.

HTML tags are not case-sensitive. For example, B<> and b<> both represent bold text.
However, it’s a best practice to use lowercase tags for consistency and readability.

Block-Level Elements and Inline Elements
In HTML, elements are broadly categorized into two main types based on how they display in the document layout: block-level elements and inline elements.

1. Block-Level Elements
Block-level elements start on a new line, occupy the full available width, stack vertically, and can contain both block-level and inline elements.

Examples

div tag: A general-purpose container for other elements.
p tag: Defines a paragraph.
h1, h2, h3, h4, h5, h6: Heading elements of different levels.
ol, ul: Ordered and unordered lists.
table: Defines a table.
form: Used for HTML forms to collect user inputs.
section, article, nav, aside, header, footer: Semantic elements that define areas of a webpage.

2. Inline Elements
Inline elements do not start on a new line, take only the width of their content, and are used within block-level elements to add or style content.

span tag: A general-purpose inline container for phrasing content.
a tag: Creates hyperlinks.
img tag: Embeds an image.
strong tag, b tag: Used for strong emphasis and bold text, respectively.
em tag, i tag: Used for emphasis and italic text, respectively.
br tag: Inserts a line break within text.
input tag: Creates interactive controls for forms.

Tags vs Elements vs Attributes in HTML
In HTML, tags represent the structural components of a document, such as h1 tag for headings. Elements are formed by tags and encompass both the opening and closing tags along with the content. Attributes provide additional information or properties to elements, enhancing their functionality or appearance.

HTML Tags:
HTML tags are the starting and ending parts of an HTML element. They begin with the less-than symbol and end with the greater-than symbol. Whatever is written inside these symbols are called tags.

HTML Elements:
An HTML element consists of both the opening and closing tags along with the content inside those tags. It usually forms the structure used to define the purpose of the tag.

Example: In this example, b is the starting tag and /b is the ending tag, with content placed inside it.

HTML Attributes:
HTML attributes are used to define the characteristics of an HTML element. They are always placed in the opening tag of an element and usually provide additional information or styling to the element.

Example: In this example, p is the starting tag and /p is the ending tag with extra CSS attributes included.

References:
https://www.geeksforgeeks.org/css/types-of-css-cascading-style-sheet/
https://www.geeksforgeeks.org/html/html-elements/
https://www.geeksforgeeks.org/html/tags-vs-elements-vs-attributes-in-html/