W3.CSS - Configuração de ambiente

Como usar o W3.CSS?

Existem duas maneiras de usar W3.CSS -

Local Installation - Você pode baixar o arquivo W3.CSS em sua máquina local e incluí-lo em seu código HTML.
CDN Based Version - Você pode incluir o arquivo W3.CSS em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Vamos para https://www.w3schools.com/w3css/w3css_downloads.asp para baixar a versão mais recente disponível.
Em seguida, coloque o arquivo w3.css baixado em um diretório do seu site, por exemplo, / css.

Exemplo

Agora você pode incluir o arquivo css em seu arquivo HTML da seguinte maneira -

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir o arquivo W3.CSS em seu código HTML diretamente da Content Delivery Network (CDN). W3Schools.com fornece conteúdo para a versão mais recente.

Note - Estamos usando a versão W3Schools.com CDN da biblioteca em todo este tutorial.

Exemplo

Agora, vamos reescrever o exemplo acima usando a biblioteca jQuery do CDN W3Schools.com.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Isso produzirá o seguinte resultado -