Learn CSS: Background, Color, Fill (Differences, Functions, and How to Apply)

  • Whatsapp
Learn CSS: Background, Color, Fill (Differences, Functions, and How to Apply)
Learn CSS: Background, Color, Fill (Differences, Functions, and How to Apply)

Learn CSS: Background, Color, Fill (Differences, Functions, and How to Apply) – Welcome blogger friends, when you want to change the color of the blog template, you will often find background, color, and fill CSS codes.

Surely some of the bloggers ask like this:

  1. Are the three codes different?
  2. What is the function of each of these codes?
  3. What is the correct way to apply?

Well, we will discuss everything in full in this post, let’s get started.

CSS Background

As the name suggests it can be interpreted as a background. Usually the Background code is used to change the background color of an object.

For example if you want to change the color of the Header, then you use the code below.

#headers {
background : #ffffff
}

The code above serves to change the header background color to white, you can replace the #ffffff code with your favorite color.

CSS Color

The application of color itself is more identical to the text. Such as blog titles, snippets, breadcrumbs, h1, h2, h3, and others.

For example you want to change the color of the breadcrumbs text.

.breadcrumbs a{
color : #ffffff
}

or even you want to change the color of the text on the breadcrumbs when the cursor is over the breadcrumbs use the CSS below.

.breadcrumbs a :hover {
color : #000000
}

The addition of hover code serves to notify that the cursor is above the object.

CSS Fill

serves to change the color of an object on the blog such as the color of the SVG icon.

For example you want to change the color of the svg icon in your search box. Use the code below.

.search-box : svg path{
fill : #000000
}

Difference between Background, Color and Fill

from the explanation above we can find the difference where Background functions to change the color of the background, and Color functions to change the color like text, while fill functions to change the color of an icon such as SVG.

Addition

To enter a color code you can use CMYK colors (colors that have 6 digits such as #000000) or RGB colors (colors that have 3 digits such as #000).

Oh yes, there is another way of coloring the blog, you can also use color codes in English such as:

  • red (for red)
  • green (for green)
  • blue (for blue)
  • yellow (for yellow)
  • purple (for purple)
  • and much more.

For those of you who don’t want to bother choosing a color code, you can use the toll I made in the COLOR PICKER.

Related posts