How to use Relative URL in CSS file and What Location is it Relative to ?

Last Updated : 19 May, 2023

CSS stands for Cascading Style Sheets. It is a style sheet language used for giving a visual appearance to the document in HTML or XML. It is used to define styles such as colors, fonts, layouts, and positioning. It can be applied to specific elements or groups of elements on the webpage. In this article, we will see what location will be relative to, while using the relative URL in CSS.

A Relative URL in CSS is a way of specifying a file path that is relative to the location of the CSS file itself. Relative URLs are often used in CSS to refer to external resources such as images, fonts, or other CSS files that are needed to style an HTML document. By using relative URLs, we can simplify the file paths and make them more flexible and portable, as they will work regardless of the website’s domain or root folder structure.

Syntax:

background-image: url(images/background.jpg);

When using relative URLs in a CSS file, the location is relative to the location of the CSS file itself.

There are 2 types of Relative URLs:

Relative URL with respect to the CSS file location.
Relative URL with respect to the HTML file location.

Relative URL with respect to the CSS file location: In the case, when the same CSS file is being used by other HTML files in other directories. In that case, it is essential to use the correct file path to link the CSS file with HTML. Let’s say, you have a CSS file named ‘styles.css’, and it is located in a directory named ‘css’ within your website’s root directory. You have two HTML files in different directories, ‘index.html’ in the root directory and ‘about.html’ in a sub-directory named ‘pages’. You want to use the same ‘styles.css’ file for both HTML files.

Folder Structure: It will look like the following:

Folder Structure

Example 1: In this example, the URL is a relative URL with respect to the CSS file location. Here, we have 2 HTML files, i.e. index.html & about.html, which used the same CSS file, i.e. style.css

HTML code 1: To link the ‘styles.css’ file with ‘index.html’, use the following code in the head section of the HTML file. The ‘href‘ attribute specifies the file path of the ‘styles.css’ file relative to the location of the ‘index.html’ file. Since the ‘styles.css’ file is located in the ‘css’ directory, which is at the same level as the ‘index.html’ file, we only need to specify the directory name and the file name in the ‘href‘ attribute.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
        href="css/styles.css"> 
</head> 
  
<body> 
    <h1 id="heading"> 
        Welcome to GeeksforGeeks 
    </h1> 
    <p class="paragraph"> 
        This is an example of external CSS. 
    </p> 
</body> 
  
</html>

CSS code 1: The following code is used in the above file. This file name is the ‘styles.css’ file.

CSS

body { 
    background-color: #f2f2f2; 
    font-family: Arial, sans-serif; 
} 
  
#heading { 
    color: green; 
    font-size: 2.5em; 
} 
  
.paragraph { 
    color: #333; 
    font-size: 1.2em; 
    line-height: 1.5em; 
}

Output:

HTML code 2: To link the same ‘styles.css’ file with ‘about.html’, which is a sub-directory, we need to specify the file path like this:

HTML

<!DOCTYPE html> 
<html> 
   
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="../css/styles.css"> 
</head> 
   
<body> 
    <h1>Welcome to GeeksforGeeks</h1> 
    <p>This is an example of external CSS</p> 
</body> 
   
</html>

CSS code 2: The following code to the ‘styles.css’ file.

CSS

body { 
      background-color: gray; 
} 
  
h1 { 
      color: green; 
}

Output:

Relative URL with respect to the HTML file location: Suppose you have an HTML file called ‘index.html’ located in a directory called ‘website’. Within that HTML file, you want to include a link to an image file called ‘logo.png’ that is located in a directory called ‘images’, which is also within the ‘website’ directory.

Folder Structure: It will look like the following.

Folder Structure

Example 2: In this example, the URL is a relative URL with respect to the HTML file location.

HTML code: To link to this image using a relative URL, you would use the following code. By using the correct file path in the ‘href’ attribute of the ‘link’ element, we can link the same CSS file with multiple HTML files located in different directories.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>GeeksforGeeks tutorial</title> 
</head> 
  
<body> 
    <img style="height: 200px; 
                width: 400px;"  
          src="images/logo.png"> 
</body> 
  
</html>