Displaying XML Using CSS Last Updated : 09 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using CSS : CSS can be used to display the contents of the XML document in a clear and precise manner. It gives the design and style to whole XML document. Basic steps in defining a CSS style sheet for XML : For defining the style rules for the XML document, the following things should be done :- Define the style rules for the text elements such as font-size, color, font-weight, etc. Define each element either as a block, inline or list element, using the display property of CSS. Identify the titles and bold them. Linking XML with CSS : In order to display the XML file using CSS, link XML file with CSS. Below is the syntax for linking the XML file with CSS: <?xml-stylesheet type="text/css" href="name_of_css_file.css"?> Example 1. In this example, the XML file is created that contains the information about five books and displaying the XML file using CSS. XML file : Creating Books.xml as :- xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="Rule.css"?> <books> <heading>Welcome To GeeksforGeeks </heading> <book> <title>Title -: Web Programming</title> <author>Author -: Chrisbates</author> <publisher>Publisher -: Wiley</publisher> <edition>Edition -: 3</edition> <price> Price -: 300</price> </book> <book> <title>Title -: Internet world-wide-web</title> <author>Author -: Ditel</author> <publisher>Publisher -: Pearson</publisher> <edition>Edition -: 3</edition> <price>Price -: 400</price> </book> <book> <title>Title -: Computer Networks</title> <author>Author -: Foruouzan</author> <publisher>Publisher -: Mc Graw Hill</publisher> <edition>Edition -: 5</edition> <price>Price -: 700</price> </book> <book> <title>Title -: DBMS Concepts</title> <author>Author -: Navath</author> <publisher>Publisher -: Oxford</publisher> <edition>Edition -: 5</edition> <price>Price -: 600</price> </book> <book> <title>Title -: Linux Programming</title> <author>Author -: Subhitab Das</author> <publisher>Publisher -: Oxford</publisher> <edition>Edition -: 8</edition> <price>Price -: 300</price> </book> </books> In the above example, Books.xml is linked with Rule.css which contains the corresponding style sheet rules. CSS FILE : Creating Rule.css as:- css books { color: white; background-color : gray; width: 100%; } heading { color: green; font-size : 40px; background-color : powderblue; } heading, title, author, publisher, edition, price { display : block; } title { font-size : 25px; font-weight : bold; } Output : Example 2. In this example, the XML file is created that contains the information about various sections in Geeks for Geeks and the topics they contains and after that displaying the XML file using CSS . XML file : Creating Section.xml as :- xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="Geeks.css"?> <Geeks_for_Geeks> <title>Hello Everyone! Welcome to GeeksforGeeks</title> <geeks_section> <name>Algo</name> <topic1>Greedy Algo</topic1> <topic2>Randomised Algo</topic2> <topic3>Searching Algo</topic3> <topic4>Sorting Algo</topic4> </geeks_section> <geeks_section> <name>Data Structures</name> <topic1>Array</topic1> <topic2>Stack</topic2> <topic3>Queue</topic3> <topic4>Linked List</topic4> </geeks_section> <geeks_section> <name>Web Technology</name> <topic1>HTML</topic1> <topic2>CSS</topic2> <topic3>Java Script</topic3> <topic4>Php</topic4> </geeks_section> <geeks_section> <name>Languages</name> <topic1>C/C++</topic1> <topic2>Java</topic2> <topic3>Python</topic3> <topic4>Ruby</topic4> </geeks_section> <geeks_section> <name>DBMS</name> <topic1>Basics</topic1> <topic2>ER Diagram</topic2> <topic3>Normalization</topic3> <topic4>Transaction Concepts</topic4> </geeks_section> </Geeks_for_Geeks> In the above example, Section.xml is linked with Geeks.css which contains the corresponding style sheet rules. CSS FILE : Creating Geeks.css as:- css Geeks_for_Geeks { font-size:80%; margin:0.5em; font-family: Verdana; display:block; } geeks_section { display:block; border: 1px solid silver; margin:0.5em; padding:0.5em; background-color:whitesmoke; } title { display:block; font-weight:bolder; text-align:center; font-size:30px; background-color: green; color: white; } name, topic1, topic2, topic3, topic4 { display:block; text-align:center; } name { color:green; text-decoration: underline ; font-weight:bolder; font-size:20px; } topic1 { color:green } topic2 { color:brown } topic3 { color:blue } topic4 { color:orange } Output : Advantages of displaying XML using CSS: CSS is used in XML or HTML to decorate the pages. CSS is used for interactive interface, so it is understandable by user. CSS enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. So page loader is faster. Disadvantages of displaying XML using CSS : Using CSS, no transformation can be applied to the XML documents. CSS uses different dimensions with different browsers. So the programmer has to run the code in different browser and test its compatibility to post it live. CSS have different level of versions, so it is confusing for the browser and user. CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples. Comment More infoAdvertise with us Next Article How to Disable Resizable Property of Textarea using CSS? A aniketsingh1 Follow Improve Article Tags : Misc Web Technologies CSS Web technologies-HTML and XML CSS-Misc +1 More Practice Tags : Misc Similar Reads How to use a not:first-child Selector in CSS? The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout.Syntax:not( element ) { // CSS property } Example: In this 2 min read How to Auto-Resize an Image to Fit a Div Container? To resize an image or video to fit inside a div container, use the object-fit property for precise control over how the content fits.object-fit maintains the aspect ratio or stretches the content to fill the container.Common values include cover (fills the container, may crop) and contain (fits with 3 min read How to Disable Resizable Property of Textarea using CSS? The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none.Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user.Disable Resizing of TextareaThe resize property in CSS controls an el 1 min read Create an Unordered List Without Bullets using CSS To create an unordered list without bullet points, the CSS list-style-type property is used. This removes the default bullet points from the list items, and making the list appear plain.Table of ContentUsing list-style-type property Remove margin and padding after removing bullet pointsUnordered Lis 1 min read Set cellpadding and cellspacing in CSS Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: html <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> table, th 1 min read How to overlay one div over another div using CSS Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple 2 min read How to disable a link using only CSS? To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app 3 min read What does the â+â (plus sign) CSS selector mean? The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO 1 min read How to Vertically Center Text with CSS? Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen 2 min read How to horizontally center a div using CSS ? To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the 2 min read Like