HTML&CSS · December 20, 2023

Css Basic: fill

CSS Basics: Fill

CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows web developers to control the appearance of HTML elements on a website. One of the essential CSS properties is the "fill" property, which is used to specify the color or image used to fill the content of an element.

Understanding the Fill Property

The "fill" property is primarily used with SVG (Scalable Vector Graphics) elements, but it can also be applied to other HTML elements. It determines the color or image that fills the content area of an element, such as a shape or a container.

When using the "fill" property, you can specify the color using various formats, including named colors (e.g., red, blue), hexadecimal values (e.g., #FF0000, #0000FF), RGB values (e.g., rgb(255, 0, 0), rgb(0, 0, 255)), or HSL values (e.g., hsl(0, 100%, 50%), hsl(240, 100%, 50%)).

Here's an example of how to use the "fill" property to specify a red color:


.shape {
  fill: red;
}

In addition to solid colors, the "fill" property can also accept image values. This allows you to use an image as the fill pattern for an element. You can specify the image URL using the "url()" function.

Here's an example of how to use the "fill" property with an image:


.shape {
  fill: url("image.jpg");
}

Applying the Fill Property

The "fill" property can be applied to various HTML elements, including SVG shapes, <div> containers, and even text.

For SVG shapes, such as rectangles, circles, or polygons, the "fill" property determines the color or image used to fill the shape's interior.

Here's an example of how to apply the "fill" property to an SVG rectangle:


<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" class="shape"></rect>
</svg>


.shape {
  fill: blue;
}

For <div> containers, the "fill" property can be used to set the background color or image.

Here's an example of how to apply the "fill" property to a <div> container:


<div class="container">This is a container</div>


.container {
  fill: yellow;
}

Even text can have its fill color modified using the "fill" property. However, this only applies to SVG text elements.

Here's an example of how to apply the "fill" property to an SVG text element:


<svg width="200" height="100">
  <text x="0" y="50" class="shape">This is some text</text>
</svg>


.shape {
  fill: green;
}

Conclusion

The "fill" property is a powerful CSS property that allows you to control the color or image used to fill the content of an element. Whether you're working with SVG shapes, <div> containers, or SVG text elements, the "fill" property provides you with the flexibility to customize the appearance of your web page.

For more information on CSS and web hosting services, consider checking out Server.HK. They offer reliable VPS hosting solutions with top-notch performance and support.

You may also like...