INLINE CSS
Inline CSS refers to the practice of adding CSS styles directly to individual HTML elements using the `style` attribute. This approach allows you to apply specific styles to a particular element without modifying external CSS files. Here's an example of inline CSS and its output:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">Hello, World!</h1>
<p style="background-color: yellow; padding: 10px;">This is an example of inline CSS.</p>
</body>
</html>
In the above example, we have two elements: an `<h1>` heading and a `<p>` paragraph. Both elements have inline CSS styles applied to them using the `style` attribute.
For the `<h1>` element, we set the color to red (`color: red`) and the font size to 24 pixels (`font-size: 24px`).
For the `<p>` element, we set the background color to yellow (`background-color: yellow`) and the padding to 10 pixels (`padding: 10px`).
When you open this HTML file in a web browser, you will see the following output:
[Inline CSS Example Output]
1. CHANGING FONT STYLE
<p style="font-family: Arial, sans-serif; font-weight: bold; font-style: italic;">This is a paragraph with custom font styles.</p>
2. Adjusting Margins and Padding
<div style="margin: 10px; padding: 20px; background-color: lightblue;">
This is a div with custom margins, padding, and background color.
</div>
3.CHANGING TEXT COLOR
<span style="color: #ff0000;">This text is in red color.</span>
4.ADDING BORDER
<img src="image.jpg" alt="Image" style="border: 2px solid black;">
5. STYLE LINKING
<a href="#" style="color: blue; text-decoration: underline;">Click here</a> to visit the website.
0 Comments