seancdavis
5/30/2017 - 6:25 PM

Multiple CSS Imports

Multiple CSS Imports

styles-02.css
content_copyfile_download
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css');
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css');
styles-01.css
content_copyfile_download
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css');
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css');

.row {
  text-align: center;
}
no-link.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Multiple CSS Imports</title>

    <link rel="stylesheet" href="styles-01.css" />
    <link rel="stylesheet" href="styles-02.css" />
  </head>

  <body>

    <br><br>

    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>
      </div>
    </div>

  </body>

</html>
head-link.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Multiple CSS Imports</title>

    <link rel="stylesheet" href="styles-01.css" />
    <link rel="stylesheet" href="styles-02.css" />

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
  </head>

  <body>

    <br><br>

    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>
      </div>
    </div>

  </body>

</html>