- Introduction to My First Web Page 4:32
- Changing Your HTML 3 objectives
- Changing Your CSS 2 objectives
- Text Editors and External Style Sheets 3:46
- Text Editors and External Style Sheets 5 questions
- What's New in Your HTML 2:52
- New HTML Features 3 questions
- Editing an Image Tag 2 objectives
- Comments, Selectors, and Syntax 2:36
- Comments, Selectors, and Syntax 3 questions
- Color Keywords, Hex Colors, and Font Families 3:13
- Color Keywords, Hex Colors, and Font Families 5 questions
- Wrap Up 0:11
- CSS Review 5 questions
Preview
Video Player
00:00
00:00
Text Editors and External Style Sheets
3:46In 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.
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