HTML CSS – Inline CSS Examples

0

1. Basic Inline CSS for Text Color and Font Size

Here, we’ll apply inline CSS to a <p> (paragraph) element to change its text color and font size.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <p style="color: blue; font-size: 18px;">This is a blue-colored paragraph with font size 18px.</p>
</body>
</html>

Output:

The paragraph will appear in blue color, and the text size will be 18 pixels.

2. Inline CSS for Background Color and Text Alignment

We can also apply inline CSS to change the background color of a <div> and center-align the text.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <div style="background-color: lightgreen; text-align: center; padding: 20px;">
        This div has a light green background and the text is centered.
    </div>
</body>
</html>

Output:

The <div> will have a light green background with the text centered inside it. There will also be 20px padding around the content.

3. Inline CSS for Border and Margin

In this example, we apply inline CSS to a <div> to add a border around it and set a margin for spacing.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <div style="border: 3px solid red; margin: 10px;">
        This div has a red border with a margin of 10px.
    </div>
</body>
</html>

Output:

The <div> will be surrounded by a 3px solid red border, and it will have 10px of space around it (due to the margin).

4. Inline CSS for Multiple Styles

In this example, we combine multiple styles like font-family, color, padding, and text-transform using inline CSS on a <span> element.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <span style="font-family: 'Arial', sans-serif; color: purple; padding: 5px; text-transform: uppercase;">
        This is a span with multiple inline styles.
    </span>
</body>
</html>

Output:

The text inside the <span> will be purple, in uppercase letters, with the font set to Arial, and 5px padding around it.

5. Inline CSS for Image Styling

You can also use inline CSS to style images, such as adjusting their size and adding a border.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" style="width: 150px; border: 2px solid black;">
</body>
</html>

Output:

The image will have a width of 150px and a black border around it.

6. Inline CSS for Button Styling

Here’s an example of styling a button with inline CSS to set its background color, text color, and padding.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <button style="background-color: green; color: white; padding: 10px 20px; border: none;">
        Click Me!
    </button>
</body>
</html>

Output:

The button will have a green background, white text, and no border, with padding of 10px on the top and bottom, and 20px on the left and right.

7. Inline CSS for Hover Effect on a Link

You can also use inline CSS with pseudo-classes like :hover to create a hover effect. However, for this, you generally need to define the hover state using <style> tags, as inline CSS doesn’t directly support pseudo-classes like :hover. Here’s how to do it with a regular style block, but I’ll explain how you’d generally add a hover effect:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com" style="color: blue;">Hover over me!</a>
</body>
</html>

Output:

The link will appear blue by default, but when hovered over, it will turn red.

Why Use Inline CSS?

  • Quick Styling: Great for making quick adjustments or testing styles.
  • Specificity: Inline styles have higher specificity than external or internal stylesheets, meaning they will override other styles.

However, inline CSS should generally be used sparingly in production environments because it mixes content (HTML) with presentation (CSS), which can make it harder to maintain and scale. For larger projects, external or internal stylesheets are a better option to keep your code organized.