start-guide/css.html at gh-pages · lexhack/start-guide · 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
<section>
	<header>
		<h1>CSS</h1>
	</header>
	<p>You may have noticed that Chirp, our example application, and generally most websites, look much better than the plain one you've made so far.</p>
	<p>Although a number of HTML elements already have some basic formatting, because HTML is a <em>markup language</em>, like we mentioned earlier, its primary use is for labeling different types of webpage content, such as identifying a paragraph or a heading.</p>
	<p>Cascading Style Sheets, or CSS, is the language used to apply formatting and appearance to a webpage. To include CSS in an HTML file, we include the CSS code between <code>&lt;style&gt;</code> tags, which should generally be included inside of the <code>&lt;head&gt;</code> element. Let's write that into our file:</p>
<pre><code class='code-block' data-code='
<html>
<head>
	<title>LexHack!</title>
	<style>

	</style>
</head>
<body>
	<h1>LexHack!</h1>
	<p>This is a very empty LexHack website.</p>
</body>
</html>
'></code></pre>
	<p>Despite being closely tied to HTML, CSS syntax looks quite different from that of HTML. CSS is made up primarily of three components: selectors, properties, and values. CSS properties are set to specific values through what is called a <em>declaration</em>, which is a property and value pair. Selectors specify which HTML element(s) the declarations are applied to. Here is a look of the format of CSS (leaving out the HTML):</p>
<pre><code class='code-block' data-code='
selector {
	property: value;
}
'></code></pre>
	<p>Keep in mind that this isn't valid CSS, just an example of what CSS looks like. CSS declarations for the HTML elements specified are contained within the brackets: <code>{ }</code>. Inside the brackets, we have <code>property: value;</code>, which sets what is called a <em>property</em>, which is a keyword like <code>color</code>, to a value, like <code>red</code>. Finally, we have the semicolon at the end of the declaration in order to separate each declaration. Here's what some actual CSS might look like:</p>
<pre><code class='code-block' data-code='
h1 {
	color: red;
}
'></code></pre>
	<p>This CSS snippet would take all the <code>&lt;h1&gt;</code> elements, and apply <code>color: red;</code> to each one. <code>color</code> is the text color, and <code>red</code> is the, you guessed it, the color red, so this snippet would turn all of the <code>&lt;h1&gt;</code> elements and turn their text to the color red.</p>
	<h1 style='color:red;'>Like this!</h1>
</section>