Today i have learned some new tags like input, button and also a semantic tag main and then some new styles hover, gap, 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.
<button type="button">Click Me!</button>
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.
One per page: you must have only one visible main element in a single HTML document.
It must be a direct child of the body.
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.
selector:hover {
property: value;
}
Gap
The gap property in CSS is a shorthand used to create consistent spacing between items in a container, without having to apply margin to individual child.
It applies to flexbox, grid, and multi column layouts.
Gap contains two specific properties into one: row-gap Sets the vertical space between rows, column-gap Sets the horizontal space between columns.
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.
Top comments (0)