Inline CSS

CSS Inline

Inline CSS is a method of adding CSS styles directly to an HTML element using the style attribute. It allows you to apply CSS properties to a specific HTML element without creating a separate CSS stylesheet or writing CSS inside a <style> element.

Inline CSS is useful when you want to apply a unique style to a single HTML element.

1. Inline CSS Syntax

The basic syntax of inline CSS is:

<element style="property: value;">Content</element>

Example:

<h1 style="color: blue;">Welcome to CodingRider</h1>

In this example:

• style is the HTML attribute used to apply inline CSS.
• color is the CSS property.
• blue is the CSS value.

2. Inline CSS Example

Here is a complete HTML example using inline CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>

    <h1 style="color: blue;">
        Welcome to CodingRider
    </h1>

    <p style="color: green; font-size: 18px;">
        This paragraph uses inline CSS.
    </p>

    <button style="background-color: black; color: white; padding: 10px;">
        Learn More
    </button>

</body>
</html>

3. Inline CSS for Text Styling

You can use inline CSS to change the color, size, alignment, and font of text.

Example:

<h1 style="color: red; text-align: center;">
    CSS Inline Styling
</h1>

<p style="font-size: 20px; font-family: Arial;">
    Learn CSS with CodingRider.
</p>

Here, the heading is red and centered, while the paragraph has a font size of 20px and uses Arial.

4. Inline CSS for Background and Borders

Inline CSS can also be used to add background colors, borders, and spacing to HTML elements.

Example:

<div style="background-color: lightblue; padding: 20px; border: 2px solid blue;">
    This is a styled container.
</div>

This example creates a container with a light blue background, 20px padding, and a blue border.

5. Multiple Inline CSS Properties

You can apply multiple CSS properties to the same HTML element by separating each declaration with a semicolon.

Example:

<p style="color: red; font-size: 20px; text-align: center; background-color: yellow;">
    This paragraph has multiple inline styles.
</p>

Each property changes a different aspect of the element's appearance.

6. Advantages of Inline CSS

• Easy to use for beginners.
• Quickly applies styles to individual HTML elements.
• Does not require a separate CSS file.
• Useful for testing CSS properties.
• Can override normal stylesheet declarations due to its higher specificity.

7. Disadvantages of Inline CSS

• Makes HTML code longer and harder to read.
• Cannot easily reuse the same styles across multiple elements.
• Separates less effectively the content from the design.
• Creates difficulties when maintaining large websites.
• Does not support CSS selectors such as class and ID directly inside the style attribute.
• Does not support CSS media queries or pseudo-classes such as :hover directly in the style attribute.

8. When Should You Use Inline CSS?

Inline CSS is suitable for:

• Quick CSS experiments.
• Small HTML examples.
• Applying a unique style to a single element.
• Testing individual CSS properties.

For larger projects, internal or external CSS is generally a better choice.

Conclusion

Inline CSS is the simplest way to add styles to HTML elements. It uses the style attribute to apply CSS properties directly to individual elements. Although it is useful for quick styling, external CSS is generally preferred for professional websites.

Practice Tasks

1. Create an h1 heading and make its text color blue using inline CSS.
2. Change a paragraph's font size to 25px.
3. Create a button with a black background and white text.
4. Add a background color and padding to a div element.
5. Apply at least four CSS properties to a single HTML element.