HTML and CSS for website

Today i have learned some new tags like input, button and also a semantic tag main and then some new styles hover, font-family to create a facebook login page.

Input tag

The input tag is most essential element for creating interactive forms in HTML. it is used to collect the data from the users and we can create many forms from simple text boxes to clickable buttons depending on its type attribute.

Core Attributes

• Type: Determines what kind of data the field accepts (eg: Text, Checkbox, Password).
• name: Act as the unique identifier for the data of the form.
• Value: Sets the initial content or default value of the field.
• Placeholder: Provides a short hint about the expected input.
• Required: A boolean attribute that forces the user to fill out the field before submitting.

Button

Button tag in HTML used to create a clickable buttons that can triger actions like submitting forms, resetting inputs, or running javascript functions.

• Unlike the element, the tag is more flexible because it can contain nested content like text, images, or icons.
• Basic Syntax: To create a simple button, wrap your desired label between the opening and closing tags.

Main tag

• The tag in HTML is a semantic element used to identify the primary, central content of a web page.
• It tells the browsers, search engines, and screen reader exactly where the main content of your page begins.
• Separating it from repetitive elements like menus and footer.
• Unique content: The main element should only contain information that is unique to that specific page.

Hover

• The :hover pseudo-class in CSS is used to select and style an element when a user moves their mouse pointer over it.
• It is a fundamental tool for adding interactivity, such as changing button colors, underlining links, or revealing hidden contents.
• Basic Syntax: To use hover, append :hover to the selector you want to style.

Font-family

• In CSS, the font-family property is used to define the font of the text for an element.
• It allows you to prioritized list of fonts, commonly referred to as a font stack.
• prioritized list: browsers read the list from left to right. it will use the first font if it's installed or available. if not, it tries the next one.
• Fallback System: you should always end your list with a generic family name to ensure the browser has a final, guaranteed option if no specific fonts are found.