Organize CSS with Comments

The next step is to pick fonts and resize them, but we should organize our CSS before we continue. It will only become more complex, so we should add some comments and sort our declarations accordingly.

Vocabulary

Comment - A reminder or visual cue in computer code that's meant to be readable by programmers. Comments are typically not interpreted by the browser and shouldn't impact a website's function in any way.

0:00

Our webpage is starting to take shape.

0:02

Adding some color has certainly made it
bit more interesting.

0:06

Now we're going to spend some time
learning about how to set

0:09

font sizes and then include custom fonts
from a third party service.

0:15

Before we begin we should organize our css
a bit.

0:19

It's starting to get complex and I don't
want you to lose track of where we're at.

0:25

To organize

0:25

things, we're going to add some CSS
comments.

0:30

A comment is basically a way for us to
write a

0:33

note in the code without it actually being
interpreted by the browser.

0:38

Site visitors won't be able to see these
comments on

0:41

the site either unless they view the
source of your webpage.

0:45

It's a good idea to keep your code

0:47

well commented because comments can serve
as reminders or

0:51

visual cues about your thought process
when writing code.

0:55

This makes it much easier to maintain your
code later on and fix bugs if you need to.

1:01

So, let's go ahead and write our first
comment.

1:04

Down here on the site body, I'm going to
write a forward slash and then a

1:10

star, and on my keyboard I just have to
hit Shift+8,

1:16

although that might be different on your
keyboard.

1:20

And then inside of this, I'm going to type
site body.

1:26

And I can type whatever I want here,
because

1:29

this isn't going to be interpreted by the
browser.

1:34

So if I save this and refresh the page, it
shouldn't change anything at all.

1:39

So, again, the syntax

1:41

is a /, a *.
Or an asterisk

1:47

and then we write our comments inside of
here and

1:51

then we close the comment with a star and
another slash

1:56

so you'll see that the opening and closing
remarks here are

2:01

actually opposite one another.
Comments don't necessarily have to be

2:06

on their own line either.

2:08

We could put comments along side the end
of the line of code.

2:13

So for example I could copy this comment
and I could put it right here.

2:19

And it's not going to effect the code in
any way.

2:23

Now, let's go ahead and comment the rest
of the colors that we added previously.

2:30

So,

2:32

up here for our header.

2:34

We want to say that this is going to be a
green

2:38

header and this will help us remember what
colors we put here.

2:42

And I'm just going to copy this comment
and just edit its contents so we can type

2:47

a little bit faster here.
Just above our navigation, I'm going to

2:52

say that this is the nav background on
mobile devices.

2:59

Right here.
This is the logo text,

3:04

so let's type that, logo text.
We've also colored our

3:10

links here.
So, let's type that

3:14

out, and then also we have our nav links.
So let's say that.

3:19

This is the color for a nav link and then

3:24

finally we have the selected nav link
color.

3:30

So let's type that out, selected nav link,
great.

3:36

Now normally we wouldn't add a comment to
every single CSS rule but in

3:41

this case it will make it easier for us to
change the color scheme.

3:45

I strongly encourage you to come up with a
color scheme of your own

3:50

to get more practice with css colors.
Now let's create

3:55

a few multi-line comments to help break up
our code into readable chunks.

4:01

So what does that look like?

4:03

Well, let's head up to the top of our code
here and I'm going to,

4:09

open a comment and then close it, and I'm
going to type out a bunch

4:16

of stars here or asterisks, and then I can
do the same thing down here.

4:23

And inside of this, I can type a word like
general.

4:28

This first section I've labeled general.

4:30

Because it's some very basic styling that

4:32

applies site wide at a fairly pervasive
level.

4:37

As you can see, this is a perfectly valid
comment, because it starts and ends

4:41

with an opening and closing slash, and an
asterisk at each side.

4:47

Now, I actually want to include a very
specific number of

4:50

asterisks here, just sort of as a point of
style, so

4:53

I'm going to copy some code from offscreen
here, and then

4:57

paste it in, and you can add however many
you'd like.

5:01

However, you would like your coat to look.
And so, that's something that's totally up

5:06

to you.
Now, I'm going to copy this.

5:10

And I want to add another one of these
just above our header.

5:16

So, let's just do that.

5:17

And we'll call this one header.

5:20

And I usually like to have three spaces
before each one of these.

5:26

So I'll do that.

5:28

And, actually I think I want to call that
heading, instead of header.

5:32

There we go.

5:33

And, finally, I'm going to add one down
here towards the bottom.

5:39

And I'm gonna call this colors.

5:41

So that will go just above all of the
colors that we've added here.

5:47

And we have some other styling up here and

5:50

we need to kinda reorganize our CSS a
little bit.

5:53

So I'm going to move this link color
further down.

5:58

So I'll put that just after the h1 and h2
here.

6:03

That's good.

6:04

And let's see, this navigation actually
kinda

6:07

comes a little bit sooner in the page.

6:13

So I just wanna do that and then I also

6:15

wanna keep all of these links together
just like that.

6:19

Actually, I think I'm gonna put the site
body

6:23

up at the top here.

6:26

Just so that it's consistent and kinda has
the site body as the first

6:32

thing in our list of colors since that's
the most broad selector that we have.

6:38

And then we need to move, let's see our
logo here

6:44

underneath our heading.
And again I like to have three spaces

6:49

before the start of one of these multi
line comments so we'll

6:53

do that and then I think we can leave our
general styles alone.

6:59

And I think in our general styles I'm
going

7:02

to just flip the wrapper and this anchor
element around.

7:07

There we go.

7:08

Now, this should have a very minimal
effect on the outcome of the site,

7:14

so if you don't rearrange these things as
I

7:17

have done, your site should probably work
the same,

7:21

but again because of CSS's cascading
nature, you may

7:26

want to go ahead and rearrange them as
I've done.

7:29

So, just to review, under the general
section

7:32

we have the wrapper ID and our anchor
selector.

7:36

Under the heading, we have our logo ID
selector.

7:40

And then under colors, we have our body
colors, header colors, navigation