CSS Order
Example
Let’s start with this article’s first illustration to demonstrate the usage of the “order” property of CSS styling within the HTML. You need an “html” type file to add and run HTML code. So, we have created a new file, “test.html”, within our “Articles” folder and opened it with the Visual Studio code. The HTML code must be started with the “<!DOCTYPE html” basic tag followed by the opening tag of “html” that will be closed at the end of this HTML file. The HTML file contains the basic “head” and “body” tags to define the webpage’s main head and page body contents.
We will start explaining this example from the basic “head” tag. Within this tag, we have been using the different CSS properties for particular HTML elements defined in this HTML file via the “style” tag. First, we have been styling the main “div” tag used in the “body” of our HTML page via its specified ID, i.e., “main”. The “div” tags are always used to divide the page into sections or pieces to separate some of the elements and contents of an HTML page from others. We have been using the property width and height to define the width and length of this “div” element in the HTML page in pixels, i.e., 400px width and 70px height.
This “dib” area would contain the solid border of a five-pixel black border around it. This border would define the boundary of the main “div” area. Then, we used the main div tag’s main ID to apply the CSS on the child “div” tags. We have set the width to 100 pixels and height to 70 pixels for all the five inner “div” element tags, which would lie within this HTML tag’s main “div” section. These heights and widths for inner and outer div elements are specified to fit equally the five div tags within the outer tag. After that, we used the five div tag IDs separately on five lines to style all of the five “div” sections accordingly and differently. Here comes the “order” property of CSS styling to order the five div tags according to numbers. The brown “div” will be displayed on the 3rd, blue on the 5th, green on the 2nd, purple on the 1st, and orange on the 4th. The style and head tag became closed here.
Let’s start explaining the basic “body” tag used to define and represent the basic elements on the webpage of our browser. Within this tag, we have used the main heading tag of size one, the main “div” tag, and the five children “div” tags listed one after another. The main “div” tag has been specified with the ID, “main”, to style it within the head tag and can be differentiated easily. The inner five “div” tags have been specified with some styling and their separate IDs, i.e., brown, blue, green, purple, and orange.
These IDs would be used to style these “div” tags separately in the style tag. We have been styling all five tags by using the “style” element within the opening of all five div tags using the CSS inline styling method. The background-color property has been used to specify the colors for all five div tags separately, i.e., brown, blue, green, purple, and orange. These five colors would be filled in the boxes created by the “div” elements on the webpage and looked great on the screen. The main “div” tag and the main “body” tag have been closed here. Additionally, our “html” main tag closing would be used here to end the HTML code and make it run smoothly.
First, let’s save this code with Ctrl+S. Then, tap the “Run” menu from the taskbar of your Visual Studio code tool. Tap on the shown “Run without debugging” option and select the browser to continue. We will be using the Google Chrome browser to execute it.
The output tab of the Chrome browser displays the following image of five div parts within one main “div” of the solid black border. The sequence of the child “div” boxes is the same as we have described in the explanation of a code, i.e., purple 1st, green 2nd, brown 3rd, orange 4th, and blue 5th. Although we have defined the random sequence of “div” elements in the CSS styling, it doesn’t affect the output and is displayed as defined in the styling.
The previous code illustration and its webpage output show us the use of random numbers within the “order” property to set the “div” tags to random positions. Those values for the “order” property were simple positive integers. Hence, we have no problems using those. What if a user tries to set the order property with the negative values in the style tag? Let’s try this to see the results. So, we have been updating our code to do so. Within the style tag, we have been updating the value of the “order” property for each inner “div” tag. For brown, it’s 3. For blue, it’s -1. For green, it’s 2. For purple, it’s -2. Lastly, for orange, it’s 0. These values define the index of a main “div” element. Let’s save this code to see.
Running this updated code in the Chrome browser, we have the updated output result shown below. As we have defined 0 for the order property of the “orange” div, it has been displayed in the middle of the main div. The green and brown “div” tags are displayed on the right side after the orange “div”. The use of -2 for purple div and -1 for blue tag has displayed the inner “div” tags according to the sequence of negative integers.
Conclusion
This article contains a simple and brief explanation of using the “order” CSS property in the HTML code. For this, we have explained a brief HTML code example. This example contained the use of “div” elements to properly elaborate the concept of “order” CSS property. We have discussed the detailed analysis of using the positive integer values for the order property and compared it with the use of negative integer values for the same property.
Source: linuxhint.com