how to css sort

Posted under CSS3 Course On By mohammed.mutawe

css sort

CSS is distinguished by some special tools that it has to control the way HTML works. One of these tools is the Sort tool that allows us to rearrange the appearance of tags and give priority in their sequence.

 

Definition

The principle of ordering in CSS is based on the idea of ​​giving priority to the display within the special container that contains all the HTML tags like so:

.container{
    //Formats
}

.container .one{
    //formats
}

.container .two{
    //formats
}

Where a special container is created and many tags are placed inside it and then we start giving priority to the tags as we want.

 

Example

Please, to understand CSS order well, copy the following codes and run it in your browser.

CSS

.container{
    width:200px;
    height:500px;
    margin:50px auto;
    background-color:#B6DCEC;
    display:flex;
    flex-wrap:wrap;

}

.container div{
    color:#FFFFFF;
    width:200px;
    height:100px;
    padding:10px;

}

.container .one{
    background-color:#DD3135;
    order: 3
}

.container .two{
    background-color:#83C6E7;
    order:1
}

.container .three{
    background-color:#FFDE59;
    order:2
}

.container .four{
    background-color:#B6DCEC;
    order:4
}



 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS ordering</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div class="one">Div 1</div>
            <div class="two">Div 2</div>
            <div class="three">Div 3</div>
            <div class="four">Div 4</div>
        </div>

    </body>

</html>