w3-css and div alignment

[LeonLatex]

Is it possible to place a w3-css in an external file and not only inline?
What i want to do is align the <div> below 30px from the top. Is there a w3 margin?

<div class="w3-bar w3-card w3-blue-gray w3-margin-bottom w3-padding margin-top: 0px margin-top:30px"></div>

And is it necessary to have both "w3-bar and w3-card"? In my head they are the same with different value/purpose?

w3-***** is the css framework to w3 schools.

[cyberRobot]

I'm guessing that you are referring to the following:
https://www.w3schools.com/w3css/

If that's the CSS code you are using, note that they provide a couple linking examples on the above page under the "How To" heading. The first example shows how you can link to the stylesheet on the w3schools website.

The second example shows how you can store the CSS code in a separate file on your server. Then use the <link> tag to link to that external CSS file. Of course, you will need to customize the href value so that it points to the proper location on your website.

 

As for your question about margins, you could review the following page:
https://www.w3schools.com/w3css/w3css_margins.asp

...or you could dig through the CSS file itself:
https://www.w3schools.com/w3css/4/w3.css

[Barand]

1 hour ago, LeonLatex said:

And is it necessary to have both "w3-bar and w3-card"?

Not only not necessary but quite a bizarre combination. Do you want a horizontal menu bar or a card layout? Pick one.

[LeonLatex]

This is the answer for inline:
<div class="w3-bar w3-card w3-blue-gray w3-margin-bottom w3-padding" style="height:30px; margin-top:30px;"></div>