CSS Element Example

CSS:

h1{
    color: red;
}

HTML:

<html>
        <h1>Hello</h1>
</html>

Result:

Hello

CSS Class Example

CSS:

.red-header{
    color: red;
}

HTML:

<html>
        <h1 class="red-header">Hello</h1>
</html>

Result:

Hello

CSS Class with Image Example

CSS:

.red-header{
    color: Yellow;
    background: url(documents/image1.jpg) center center;
}

HTML:

<html>
        <h1 class="red-header">Hello</h1>
</html>

Result:

Hello

Reference an object in a folder above the folder you're in

This also works for links to different pages

CSS:

.red-header{
    color: red;
    background-image: url(../documents/image1.jpg);
}

HTML:

<html>
        <img src="../documents/image1.jpg">
</html>

Result:

What a Bootstrap Head should look like

HTML:

<head>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/your-css-code-file.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
    <link rel="icon" type="image/png" href="documents/favoricon.png">
    <title>Your Website Title!</title>
    </head>
            

Disabled Links

HTML:

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="disabled"><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
            

Result:

Resize image

HTML:

<html>
        <img src="../documents/image1.jpg" width="50%">
</html>
** width can equal % and px(pixels) **

Result: