Changing Background Color using External CSS

Here , we are using External CSS. In which we define style rules in a separate CSS file and linking it to an HTML document using the <link> tag. This file contains all the styling information, including background color settings.

Changing Background Color External CSS Syntax:

body{
    background-color: greenyellow;
};

Changing Background Color using External CSS Example:

In this example we are using External CSS to creating a separate CSS file with styling rules and linking it to an HTML document using the `<link>` tag. This file contains the background color to target our html element.

HTML
<html lang="en">

    <head>
        <title>inline style attribute</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Welcome to w3wiki</h1>
        <h2>We are using the External CSS</h2>
    </body>

    </html>
CSS
body{
    background-color: greenyellow;
    }

Output:

Changing Background Color using External CSS Example Explanation:

  • Here we have a document structure with <html>, <head>, <title>, <link>, and <body> tags.
  • External CSS Link Connects the HTML file to an external stylesheet named ā€œstyle.cssā€ for additional styling.
  • By using this external stye sheet we target our body elemnt background color.


How to change Background Color in HTML ?

The background color in HTML refers to the color displayed behind the content of the webpage.to change it, CSS is used, with various approaches available to change the background color. in which we define the background color property within a CSS rule, specifying a color value such as a name, hexadecimal code, RGB, or HSL value. Apply this rule to the desired HTML element.

There are three methods to change the background color of a document:

Table of Content

  • Changing Background Color using bgcolor attribute
  • Changing Background Color using an Inline CSS
  • Changing Background Color using Internal CSS
  • Changing Background Color using External CSS

Similar Reads

Changing Background Color using bgcolor attribute

HTML allows you to alter the background color of an element using theĀ bgcolorĀ attribute. However, itā€™s crucial to note that theĀ bgcolorĀ attribute is considered deprecated in HTML5, and itā€™s recommended to use CSS for styling purposes instead....

Changing Background Color using Inline CSS

In HTML., you can change the background color of an element using inline styling. This approach involves directly adding theĀ styleĀ attribute to the HTML element and specifying the desired background colour using the ā€˜background-colourā€™ property...

Changing Background Color using Internal CSS

Here, we are using Internal CSS, in which we used within the