-
Notifications
You must be signed in to change notification settings - Fork 35
/
02-css.html
96 lines (96 loc) · 7.07 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
<!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><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>
<pre class="sourceCode html"><code class="sourceCode html"><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></code></pre>
<p>Changing the font size:</p>
<pre class="sourceCode html"><code class="sourceCode html"><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></code></pre>
<p>If we want to change two things at the same time, we just mention all of them at once:</p>
<pre class="sourceCode html"><code class="sourceCode html"><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></code></pre>
<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>
<ul>
<li>create a CSS file: styles.css</li>
</ul>
<p>In this file, we can define classes, that we can then apply to one or more of our elements in the HTML file. Let's create a class called 'title' that we want to apply to different elements on our page.</p>
<pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.title</span>
<span class="kw">{</span>
<span class="kw">color:</span> <span class="dt">red</span><span class="kw">;</span>
<span class="kw">font-size:</span> <span class="dt">50px</span><span class="kw">;</span>
<span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
<span class="kw">}</span></code></pre>
<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>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
<span class="kw"><html></span>
<span class="kw"><head></span>
<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>
<span class="kw"></head></span> </code></pre>
<p>In the body, we can use the class that we just created:</p>
<pre class="sourceCode html"><code class="sourceCode html"> <span class="kw"><body></span>
<span class="kw"><div</span><span class="ot"> class=</span><span class="st">"title"</span><span class="kw">></span> First title <span class="kw"></div></span>
<span class="kw"><div></span> some text <span class="kw"></div></span>
<span class="kw"><div</span><span class="ot"> class=</span><span class="st">"title"</span><span class="kw">></span> And another title <span class="kw"></div></span>
<span class="kw"></body></span>
<span class="kw"></html></span> </code></pre>
<div id="create-and-use-your-own-class" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Create and use your own class</h2>
</div>
<div class="panel-body">
<p>Create a class called 'description' and a 'div' element with text that has this class. Make the text dark gray with a custom font size. Add a black border just on the left side of the 'div' and add padding around the text. Try adding in enough text so that it wraps over multiple lines, and then set the width of the 'div' to different values. Try setting the background color of the 'div' element. If you like, play with the 'title' class as well, until you like how it looks.</p>
</div>
</div>
<p>We can check out how our elements are styled in the developer tools. To get to them, right-click on any element on the page and select 'Inspect element'. The developer tools should open and you should be in the 'Elements' tab. Here, you can navigate through the html file and inspect css properties at the same time.</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>