Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up