Learn HTML by building a Marker- additional help needed

Hi guys,
so after writing these codes here on freecodecamp, i try writing it myself in vs code to make sure i get the concepts down, i realized while writing the code for the class cap and class sleeve that the order in which i write them affect how they look when i run it. if class sleeve comes before cap its aligned to the far left,but when class cap comes before class sleeve it shows up mid-ish which is the desired effect. please help me with why that is.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Colored Markers</title>
     </head>


           
<body>
    <h1>CSS Color Markers</h1>
    <div class="container">


      <div class="marker red">
        <div class="sleeve"></div>
        <div class="cap"></div> 
      </div>


      <div class="marker green">
        <div class="sleeve"></div>
        <div class="cap"></div> 
      </div>


      <div class="marker blue">
        <div class="sleeve"></div>
        <div class="cap"></div> 
    </div>







    </div>


</body>


</html>
h1{text-align: center;}


.marker{
    height: 25px;
    width: 200px;
    margin: 10px auto;
}



.cap{
    width: 60px;
    height: 25px;
    
}

.sleeve{
    height: 25px;
    width: 110px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0,0,0,0.75);

}

.cap,.sleeve{display: inline-block;}

.red{
    /*background-color: rgb(255,0,0)*/
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83,14,14,0.8);
}


.green{
    /*background-color: rgb(0,127,0)*/
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}




.blue{    /*background-color: rgb(0,0,255)*/
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}





.container{
     background-color: rgb(255, 255, 255);
     padding: 10px 0;
}

Hi @KnightCypher , welcome to the forum.

When the browser rendering a HTML document, it will go from top to bottom, from left to right. Whatever comes first will be render first.

For example, in this code:

      <div class="marker red">
        <div class="sleeve"></div>
        <div class="cap"></div> 
      </div>

With both sleeve and cap are display: inline-block,
because sleeve comes first so the default order is: sleeve will be on the left of cap.

To see it better visually, you can add this rule to your CSS file to draw an yellow outline around sleeve and cap:

.cap, .sleeve {
    outline: 2px solid yellow;
}

image

On the image above: the small one is cap, the big one is sleeve.

With the order on:

  • the red marker: cap - sleeve
  • the green marker: sleeve - cap
  • the blue marker: sleeve - cap

You can also use Inspector feature on the Dev Tools on your browser (Press F12) to see more clearly.

Hope this help.

1 Like

thank you very much this is quit helpful

i believe i can even do a:

.cap{ outline: 
2px 'solid color';}

.sleeve{ outline: 
2px 'solid color';}

just so i can see it better.

and also this is just something that came to mind and i have not tried it yet. please bear with me ,
suppose, i move the ‘border-left: 10px double rgba(0,0,0,0.75)’ code from the .sleeve to the .cap, will it mean that on the the green marker as an example the black border-lines will move to the left side portion of it?

Yes, you can.

If the code for the green marker is:

      <div class="marker green">
        <div class="cap"></div> 
        <div class="sleeve"></div>
      </div>

then yes, the black border-lines will move to the left, compare to its original position.

That’s basically just doing two things:

  • Remove the left border from .sleeve
  • Add a left border for .cap

On a side note, I think it’s great for you to write the code yourself to cement your knowledge. Keep up the good work!

1 Like

thank you very much, your help is very much appreciated.

1 Like