How to display the file format of links using CSS?

While browsing through a web page, you come across various documents which can be downloaded. Sometimes, you need to download a document but in different file format. However, you may have a problem in finding the document of your desired file format because there are various links each containing different file formats. It can be .docx, .png, .txt, .pdf etc.; Generally, file formats are not specified along with the links. So, we cannot know the type of file format just by looking the links. To solve the problem, you need to display the file format of the downloading links.

In this article, you will learn how to display the file format of links on a web page using CSS.

What is a file format?

The file format is the structured way to tell the computer program about how the contents of a document is displayed. It specifies the layout of the file that is, organisation of data in the file. Certain programs which do not support a particular file format, if opened in that format, then it may give garbage. If you open a program in same file format, then all the features of that program are displayed.

Commonly known file formats are as follows −

  • Text- .doc, .docs, .txt etc.,

  • Image- .jpg, .gif, .png etc.,

  • Audio- .mp3, .mp4 etc.,

  • Program- .html, .htm, .exe

The above problem can be solved by displaying the file formats of the download links in the web page using CSS. It can be achieved by delivering the file type of links in the page and then adding an image icon with the use of Font Awesome Free style. It will be specified using the ::after CSS selector. You also need to specify the content property of the file in it. It inserts icons on all the links which have that particular file format.

Example

Let’s understand it with the help of an example.

<!DOCTYPE html>
   <html>
      <head>
         <style>
            a {
               font-family: "Font Awesome 5 Free";
               text-decoration: underlined;
               font-size: 20px;
               color: black;
               border: 2px solid;
               padding: 2px 1px 4px 2px;
            }
            [href$=".txt"]::after {
               content: '\f1c3';
               color: blue;
            }
            [href$=".docx"]::after {
               content: '\f1c2';
               color: green;
            }
            [href$=".pdf"]::after {
               content: '\f1c1';
               color: red;
            }
         </style>
         <title>How to Display file format of links using CSS?</title>
         <link rel="stylesheet" type="text/css"href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
      </head>
      <body style="text-align: center;">
         <h1 style="color: orange;">Tutorialspoint</h1>
         <hr>
         <h3>Different file formats available for download </h3>
         <a href="tutorialspoint.txt">Text File</a>
         <br> <br>
         <a href="tutorialspoint.docx">Word File</a>
         <br> <br>
         <a href="tutorialspoint.pdf">PDF File</a>
      </body>
   </html>

Links of the linked document in three different file formats is available on the web page.

Font Awesome Free 5 is used in the font family so as to add icons of the type of file format beside the downloading links. It is used with the inline elements in CSS. Font Awesome is a library which contains list if thousands of icons designated for various things.

Each icon has a unique Unicode value. The following are few examples of icons along with their codes.

Align center F037
File- pdf F1c1
File- invoice F570
File - word F1c2
File- excel F1c3
File- image F1c5
File- powerpoint F1c4
File- video F1c8

[href$=".pdf"] is a CSS attribute selector. There are 3 atrribute selectors in CSS. They are −

  • Begins with selector

    It uses (^) character to match an element with the attribute value which starts with the value specified in the selector. Example − If you want to select all the links which starts with “https”, then write,

[href^= "http"]{
   Styling properties;
}

  • Ends with selector

    It uses ($) character to match an element with the attribute value which ends with the value specified in the selector. Example − If you want to select all the links which ends with “.exe”, then

[href^= "http"]{
   Styling properties;
}

  • Contains selector

    It uses (*) character to match the element with the attribute value which contains the value specified at least once.

    Example − suppose you want to select all files which are in a folder named “demo”.

<a href= "file/demo/important.pdf"> </a>

Then our CSS code will be like,

a [href*= "demo"]{
   styling properties;
}

::after CSS selector is used to insert something after the contents of an element. The content property specifies the content to be written after or before a selected element.

Example

<html>
   <head>
      <style>
         .para1:after{
            content: “Important!";
            color: red;
         }
      </style>
   </head>
   <body>
      <div>
         <p class= "para1"> This is the first paragraph. </p>
         <p class= "para2"> This is the second paragraph </p>
      </div>
   </body>
</html>

The word “Important!” is added after the first paragraph.

The <link> tag is used to connect the original document and an external document. It enables the developers to link the document with an external one. It contains various attributes. They are as follows −

  • rel − it talks about the relationship between the original document and the external linked document. It has values like stylesheet, preload, icon, help, alternate, author, prev, search etc.,

  • type − it talks about the type of media of the linked document. It has values like text/css.

    Note − If the type attribute is not specified then the browser checks the rel attribute to guess the correct type.

  • media − it talks about the type of device on which you want to display the linked document. It has values like all, print, screen, tv etc.,

  • href − It specifies the path of the linked document. Its values contain URLs.

  • sizes − It talks about the size of the linked document.

Example

<!DOCTYPE html>
   <html>
      <head>
         <link rel= "stylesheet"
            type= "text/css"
            href= "style.css">
      </head>
   <body>
      <h1> Tutorialspoint </h1>
      <h3> This is an example </h3>
   </body>
</html>

Conclusion

In this article, we learnt to display the file extensions on our web page with the help of ::after selector of CSS.

Updated on: 04-Apr-2023

262 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements