Text Editors and External Style Sheets

Before we talk about each line of code, I want to take a minute and 0:00 talk to you about WorkSpaces, and why this environment is such a great tool. 0:05 WorkSpaces is designed to function just like a text editor, but 0:10 it's not like Word or Pages, which are word processors. 0:15 These text editors are for writing HTML and CSS. 0:18 And the many other languages that make up the web. 0:23 On every computer, there's a basic text editor. 0:26 On Windows, it's called Notepad. 0:29 And on a Mac, it's called TextEdit. 0:31 I'm working on a Mac, so I'll show you what this looks like. 0:33 I'll search for TextEdit and there it is. 0:38 And when I pull it up, this is what a basic text editor is going to look like. 0:42 Now I bet you're thinking, 0:47 that doesn't look like the fancy WorkSpaces you're using. 0:48 And it's true. 0:52 WorkSpaces, like many other text editors, has many special features that 0:53 allow you to code faster and use colors to make coding easier. 0:58 Now that we know where we're working and why WorkSpaces is so 1:03 awesome, let's talk about why we're using an external style sheet. 1:07 In the Publisher story course, there are only two lines of CSS code, 1:12 written in style tags, directly in the HTML document. 1:16 That seems easy enough, so why don't we use it every time? 1:19 The main purpose of making an external style sheet is so 1:23 you can make changes to the entire website at once. 1:27 In the early days of styling webpage, HTML structure and 1:32 CSS style were mixed together. 1:36 Presentation was directly applied to the structure, 1:39 which means that maintaining webpages became an arduous task. 1:42 If, for example, someone decided that the main title in each page of 1:47 a website should change from black to blue and 1:51 that site had ten pages, you had to change that style ten times. 1:55 By separating structure and presentation you gain numerous advantages. 2:00 A cascading style sheet can be shared across multiple pages, sites are easier to 2:05 maintain and become more flexible, and the styles applied to a web page, 2:10 can be tailored to suit multiple devices, such as a phone, tablet, or computer. 2:15 Looking at our style sheet, you can see I've included a lot of 2:21 rules that override each other as you read down the page. 2:24 The C in CSS means that while the rules cascade down the page, 2:28 they override the rule before it. 2:32 This works when you're writing basic rules like we have here. 2:35 But I should warn you, there are many ways this cascading rule does not work. 2:38 As you learn more about CSS, you'll find there are nearly as many instances that 2:43 this doesn't work in a cascading nature as when it does. 2:48 Reading through our own CSS rules, you can see that up here in 2:53 the body we've assigned the color of all the text to be a dark gray. 2:57 But when you look at our webpage, not all the text is a dark gray. 3:01 So what happened? 3:06 You can see down here in our headlines we've changed those colors. 3:07 So in our first level headline we've changed it 3:12 to a dark purple which you can see here in my name. 3:14 Level two headline I've changed it to a light grey, which you can see. 3:18 One that says teacher. 3:24 And level four headline, I've changed it to a dark purple. 3:25 And you can see that in What I do and What I enjoy doing. 3:29 You should change these colors to whatever makes you happy. 3:32 We've covered a lot of new information about text editors and CSS. 3:37 Let's make sure you're picking up everything I'm 3:41 putting down with a quick quiz. 3:44