Home >Web Front-end >CSS Tutorial >How to display linked file format using CSS?
How to display linked file format using CSS?
- WBOYforward
- 2023-09-05 21:13:05914browse
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 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 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> Tutorialspoint </h1>
<h3> 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!