web-design-u2/index.html at main · NNHSComputerScience/web-design-u2 · 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
<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>CSS Notes</title>
	<!-- links our external CSS file to out HTML file.  It is a one-sided tag -->
	<link href="style.css" rel="stylesheet" type="text/css">

	<style>
		p {color:purple;

		}

		body {
			background-color:lightyellow;
		}

		div {
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<h1>CSS Notes</h1>
	<p>CSS is all about designing the Web and making your webpages look beautiful!  Think of it this way:</p>
	<ul>
		<li>HTML = content</li>
		<li>CSS = presentation</li>
	</ul>

	<!-- The class attribute allows us to target multiple tags with a class name and style them similarly. -->
	<div class="section">
  		<h2>EXTERNAL CSS:</h2>
    	<p>Extenal CSS uses a <span id="bold">separate style sheet</span> that you link to in the head of the HTML document.  External styles are the most commonly used and you can change the look of an entire web site by applying just one CSS file (.css file extension)!</p>
	</div>

	<div class="section">
  		<h2>EMBEDDED CSS:</h2>
    	<p>Also called "internal" CSS.  This type of styling will apply to elements on one HTML document.  Apply it by using the &lt;style&gt; tags in the head of the html document.  Embedded CSS takes precedence over external CSS.</p>
	</div>

	<div class="section">
  		<h2>INLINE CSS:</h2>
		<p style="color:red;">Lastly, lets make this line of text red using inline CSS.  Inline CSS allows us to edit the styling of a single tag in our HTML document by using the style property.  <span style="font-weight:bold;">Inline CSS take precedence </span>over the previous two types, so our text appears red!</p>
	</div>


	<div class="section">
		<h2>FONTS</h2>
		<p>Lorem Ipsum (dummy text): <br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</div>

	<div class="section">
  		<h2>Box Model</h2>
		<p><a href="box_model.html">Link</a> to Box Model notes.</p>
	</div>

	<div class="section">
  		<h2>CSS for Layout</h2>
		<p><a href="layout.html">Link</a> to CSS Layout notes.</p>
	</div>

</body>
</html>