CSS <url> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

In CSS, the <url> type represents a reference to a Uniform Resource Locator (URL) or a web address. It is used to specify the location of external resources, such as images, fonts, or other files, that a web page or stylesheet needs to display or apply styles correctly.

The <url> type is often used within CSS properties like background-image, font-face, or @import to link to these external resources. When defining a <url>, you typically enclose it in either single or double quotation marks, like so:

background-image: url('image.jpg');
font-family: 'CustomFont', Arial, sans-serif;
@import url('styles.css');

In these examples, <url> points to the respective image file, font file, or external stylesheet by specifying their locations on the web, allowing web designers and developers to enhance the visual and functional aspects of their web pages through the inclusion of external resources.

Syntax

<url> = url( <string> <url-modifier>* )

Values

<string>Represents a reference to a file or file fragment.

Example

HTML

<div></div>

CSS

div {
   width: 300px;
   height: 226px;
   background-image: url('images/sunset.jpg');
   margin: 10px;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS url data type.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	14	1	1	1

Last updated by CSSPortal on: 7th October 2023

Support Us