How to display linked file format using CSS?
When browsing the web, you will come across various documents that you can download. Sometimes, you need to download documents in different file formats. However, you may have problems finding documentation in the file format you need because there are various links, each containing a different file format. Can be .docx, .png, .txt, .pdf, etc.; typically the file format is not specified along with the link. Therefore, we cannot know the type of file format just by looking at the link. In order to solve this problem, you need to display the file format of the download link.
In this article, you will learn how to display linked file formats on a web page using CSS.
What is the file format?
File format is a structured way of telling a computer program how to display the contents of a document. It specifies the layout of the file, that is, the organization of the data in the file. Some programs that do not support a specific file format may generate garbage if opened in that format. If you open a program with the same file format, all features of that program are displayed.
Common file formats are as follows -
Text - .doc, .docs, .txt, etc.,
Images - .jpg, .gif, .png, etc.,
Audio - .mp3, .mp4, etc.,
Program - .html, .htm, .exe
The above problem can be solved by using CSS to display the file format of the download link in the web page. It can be achieved by passing a link to the file type in the page and then adding the image icon using the Font Awesome Free style. It will be specified using the ::after CSS selector. You also need to specify the content properties of the files within it. It inserts an icon on all links with that specific file format.
Example
Let us understand it through 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 id="Tutorialspoint">Tutorialspoint</h1>
<hr>
<h3 id="Different-file-formats-available-for-download">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 to linked documents in three different file formats are provided on the web page.
Font Awesome Free 5 is used in the font family to add an icon for the file format type next to the download link. It works with inline elements in CSS. Font Awesome is a library that contains thousands of lists of icons designated for use in various things.
Each icon has a unique Unicode value. Here are some examples of icons and their codes.
| Centered alignment | F037 |
| File-pdf | F1c1 |
| Document-Invoice | F570 |
| File-Word | F1c2 |
| File-excel | F1c3 |
| File-Image | F1c5 |
| File-powerpoint | F1c4 |
| File-Video | F1c8 |
[href$=".pdf"] is a CSS property selector. There are 3 attribute selectors in CSS. they are -
Start with selector
It uses the (^) character to match elements with attribute values that begin with the value specified in the selector. Example - If you want to select all links starting with "https" then write,
[href^= "http"]{
Styling properties;
}
End with selector
It uses the ($) character to match elements with attribute values ending with the value specified in the selector. Example - If you want to select all links ending with ".exe" then
[href^= "http"]{
Styling properties;
}
Contains selectors
It uses the (*) character to match elements with attribute values that contain the specified value at least once.
Example - Suppose you want to select all files in a folder named "demo".
<a href= "file/demo/important.pdf"> </a>
Then our CSS code will look like this,
a [href*= "demo"]{
styling properties;
}
::after CSS selector is used to insert content after the content of an element. The content property specifies content to be written after or before the 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 words "Important!" are added after the first paragraph.
Thetag is used to connect the original document and the external document. It enables developers to link documents with external documents. It contains various properties. They are as follows -
rel - It discusses the relationship between the original document and the externally linked document. It has stylesheet, preload, icon, help, alternative, author, previous, search, etc. values,
type - This discusses the media type of the linked document. It has values like text/css.
Note - If the type attribute is not specified, the browser checks the rel attribute to guess the correct type.
media - This discusses the type of device on which you want to display the linked document. It has values like all, print, screen, tv,
href - It specifies the path to the linked document. Its value contains the URL.
sizes - It discusses the sizes of linked documents.
Example
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet"
type= "text/css"
href= "style.css">
</head>
<body>
<h1 id="Tutorialspoint"> Tutorialspoint </h1>
<h3 id="This-is-an-example"> This is an example </h3>
</body>
</html>
in conclusion
In this article, we learned about displaying file extensions on web pages with the help of CSS’s ::after selector.
The above is the detailed content of How to display linked file format using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1670
14
1428
52
1329
25
1274
29
1256
24
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM
Apr 17, 2025 am 10:55 AM
In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves
Some Hands-On with the HTML Dialog Element
Apr 16, 2025 am 11:33 AM
This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Paperform
Apr 16, 2025 am 11:24 AM
Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but
Where should 'Subscribe to Podcast' link to?
Apr 16, 2025 pm 12:04 PM
For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator
Apr 17, 2025 am 11:26 AM
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
Options for Hosting Your Own Non-JavaScript-Based Analytics
Apr 15, 2025 am 11:09 AM
There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used
