-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss.html
More file actions
193 lines (176 loc) · 15.6 KB
/
css.html
File metadata and controls
193 lines (176 loc) · 15.6 KB
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#first">Introduction to CSS</a></li>
<li><a href="#head">CSS in the Head</a></li>
<li><a href="#cssexercise">CSS Exercise</a></li>
<li><a href="#id">ID's and Classes</a></li>
<li><a href="#div">Div and Span</a></li>
<li><a href="#more">More advanced CSS</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="first">Your First CSS Session</h1>
<p>
Last time we looked at HTML, and saw how this was used to mark up the information in a webpage. Right now, your HTML pages don't look very good, as you haven't given any styling information. The way to do this is using CSS (Cascading Style Sheets).
</p>
<p>
CSS is a way of separating the way your page looks from the content that it displays. As an extreme example of this check out <a href="http://www.csszengarden.com/">CSS Zen Garden</a> - by clicking on the links you completely change how the site looks, but the html remains unchanged.
</p>
<p>
There are a few ways to include CSS in an HTML file:</p>
<ol>
<li>Put the css inline in the html.</li>
<li>Put the css in a <code><style>..</style></code> section in the <code><head></code></li>
<li>Link to a separate .css file in the <code><head></code></li>
</ol>
<p>
The first way is sometimes useful, but defeats the point of using CSS to separate presentation and information. The second way is a bit better and is what we'll do now - it's nice to have everything in a single file when you're just starting. The third way is the best. We'll look at how to do this soon.
</p>
<h2 id="head">CSS in the <code><head></code></h2>
<p>
If you're putting your CSS in the <code><head></code> of your html file (option 2) it should look something like this:
</p>
<pre><code class="html"><span class="nt"><head></span>
<span class="nt"><title></span>Some title<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">h1</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
</code></pre>
<p>The bit inside the <code><style></code> tags is CSS. The <code>h1</code> bit specifies the tag that will be styled. The bit inside the <code>{ ... }</code> specifies the styles that will be applied. Here we change the colour of the <code>h1</code> text red.</p>
<h3>A few more CSS properties</h3>
<p>There are loads of CSS properties that you can use to customize your site, and luckily they all follow the same structure. Below are a few more:</p>
<pre><code class="css"><span class="nt">p</span> <span class="p">{</span> <span class="k">font-family</span><span class="o">:</span> <span class="s1">'Arial'</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span> <span class="k">
font-size</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="k">border-width</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="k">border-color</span><span class="o">:</span> <span class="m">blue</span><span class="p">;</span>
<span class="k">border-style</span><span class="o">:</span> <span class="m">solid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h3</span> <span class="p">{</span>
<span class="k">background-color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;</span>
<span class="k">font-size</span><span class="o">:</span> <span class="m">2px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
<h2 id="cssexercise">First CSS Exercise</h2>
<p>
In the below exercise, your task is to take the website that you created in the first session and turn it into <a href="exercises/second.html">this.</a>
</p>
<p>
Although this doesn't get us closer to our final goal, it will teach us alot about CSS. These CSS skills will become very useful later on!
</p>
<tasks>
<item title="Add a style opening and closing tag to the head"></item>
<item title="Make all H1's red"> Hint: Remember, changind the font color is done with <code>color: red;</code></item>
<item title="Change the H1 font-family to Arial"></item>
<item title="Change all paragraphs to have a font-size of 20px"></item>
<item title="List items should have a yellow background-color"></item>
<item title="Images should have a border">Give the border a solid style, a red color and a width of 5 pixels</item>
</tasks>
<h2 id="id">Id's and Classes</h2>
<p>So far you have used html tags to specify CSS rules. For example,</p>
<div class="highlight"><pre><code class="css"><span class="nt">h2</span> <span class="p">{</span>
<span class="k">font-size</span><span class="o">:</span> <span class="m">40px</span><span class="p">;</span>
<span class="k">color</span><span class="o">:</span> <span class="nb">pink</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>will turn all your <code><h2></code> massive and pink.</p>
<p>It is often useful to be able to make CSS rules more specific, so you can apply different styles to different parts of the page. One common way to do this is to target specific html attributes - in particular <code>id</code> and <code>class</code>.</p>
<h3 id="the__and__attributes">The <code>id</code> and <code>class</code> attributes</h3>
<p>HTML tags can have <em>attributes</em> which provide additional information about the element. You've aready seen some examples of this:</p>
<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.facebook.com"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"cat_pic.png"</span><span class="nt">></span>
</code></pre></div>
<p>Both <code>href</code> and <code>src</code> are examples of html attributes. They are written in pairs with their values: <code>attribute="value"</code>.</p>
<p>There are some attributes that can be added to any tag. Two examples of these are <code>id</code> and <code>class</code>:</p>
<div class="highlight"><pre><code class="html"><span class="nt"><h2</span> <span class="na">id=</span><span class="s">"products_title"</span><span class="nt">></span>Our scrumptious puddings<span class="nt"></h2></span>
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"products_list"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"product_item"</span><span class="nt">></span>Black forrest gateau<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"product_item"</span><span class="nt">></span>Rasberry lemon swirl cheesecake<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"product_item"</span><span class="nt">></span>Sticky toffee pudding<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"product_item"</span><span class="nt">></span>Death-by-chocolate cake<span class="nt"></li></span>
<span class="nt"></uk></span>
</code></pre></div>
<p>Both <code>id</code> and <code>class</code> are used to add some information to the HTML tags. The key difference is that <code>id</code> should specify a <em>unique element on the page</em>, whereas multiple elements can share the same <code>class</code>.</p>
<p>CSS lets you target the <code>id</code> and <code>class</code> attributes in special ways:</p>
<div class="highlight"><pre><code class="css"><span class="c">/* make the h2 with id="products_title" purple */</span>
<span class="nt">h2</span><span class="nf">#products_title</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">purple</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* remove the bullets from all li with class="product_item" */</span>
<span class="nt">li</span><span class="nc">.product_item</span> <span class="p">{</span> <span class="k">list-style-type</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
<p>The <code>id</code> is targeted by adding <code>#id_value</code> to the tag and the <code>class</code> is targeted by adding <code>.class_value</code> to the tag.</p>
<p>It is also possible to target any items with a given <code>class</code> or <code>id</code> by leaving out the HTML tag:</p>
<div class="highlight"><pre><code class="css"><span class="c">/* make any element with id="products_title" purple */</span>
<span class="nf">#products_title</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">purple</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* make any element with class="product_item blue" */</span>
<span class="nc">.product_item</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
<h3 id="div">Divs and spans</h3>
<p>There are two important HTML tags, that we didn't use earlier: <code><div></code> and <code><span></code>. Both are really useful when it comes to using HTML attributes to target CSS classes.</p>
<p><code><div></code> stands for <em>division</em> and is used to break the page up into different parts. It is a 'block-level' element, which means that it will start a new line before and after it.</p>
<p><code><span></code> can be used to apply classes and ids to certain bits of text. It is an 'inline' element, which won't start a new paragraph before or after.</p>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">'info_section'</span><span class="nt">></span>
<span class="nt"><p></span>This is a paragraph in the info section. We can use a span to target <span class="nt"><span</span> <span class="na">class=</span><span class="s">'important'</span><span class="nt">></span>certain bits of important text<span class="nt"></span></span>.<span class="nt"><p></span>
<span class="nt"></div></span>
</code></pre></div>
<h2 id="more">More advanced CSS</h2>
<p>
In the following exercise you will take what you created above and turn in into <a href="exercises/third.html">this</a>.
</p>
<p>
Again, this exercise is more a exercise in CSS than a step towards our final goal!
</p>
<tasks>
<item title="Add a class of 'last' to the last list item"> <code><li class="last">...</li></code></item>
<item title="Change the background color of .last"> Set the background color of everything that has the class 'last' to rgba(206, 36, 67, 1)</item>
<item title="Remove the bullet point of .last"> Hint: <code>list-style-type: none</code></item>
<item title="Give the button an id"><code> <button id="shop_button"></button></code></item>
<item title="Remove border of #shop_button"><code>border: 0</code></item>
<item title="Change the font colour of #shop_button to white"></item>
<item title="Add padding to #shop_button"><code>padding: 10px</code></item>
<item title="Change the background color of #shop_button"><code>rgba(206, 36, 67, 1)</code></item>
<item title="Change the font size of #shop_button to 20px"></item>
<item title="Create a div for each 'product'">Above each <code><img></code> tag open a new <code><div></code> tag</item>
<item title="Close each of these div's after each a tag"><code></a></div></code> </item>
<item title="Add a class of product to these three div's"><code><div class="product">...</div></code></item>
<item title="Add a width and height to .product using CSS">Hint: <code>.product { width: 400px; height: 200px; }</code></item>
<item title="Add a 10px margin to .product"></item>
<item title="Turn the .product background-color gray"></item>
</tasks>
<p>
Got stuck? Check the <a href="exercise/third.html">solution</a> and use the developer tools to help you out!
</p>
</div> <!-- rightPane -->
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>