All language subtitles for cccss-720p-en

>> [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.