forked from IsaKiko/D3-visualising-data
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path02-css.html
102 lines (102 loc) · 8.67 KB
/
02-css.html
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>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: CSS</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="lesson">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">CSS</h1>
<h2 class="subtitle">Doing it in style</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2 id="learning-objectives" class="objectives panel panel-warning"><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Change the appearance of different HTML elements</li>
<li>Create new classes in a CSS file</li>
<li>Apply these classes to different HTML elements</li>
</ul>
</div>
</div>
<p>The heading has a certain look. This look (or style) includes the color, position, font size, as well as many other attributes.</p>
<p>We can change the appearance of our text in different ways. A quick way is to simply mention what we want our element to look like when we create it by setting the “style” attribute. If we want to change the color, for example, we write:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="kw"><h1</span><span class="ot"> style=</span><span class="st">"color:blue"</span><span class="kw">></span>This is a blue heading<span class="kw"></h1></span></a></code></pre></div>
<p>Changing the font size:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw"><h1</span><span class="ot"> style=</span><span class="st">"font-size: 80px"</span><span class="kw">></span>This is a big heading<span class="kw"></h1></span></a></code></pre></div>
<p>If we want to change two things at the same time, we just mention all of them at once:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="kw"><h1</span><span class="ot"> style=</span><span class="st">"font-size: 80px; color: blue"</span><span class="kw">></span>This is a big, blue heading<span class="kw"></h1></span></a></code></pre></div>
<p>This is a quick and simple way to change the appearance of elements on the spot. However, if we want to create different elements of the same type, we have to do a lot of typing, and our file will quickly become confusing and hard to maintain.</p>
<p>If we want to change the look of many elements at the same time, we can instead create a style file (extension .css).</p>
<h2 id="create-a-css-file">Create a CSS File</h2>
<p>Make a new file and call it <code>styles.css</code>.</p>
<p>In this file, we can define classes, that we can then apply to one or more of our elements in the HTML file.</p>
<p>Let’s create a class called <code>center-red</code> that we want to apply to different elements on our page.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="fu">.center-red</span></a>
<a class="sourceLine" id="cb4-2" data-line-number="2">{</a>
<a class="sourceLine" id="cb4-3" data-line-number="3"> <span class="kw">color</span>: <span class="dv">red</span>;</a>
<a class="sourceLine" id="cb4-4" data-line-number="4"> <span class="kw">font-size</span>: <span class="dv">50px</span>;</a>
<a class="sourceLine" id="cb4-5" data-line-number="5"> <span class="kw">text-align</span>: <span class="dv">center</span>;</a>
<a class="sourceLine" id="cb4-6" data-line-number="6">}</a></code></pre></div>
<p>All that’s left to do, is to tell the HTML file where to find our new CSS file. This is done by linking to it in the head:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span></a>
<a class="sourceLine" id="cb5-2" data-line-number="2"><span class="kw"><html></span></a>
<a class="sourceLine" id="cb5-3" data-line-number="3"> <span class="kw"><head></span></a>
<a class="sourceLine" id="cb5-4" data-line-number="4"> <span class="kw"><link</span><span class="ot"> rel=</span><span class="st">"stylesheet"</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="ot"> href=</span><span class="st">"styles.css"</span><span class="kw">></span></a>
<a class="sourceLine" id="cb5-5" data-line-number="5"> <span class="kw"></head></span></a></code></pre></div>
<p>In the body, we can use the class that we just created:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb6-1" data-line-number="1"> <span class="kw"><body></span></a>
<a class="sourceLine" id="cb6-2" data-line-number="2"> <span class="kw"><h1><em></span>The Wealth <span class="er">&</span> Health of Nations<span class="kw"></em></h1></span></a>
<a class="sourceLine" id="cb6-3" data-line-number="3"></a>
<a class="sourceLine" id="cb6-4" data-line-number="4"> <span class="kw"><div</span><span class="ot"> class=</span><span class="st">"center-red"</span><span class="kw">></span> First line <span class="kw"></div></span></a>
<a class="sourceLine" id="cb6-5" data-line-number="5"> <span class="kw"><div></span> some text <span class="kw"></div></span></a>
<a class="sourceLine" id="cb6-6" data-line-number="6"> <span class="kw"><div</span><span class="ot"> class=</span><span class="st">"center-red"</span><span class="kw">></span> And another line <span class="kw"></div></span></a>
<a class="sourceLine" id="cb6-7" data-line-number="7"> <span class="kw"></body></span></a>
<a class="sourceLine" id="cb6-8" data-line-number="8"><span class="kw"></html></span></a></code></pre></div>
<div id="your-turn-create-and-use-your-own-class" class="challenge panel panel-success">
<div class="panel-heading">
<h2 id="your-turn-create-and-use-your-own-class" class="challenge panel panel-success"><span class="glyphicon glyphicon-pencil"></span>Your turn: Create and use your own class</h2>
</div>
<div class="panel-body">
<ol type="1">
<li>Create a class below the heading called <code>description</code> and a <code><div></code> element with text that has this class.</li>
<li>Make the text dark gray with a custom smaller font size.</li>
<li>Change the font face to something else, like Open Sans. You can use <a href="https://fonts.google.com/">Google Fonts</a> to link a font of your choice, and then use the <code>font-family</code> CSS property.</li>
</ol>
</div>
</div>
<p>Hint: In order to embed Google Fonts, you need to select one font type, click on “Use this font” on the top right, and then re-expand the sliding panel on the bottom to get to the embed code.</p>
</div>
</div>
<div class="footer">
<a class="label swc-blue-bg" href="http://software-carpentry.org">Software Carpentry</a>
<a class="label swc-blue-bg" href="https://github.com/swcarpentry/lesson-template">Source</a>
<a class="label swc-blue-bg" href="mailto:[email protected]">Contact</a>
<a class="label swc-blue-bg" href="LICENSE.html">License</a>
</div>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>