Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Order

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Order

      What is an order?

      CSS order property is used to specify the order in which flex items appear within a flex container.
      The order of the flex items is determined by the values of their order property. The flex items with the lower order value will be displayed first.
      Here are some additional things to keep in mind:
      • The order property is not inherited by child elements.
      • The order property only affects flex items.
      • The default value of the order property is 0.
      Following are all possible values that can be used for property order:
      • integer: Represents the ordinal group to be used by the item.
      • inherit: Uses the same value of its parent.
      • initial: The element uses default value i.e 0.

      CSS Order Integer

      The CSS order property is set to an integer value. The value of the order property can be any positive or negative integer.
      We can use order property with positive integer value. A positive value means that the item with the highest positive order value will be displayed last.

      Example

      Here is an example 
      <html>
      <head>
      <style>
         .my_flex_container {
            display: flex;
            background-color: #0ca14a;
            height: 90px;
         }
         .my_flex_container div {
            background-color: #FBFF22;
            padding: 10px;
            margin: 10px;
            height: 50px;
            text-align: center;
         }
      </style>
      </head>
      <body>
         <div class="my_flex_container">
            <div style="order: 2">Item 1</div>
            <div style="order: 6">Item 2</div>
            <div style="order: 4">Item 3</div>
            <div style="order: 1">Item 4</div>
            <div style="order: 3">Item 5</div>
            <div style="order: 5">Item 6</div>
         </div>
      </body>
      </html>
      The CSS order property can be set to a negative integer value. A negative value means that the items with the highest negative order value will be displayed first.

      Example

      Here is an example 
      <html>
      <head>
      <style>
         .my_flex_container {
            display: flex;
            background-color: #0ca14a;
            height: 90px;
         }
         .my_flex_container div {
            background-color: #FBFF22;
            padding: 10px;
            margin: 10px;
            height: 50px;
            text-align: center;
         }
      </style>
      </head>
      <body>
         <div class="my_flex_container">
            <div style="order: 4">Item 1</div>
            <div style="order: 6">Item 2</div>
            <div style="order: -3">Item 3</div>
            <div style="order: 1">Item 4</div>
            <div style="order: -5">Item 5</div>
            <div style="order: 2">Item 6</div>
         </div>
      </body>
      </html>

      CSS Order Initial

      The order: initial value simply sets the order property of the item back to its initial value, which is usually 0.

      Example

      Here is an example 
      <html>
      <head>
      <style>
         .my_flex_container {
            display: flex;
            background-color: #0ca14a;
            height: 90px;
         }
         .my_flex_container div {
            background-color: #FBFF22;
            padding: 10px;
            margin: 10px;
            height: 50px;
            text-align: center;
         }
      </style>
      </head>
      <body>
         <div class="my_flex_container">
            <div style="order: 5">Item 1</div>
            <div style="order: 3">Item 2</div>
            <div style="order: 1">Item 3</div>
            <div style="order: 6">Item 4</div>
            <div style="order: initial">Item 5</div>
            <div style="order: 4">Item 6</div>
         </div>
      </body>
      </html>

      CSS Order Unset

      If you set the order property to unset value, the flex item will be displayed in it's default orde based on the HTML markup.

      Example

      Here is an example where order property is set to unset to the flex item 3. Then order of the flex item 3 will be displayed in the default order 
      <html>
      <head>
      <style>
         .my_flex_container {
            display: flex;
            background-color: #0ca14a;
            height: 90px;
         }
      
         .my_flex_container div {
            background-color: #FBFF22;
            padding: 10px;
            margin: 10px;
            height: 50px;
            text-align: center;
         }
      </style>
      </head>
      <body>
         <div class="my_flex_container">
            <div style="order: 2">Item 1</div>
            <div style="order: 4">Item 2</div>
            <div style="order: unset">Item 3</div>
            <div style="order: 1">Item 4</div>
            <div style="order: 3">Item 5</div>
            <div style="order: 5">Item 6</div>
         </div>
      </body>
      </html>

      CSS Order Revert

      When we set the order property to the revert value, the flex item will be displayed in the order it appears in the HTML markup, but with the order reversed.

      Example

      Here is an example where Order property is set to revert for the fifth flex-item. Then order of the fifth flex-item will be reversed, so it will be displayed first 
      <!DOCTYPE html>
      <html>
      <head>
      <style>
         .my_flex_container {
            display: flex;
            background-color: #0ca14a;
            height: 90px;
         }
         .my_flex_container div {
            background-color: #FBFF22;
            padding: 10px;
            margin: 10px;
            height: 50px;
            text-align: center;
         }
      </style>
      </head>
      <body>
      <div class="my_flex_container">
         <div style="order: 5">Item 1</div>
         <div style="order: 3">Item 2</div>
         <div style="order: 1">Item 3</div>
         <div style="order: 6">Item 4</div>
         <div style="order: revert">Item 5</div>
         <div style="order: 4">Item 6</div>
      </div>
      </body>
      </html>
      Print Page