Understanding HTML Attributes and Inline Styles

HTML attributes provide additional information about an HTML element. They are used to modify the behavior and appearance of elements. Inline styles allow you to apply CSS styles directly to elements.

HTML Attributes

Attributes are used to provide additional details about an HTML element. They are included in the opening tag of an element:

<img src="logo.png" alt="Website Logo" width="100" height="100" />
<a href="https://www.example.com" target="_blank" title="Visit Example">Example Website</a>

- **`src`**: Specifies the source of an image.

- **`alt`**: Provides alternative text for an image.

- **`href`**: Defines the URL of a link.

- **`target="_blank"`**: Opens the link in a new tab.

- **`title`**: Adds a tooltip to the element.

Inline Styles

Inline styles allow you to apply CSS styles directly to HTML elements using the `style` attribute:

<p style="color: red; font-size: 20px;">This text is red and 20px in size.</p>
<div style="background-color: lightblue; padding: 10px;">
    This div has a light blue background and 10px padding.
</div>

- **`color`**: Sets the text color.

- **`font-size`**: Specifies the size of the text.

- **`background-color`**: Defines the background color of an element.

- **`padding`**: Adds space inside the element’s border.

Using Attributes and Inline Styles Together

HTML attributes and inline styles can be used together to enhance the appearance and functionality of elements:

<button style="background-color: green; color: white;" onclick="alert('Button clicked!')">Click Me</button>

This button uses inline styles to set its background color and text color, and the onclick attribute to trigger a JavaScript alert when clicked.

Practice Exercise

Create a webpage that includes various HTML elements with different attributes and inline styles. Experiment with styling text, images, and links using inline CSS, and use attributes to enhance the functionality of your elements.