This course will be retired on April 26, 2020. We recommend "Introduction to HTML and CSS" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video you are going to be learning about text editor and why Workspaces is such a powerful programming tool. We are also going to be talking about what is stylesheet is and why we want to separate it from our HTML document.
Code for copy/paste:
/********* Top bar color *********/
html {
border-top: 20px solid #8A85A5;
}
/********* Body styling *********/
body {
max-width: 600px;
margin: 0 auto;
padding: 20px 20px;
font-size: 1.3em;
line-height: 1.6em;
font-family: Helvetica Neue, Helvetica, Arial, serif;
color: #777;
font-weight: 300;
}
/********* Image styling *********/
img {
border-radius: 100%;
max-width: 340px;
}
/********* Headline styling *********/
h1 {
font-size: 1.5em;
line-height: .5em;
color: #564581;
}
h2 {
font-size: 1em;
line-height: 1em;
font-style: oblique;
color: #aaa;
}
h3 {
font-size: .875em;
line-height: 1em;
font-weight: normal;
}
h4 {
margin-top: 60px;
font-weight: 500;
color: #564581;
}
-
0:00
Before we talk about each line of code, I want to take a minute and
-
0:05
talk to you about WorkSpaces, and why this environment is such a great tool.
-
0:10
WorkSpaces is designed to function just like a text editor, but
-
0:15
it's not like Word or Pages, which are word processors.
-
0:18
These text editors are for writing HTML and CSS.
-
0:23
And the many other languages that make up the web.
-
0:26
On every computer, there's a basic text editor.
-
0:29
On Windows, it's called Notepad.
-
0:31
And on a Mac, it's called TextEdit.
-
0:33
I'm working on a Mac, so I'll show you what this looks like.
-
0:38
I'll search for TextEdit and there it is.
-
0:42
And when I pull it up, this is what a basic text editor is going to look like.
-
0:47
Now I bet you're thinking,
-
0:48
that doesn't look like the fancy WorkSpaces you're using.
-
0:52
And it's true.
-
0:53
WorkSpaces, like many other text editors, has many special features that
-
0:58
allow you to code faster and use colors to make coding easier.
-
1:03
Now that we know where we're working and why WorkSpaces is so
-
1:07
awesome, let's talk about why we're using an external style sheet.
-
1:12
In the Publisher story course, there are only two lines of CSS code,
-
1:16
written in style tags, directly in the HTML document.
-
1:19
That seems easy enough, so why don't we use it every time?
-
1:23
The main purpose of making an external style sheet is so
-
1:27
you can make changes to the entire website at once.
-
1:32
In the early days of styling webpage, HTML structure and
-
1:36
CSS style were mixed together.
-
1:39
Presentation was directly applied to the structure,
-
1:42
which means that maintaining webpages became an arduous task.
-
1:47
If, for example, someone decided that the main title in each page of
-
1:51
a website should change from black to blue and
-
1:55
that site had ten pages, you had to change that style ten times.
-
2:00
By separating structure and presentation you gain numerous advantages.
-
2:05
A cascading style sheet can be shared across multiple pages, sites are easier to
-
2:10
maintain and become more flexible, and the styles applied to a web page,
-
2:15
can be tailored to suit multiple devices, such as a phone, tablet, or computer.
-
2:21
Looking at our style sheet, you can see I've included a lot of
-
2:24
rules that override each other as you read down the page.
-
2:28
The C in CSS means that while the rules cascade down the page,
-
2:32
they override the rule before it.
-
2:35
This works when you're writing basic rules like we have here.
-
2:38
But I should warn you, there are many ways this cascading rule does not work.
-
2:43
As you learn more about CSS, you'll find there are nearly as many instances that
-
2:48
this doesn't work in a cascading nature as when it does.
-
2:53
Reading through our own CSS rules, you can see that up here in
-
2:57
the body we've assigned the color of all the text to be a dark gray.
-
3:01
But when you look at our webpage, not all the text is a dark gray.
-
3:06
So what happened?
-
3:07
You can see down here in our headlines we've changed those colors.
-
3:12
So in our first level headline we've changed it
-
3:14
to a dark purple which you can see here in my name.
-
3:18
Level two headline I've changed it to a light grey, which you can see.
-
3:24
One that says teacher.
-
3:25
And level four headline, I've changed it to a dark purple.
-
3:29
And you can see that in What I do and What I enjoy doing.
-
3:32
You should change these colors to whatever makes you happy.
-
3:37
We've covered a lot of new information about text editors and CSS.
-
3:41
Let's make sure you're picking up everything I'm
-
3:44
putting down with a quick quiz.
You need to sign up for Treehouse in order to download course files.
Sign up