[MUSIC PLAYING]

DOUG LLOYD: So let's take one more video to talk about one more language. This time
we'll talk about CSS. So CSS, which is short for Cascading Style Sheets, is another
language we use when constructing websites. Think about it like this. If HTML is
what we use to organize the content we want to put on our page, CSS is the tool
that we generally use to customize how our websites look, and how the user
experience really is, interacting with our website.

Similar to HTML, CSS is not a programming language. It doesn't have logic. It

doesn't have variables. It doesn't have any sort of that flow related things that C
does. It's a styling language. And its syntax is pretty simple, and just describes
how the elements of our page have certain HTML elements should be modified. To that
end, if you haven't yet watched our video on HTML, or are unfamiliar with HTML
generally, you may want to take a look at that first, because this discussion of
CSS is going to depend on some knowledge of HTML.

So here's a really simple CSS stylesheet. Even if you've never programmed with CSS
before, I'm pretty sure you can figure out exactly what this stylesheet does. What
does it do? Well, applied to the body of our web page, everything between body tags
on our HTML, and it sets the background color of that page to blue. Well, it's a
very simple stylesheet. It's actually very human friendly language, CSS. So even if
you've never used it before, you probably could guess what that did. In fact, if we
loaded a page, where this stylesheet was embedded somehow, the background color of
our page would be blue, and not the standard white.

So how do we build stylesheets? Well first, we have to identify a selector. In the

last example, that selector was body. Then we have an open curly brace, and we're
going to begin defining the stylesheet for that selector. In between the curly
braces, we just have a list of key value pairs. The previous value pair was
background color blue semicolon, but we could do more and more of these. You could
have multiple things applying to that tag, that selector body. Each one of them is
separated by a semicolon, and we call each one of them a declaration, a CSS
declaration. When we're done with all the styling we want to apply to that
particular tag, we just have a closing curly brace to end the stylesheet, and we're
done defining the stylesheet for that particular selector.

What are some common CSS properties? Well, maybe you want to put a border around
something. So you can say, border, that would be your key, and then your values
would be, what style, color, and width you want it to be. So the style could be a
solid line, a dotted line, a dashed line, a ridge line, which would be wavy line.
Maybe you want to have it be blue or black or green. Maybe you want it to be 1 or 2
or 10 pixels wide. You can specify all of those things. Maybe you want to set the
background color of your page in a particular way. We already saw that, setting the
background of the body to be blue.

Then you can use a key word, so CSS has certain colors that are built into it,
blue, green, black, a very simple colors we know. But you can also specify any hex
color that you'd like. Recall that colors can be identified by a set of three hex
numbers from 0 to 255, rg and b, the red, green, and blue component. And so we can
specify any color we want by, instead of using blue or green or black, using pound
and then six digits of hex, and that would give us the six digit color. So that's
the background color.

We also have the foreground color, which is usually going to be the text of your
page. And you could similarly do that with key word and or six digit hex. So you
can specify any color you want for the text of your page against a particular
background color, up above. You can also change and deal with font, and the way
text is rendered on the page.
So you can change your font size. You can use key words, such as extra, extra
small, or xx small, or medium, large, and so on. You can use fixed points, 10
point, 12 point, and so on. You can use percentages, 80%, 20%, where 100% is the
default font size, which is usually going to be something like 11 or 12 points. Or
you can even base it off of the most recent font size. If you just wrote something
and you know what you want is for it to be smaller, but you don't know exactly what
size you want it to be, well, you can just say, font size smaller. And it will base
off of the, just up above, it's font size. And you can get smaller or larger. So
there's a lot of different ways to specify font size.

You can also specify what font family you want. If you have a particular name,
there's a way in CSS-- we're not going to talk about it here-- to define a very
specific font and embed it into your page. You can also use generic names. There's
a lot of web safe fonts that are pre-defined in CSS. And if you are a user of
Microsoft Office in the last 20 years, you're probably familiar with a lot of these
web safe fonts already, Times New Roman, Arial, Courier New, Georgia, Tahoma,
Verdana, and so on. Those are all considered web safe fonts. And actually, part of
the reason they came to be was to be used to make web-- every page had access to
this default set of fonts with various serifs, and all this font stuff we won't get
into, but these are usually accessible in your CSS, even if you don't otherwise
define the fonts. Lastly, you can align your text, instead of it being, by default,
aligned to the left, you could align it to the right, or you could align it
centered, or justified so that it hit both margins. So those are all options you
can use to change what your text looks like, and how it's displayed on your page.

Your selectors don't have to be tags only. We previously saw a body tag selector,
and tag selector does look just like that. You name a tag, and then you define a
stylesheet for that tag. But you can also do something called an ID selector. An ID
selector looks pretty similar. But notice, that now I'm not using an HTML tag, I'm
using, in this case, #unique, or hash unique. If you recall from our video on HTML,
we talked about how tags can have attributes.

And one attribute that applies to pretty much all HTML tags, but we didn't talk
about it, is something called an ID tag. So this particular CSS would apply only to
HTML tag that has a very specific ID, that you've named. So if you have somewhere
in your code, somewhere in your HTML file, a tag and you specify as an attribute to
that tag, ID equals unique, this particular stylesheet here will only apply in
between that tag with the ID of unique.

You can also do something called a class selector. So in addition to having ID

attributes, you can also add a class attribute to HTML tags. And when you use a
class attribute, it can be applied to multiple tags. So if you have several things
that are similar, maybe you want to say, open tag blah, blah, blah, blah, class
equals students. And then this particular stylesheet would apply to every tag whose
class is students. In this case, we'd set the background color to yellow, and we'd
set opacity, which is a tag we didn't talk about, but just deals with how
transparent something is, to 70%, in this case.

There's two options for writing stylesheets. You can write them directly into your
HTML by placing the stylesheets in between style tags. And those style tags go
inside of the head tags of your web page. The perhaps more preferred way to do it
is to write a separate .css file, and then link it into your document using link
tags. Link tags, again, are different from hyperlinks, if you recall from our video
an HTML. And link tags are how we pull in separate files. It sort of like the
equivalent of the #include for web programming.

So let's take a look at table.HTML. If you recall from our HTML video, I showed an
example of a very simple multiplication table that looked pretty ugly, and maybe
there's a way to make it better with CSS, to make it actually look more like a
multiplication table, or something that isn't just stuck together with no actual
division between the rows and the columns. So let's head over to CS50 IDE, and take
a look at how CSS can, sort of, tweak what we started with before, and make it
something a lot better.

So we're in CS50 IDE now, and if unfamiliar, we'll pull up in this table that HTML
page. Table.HTML basically just defines the contents of a multiple-- it was
supposed to be a four by four multiplication table. It's pretty straightforward.
And we would think that it would look pretty well organized. But in fact, when we
preview this page, we see that it's kind of ugly, right? Clearly we have rows and
columns here. There some sort of separation. But it's not a meaningful separation.
We're not actually getting too much information here. And there's no separation
between the rows and columns in terms of horizontal or vertical rules. We could
probably make this look a little bit better. So let's try. So I'm going to close
this tab up here. And I'm going to close my table.HTML, and I have another version
here called table2.HTML. We'll open that up. The body of the page is pretty much
the same, but I've changed a little bit at the top. And I'll scroll up here. Notice
that this time, I'm using embedded style tags. I've opened a style tag, and I'm now
defining a CSS stylesheet just inside of it. I have a stylesheet that says, table.
That's my tag selector. I'm not using dot or hash, which I would be doing if I was
using an ID or a class selector. I have a tag selector here-- table. This style is
going to apply to every table tag. Apparently I want to put a one pixel wide, solid
blue border, inside my table. That sounds like it would probably help the
situation, right? We're going to have things look a lot better. So this is fine.
Stylistically, I've just embedded my stylesheet in here. It's certainly an
acceptable way to do it. Let's see what this looks like. So I'll go back down here,
and I'll will preview my table2.HTML. Well, that's not quite what I wanted, but it
is exactly what we asked for. We said that this style is going to apply to our
table. Our table now has a one pixel wide, solid blue border around it. We're not
actually getting at the table cells. We're just getting at the table. So CSS
worked. It has applied a stylesheet to our table. But didn't quite do what we
wanted it to do. How do we get to do what we want it to do?

Well, let's take a look at one more version of this in table3.HTML. So I'm just
going to close these tabs. I'm going to go back over here to my file tree, and open
up table3.HTML. Again, it's going to look pretty similar here at the beginning. But
notice, this time, instead of using a stylesheet embedded right in there, I'm going
to link in a stylesheet using the link tag. So I'm apparently linking in a
stylesheet called tables.CSS, and this well equals stylesheet just means-- well,
what is this file relative to what I'm doing-- is a stylesheet that I'm using for
my page. So if I really want to see what I'm doing with the CSS here, I need to go
open that table.CSS file as well. So we'll go back over here again to our file
tree. There's table.CSS. We'll pop it open. Now we're seeing a little of the CSS.
Apparently, I have a couple of things going on here. I apparently want to put a
five pixel wide, solid red border, around my table. We already know that that's
going to just go on the perimeter. We saw that in table2.HTML. With each row, I
apparently want to specify that the row height is 50 pixels high. So for every row,
remember that's what the tr tag does, I'm making it 50 pixels high.

Lastly, I have this comment. And this is how we make comments in CSS. It's very
similar to seize block comments syntax slash star. All the text you want. There's
no slash slash though in CSS. For short inline comments, we have to use this
particular format here. It looks like I'm doing a lot of things in my td tags.
Remember td tags, or table data, which really are just the columns inside of our
rows, and apparently for each piece of data in my table, I want to set the
background color to be black, the color to be white, color is foreground color. So
this is going to be the text of my page. I want big font, 22 point font, and I want
it to be of the font family, Georgia. So I'm not going to have the default font.
I'm going to specify Georgia, which is one of those web safe fonts that we've seen
before. I want my text to be aligned centrally, in the middle of the box, I don't
want it to be left aligned or right aligned. And I want my column width to be 50
pixels wide as well. Let's take a look at what this looks like, and see if this is
maybe an improvement. So I'm going to go to table3.HTML, which recall, includes
table.CSS as a link, and we'll preview it. That's a lot better, right? This is
actually starting to look a lot more like a multiplication table. I have that red
border around my table but now I also have specified that each row is 50 pixels
wide, or it's 50 pixels tall-- excuse me-- each column is 50 pixels wide. The data
in each column, and only the data, has a black background. So that's why those
white lines are there. Because the space in between all of those cells, it's not a
border in and of itself, it's just I'm only filling in the cells, which actually
makes the borders of the table, which apparently did exist all along, it was just
thin white lines. Now they're visible. Now they pop off on the screen. And so this
is a very simple stylesheet that I've applied, and now my table looks a lot more
like a four by four multiplication table, instead of a just jumbled mess, where
everything is clearly rows and columns, but not super well organized. We're really
just scratching the surface of what you can do with CSS here. Fortunately the CSS
documentation is pretty straightforward. You'll use several of its attributes,
fairly frequently. The ones we talked about earlier in this video. There are
several that you probably won't use all. And that's fine, too. But just know, that
there's a lot of documentation out there. So even if we didn't cover everything,
you're certainly not left on your own. But CSS is really fun to experiment with.
And I would strongly encourage you to play around with your web pages, and see how
you can make them look and feel to improve the user experience of visiting your
page. I'm Doug Lloyd. This is CS50.