starter-pack/lab_029.html at main · hack4impact-calpoly/starter-pack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">

<head>
  <title>
    Lab 29 - Cascading Style Sheets
  </title>
  <meta charset="UTF-8" />
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
  <meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
  <meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
  <meta content="#0000ff" name="theme-color" />
  <link href="manifest.json" rel="manifest" />
  <link href="css/reset.css" media="screen" rel="stylesheet" />
  <link href="css/screen.css" media="screen" rel="stylesheet" />
  <link href="css/prism.css" rel="stylesheet" />
</head>

<body data-lab-id="29">
  <a class="skip-to-content" href="#content" tabindex="1">
    Skip to content
  </a>
  <main class="layout">
    <nav id="index">
      <p class="link-home">
        <a href="index.html">
          <span>Hack4Impact Starter Pack</span>
        </a>
      </p>
      <button class="link-menu">
        Menu
      </button>
      <nav tabindex="0">
        <ol>
        </ol>
      </nav>
    </nav>
    <div id="content" tabindex="-1">
      <h1 class="lab_title">
        <em>Lab 29</em>
        Cascading Style Sheets
      </h1>

      <h2>Goals</h2>
      <ul>
        <li>Learn about Cascading Style Sheets (CSS)</li>
      </ul>
      <h2>CSS</h2>
      <p>A <strong>Cascading Style Sheet</strong>, or <strong>CSS</strong>, is the glitter, the
        paint, and the <span class="neon">neon</span> that makes a website shine. It provides all of the styling and
        visual appearance of a website. You might see some websites and developers using tools which mix HTML and CSS,
        however we <em>strongly</em> recommend that you keep them separate.
      </p>
      <p>Remember, HTML is for content and CSS is for appearance. They both have their jobs and its your job as a
        developer to use them properly! With that said, let's learn about how to apply CSS to HTML.</p>
      <h2>Applying CSS</h2>
      <p>There are three ways to apply CSS to HTML: <strong>inline</strong>, <strong>internal</strong>, and
        <strong>external</strong>. Keeping with our separation of responsibilities, we will be using the
        <strong>external</strong> method of applying CSS
      </p>
      <p>In the <code class="language-html">&lt;head&gt;</code> of your <code>index.html</code>, add the <code
          class="language-html">&lt;link&gt;</code> tag below.</p>
      <h3 class="file-heading"><em>index.html</em></h3>
      <pre class="file line-numbers" data-range="1,6" data-src="prism/html/2901.html"></pre>
      <p>This will tell your browser to apply the styles in <code>styles.css</code> to your HTML page. We'll be
        using the same CSS style sheet for all our pages so add this to all your other HTML pages as well.
      </p>
      <p class="note"><strong>Note:</strong> As you go through these next few sections, be sure to still stage and
        commit your changes. You don't need to push as often to the remote repository, but when you're happy with
        something it might be a good idea to also push.</p>
      <h2>Make It Your Own</h2>
      <p>CSS is very flexible and very powerful. Instead of describing everything you need to do like
        with HTML, we'll go over the most important CSS concepts and <strong>leave the rest of the styling up to
          you</strong>.</p>
      <p>We'll provide you with our style sheet as well as a minimum style sheet of just the necessary requirements.
        If you just follow our stylings and keep everything the same, you'll get a very specific looking website so
        we encourage you to work off the minimum style sheet and make it your own!</p>
      <p class="note"><strong>Note:</strong> If you need any help or if there is some style you are trying to achieve,
        but are unable to, then we <em>strongly</em> suggest you use <a
          href="https://github.com/hack4impact-calpoly/starter-pack/discussions" target="_blank" rel="noopener">GitHub
          Discussions</a> to ask questions. We are here to
        help you!</p>
      <h2>Style Sheets</h2>
      <p>Visit the website: <a href="https://khoa-l.github.io/starter-pack-example" target="_blank"
          rel="noopener">https://khoa-l.github.io/</a></p>
      <p><a href="css/styles.css" download>Download full style sheet</a></p>
      <p><a href="css/styles.min.css" download>Download only the minimum styles</a></p>
      <p>You are welcome to download both and try them out! Just put them in your directory and change the reference in
        your <code class="language-html">&lt;head&gt;</code> to the correct file.</p>


    </div>
  </main>
  <script src="js/ui.js" type="text/javascript"></script>
  <script src="js/prism.js" type="text/javascript"></script>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({startOnLoad: true, theme: "base"});
  </script>
</body>

</html>