Welcome to My Webpage

Home:Overview of HTML elements and CSS styles

HTML elements are building blocks of webpage. Here, we will explore 15 common HTML elements and their usage

1. Heading Tags '< h1 > to < h6 >'

Headings in HTML are used to define titles and subtitles on a webpage. They range from < h1 > to < h6 >, with < h1 > being the largest and most important, while < h6 > is the smallest.

2. Bold Text '<b>'

The <b> tag makes text bold.

3. Image Tag '<img>'

The <img> tag is used to embed an image. The src attribute specifies the image source (URL or file path). The alt attribute provides alternative text for the image if it cannot be displayed, useful for accessibility.

4. Anchor Tag '<a>'

The <a> tag creates a hyperlink to another webpage or resource. The href attribute specifies the URL.

5. Subscript '<sub>'

<sub> is used to write text as a subscript (e.g., chemical formulas like H₂O).

6. Supscript'<sup>

<sup> is for superscript (e.g., mathematical exponents like x²)

7. Division '<div>'

The <div> tag is a block-level element used to group content together. It is commonly used to structure a webpage.

8. <table>

The <table> element is used to create tables. It includes tags like <tr> for rows and <td> for cells.

9. <button>

The <button> element defines a clickable button element defines a clickable button.

10. Unordered List <ul>

The <ul> is used to create an unordered list, where list items are typically marked with bullets (●).This is ideal for lists where the order of items does not matter

11. Ordered List <ul>

The <Ol> is used to create an ordered (numbered) list, Each list item is numbered, making it perfect for steps, rankings, or any list where the order matters.

12. List item<li>

The <li> tag defines a list item. It must be nested inside either an <ul> (unordered list) or an <ol> (ordered list). Each <li> represents one item in the list

13. <Style>

The <style> tag is used to define internal CSS within an HTML document. This tag allows you to style i.e color, size, font, etc. HTML elements directly in the document

14.Padding

Padding is the space inside an element, between its content and its border. Padding adds "breathing room" around the content inside an element, making it appear less crowded.
Syntax
padding: 20px; Adds 20px padding on all four sides
padding: 10px 20px; Adds 10px padding on top and bottom, 20px on left and right
padding-top: 15px; Adds 15px padding only at the top

15.Margin

Margin is the space outside an element, between its border and surrounding elements. Margin creates separation between elements, helping to avoid overlaps and improving readability.
Syntax
margin: 20px; Adds 20px margin on all four sides
margin: 10px 20px; Adds 10px margin on top and bottom, 20px on left and right
margin-top: 15px; Adds 15px margin only at the top

16.Border

The border property sets the border around an element, which can be styled by color, width, and type. Borders are commonly used to visually define the boundaries of an element.
Syntax
border: 2px solid #333; Sets a 2px solid border in color #333 border-top: 1px dashed red; Sets a dashed red border only on the top side

17.background-color

The background-color property specifies the background color of an element. It helps in adding color to elements, making them visually distinct.
Syntax
background-color:blue; Sets background color to a light blue

18.Text-align

This property aligns text horizontally within an element. Commonly used to center, right-align, or justify text in headings, paragraphs, and containers.
Syntax
text-align: center; Centers text horizontally text-align: right; Aligns text to the right

19.Font-Size

The font-size property defines the size of the text. It controls text readability, with relative units (em, %, px) adjusting based on screen size.
Syntax
font-size: 16px; Sets font size to 16px

20.Display

he display property specifies the layout behavior of an element (block, inline, flex, etc.). It controls how an element is visually displayed on a webpage. Common Values: block: Makes an element a block-level element, taking up the full width. inline: Makes an element inline, flowing alongside other elements. inline-block: Allows block-level styling but sits inline with text. flex: Enables flexible layout for easy alignment and spacing.
Syntax
padding: 20px; Adds 20px padding on all four sides
padding: 10px 20px; Adds 10px padding on top and bottom, 20px on left and right
padding-top: 15px; Adds 15px padding only at the top