Skip to content

Commit 9196c68

Browse files
committed
Added more to the tutorial
1 parent 104572a commit 9196c68

File tree

1 file changed

+39
-2
lines changed

1 file changed

+39
-2
lines changed

README.md

+39-2
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,50 @@ Now you can start with a simple example. Copy the following code (yes, it's cons
2929
Is the indentation necessary? No, *but*, stylistically, it makes sense to indent your tags to show depth. The usefulness will be more clear when we get to CSS.
3030

3131

32+
##What is CSS?
3233

34+
CSS stands for Cascading Style sheets. It is a language used to format markup languages. Handily, I just introduced you to the most common markup language- HTML. Let's talk about what CSS can do.
3335

36+
Style sheets are comprised of *rules*. A *rule* consists of one or more *selectors* followed by a *declaration block*.
3437

38+
Selectors target elements and declaration blocks modify the style of those elements. Let's say you want to change all the text in ```<p>Hello World!</p>``` to blue and 35px. This code would accomplish that:
3539

36-
##What is CSS?
40+
```p {
41+
font-size: 15px;
42+
color: red;
43+
}```
44+
45+
To take a step back, you might be wondering where to put this code. You can either declare it between ```<style> </style> ``` tags in your header, inline: ```<p style="color: red; font-size: 15px;" ```, or in a separate file, which is the most common.
46+
47+
To create the file needed, open your favorite text editor (which should be [Sublime](http://www.sublimetext.com/) by now). Create a new file and save it as style.css. If you're using a halfway-decent text editor, you'll notice different colors based on the style.
48+
49+
Next, implement the style change listed above:
50+
51+
```p {
52+
font-size: 15px;
53+
color: red;
54+
}```
55+
56+
Go back to your html file and modifier the header so it looks like this:
57+
58+
```
59+
<html>
60+
<head>
61+
<link rel="stylesheet" type="text/css" href="style.css">
62+
<title>ACM Workshop Test</title>
63+
</head>
64+
<body>
65+
<p>Hello world!</p>
66+
</body>
67+
</html>
68+
```
69+
Save and now check out your large red text!
70+
71+
##What piece is missing?
72+
**Javascript**. HTML provides structure, CSS enhances style, and Javascript can do pretty much everything else. Javascript is *the* programming language of the web for client-side applications.
73+
74+
You can use the links below to learn more before moving onto JavaScript, which is more advanced.
3775
38-
###What piece is missing?
3976
4077
##Learn More (Links)
4178
- [Codecademy](http://www.codecademy.com/) (My favorite)

0 commit comments

Comments
 (0)