Code WalkThrough: Styling with CSS

Loading...

Do curso por University of Michigan

Building Web Applications in PHP

543 classificações

University of Michigan

Building Web Applications in PHP

543 classificações

Curso 1 de 4 em Specialization Web Applications for Everybody

In this course, you'll explore the basic structure of a web application, and how a web browser interacts with a web server. You'll be introduced to the request/response cycle, including GET/POST/Redirect. You'll also gain an introductory understanding of Hypertext Markup Language (HTML), as well as the basic syntax and data structures of the PHP language, variables, logic, iteration, arrays, error handling, and superglobal variables, among other elements. An introduction to Cascading Style Sheets (CSS) will allow you to style markup for webpages. Lastly, you'll gain the skills and knowledge to install and use an integrated PHP/MySQL environment like XAMPP or MAMP.

Na lição

Cascading Style Sheets (CSS)

We briefly cover the basics of cascading Style Sheets (CSS) that allow us to style the markup for web pages.

Cascading Style Sheets (CSS)10:58

Code WalkThrough: CSS Basics13:27

Styling with CSS12:35

Images, Colors, and Links in CSS14:59

Code WalkThrough: Styling with CSS25:51

Conheça os instrutores

Charles Severance
Associate Professor
School of Information

So welcome back, now we're going to take a look at some more examples.

The one thing we're not going to look at is exactly how this navigation bar works

at least until a little bit later.

So the next thing we're going to take a look at is how fonts work and

there's a couple of ways that you can put fonts into a file.

There are default fonts that every browser is required to produce like Serif,

Sans-serif, Monospace, Cursive, and Fantasy.

You don't exactly know what's going on but

they're often used as fallback fonts and so you can have those.

Any font that is on the system like Arial or Helvetica, and so if you're going to

use Arial, not all systems have Arial, although most of them do these days.

And you have to have more than one font.

Now, another thing that's really common these days is to include a font somehow,

you find out about a font and here's a Lato font and

you go look it up on the web and you find, include this.

And so I included this link because I found this really cool font Lato and

this extends the browser, the browser then learns about this font,

it downloads the font, caches them and keeps them in the browser.

And then I can make a font that's Lato but

just in case I'm off the Internet when I can't download this thing,

I have sans-serif as a fallback for Lato, so Lato is a fancy font, etc, etc.

So there's Arial and built-in fonts, etc, etc, and so that's how fonts work.

Colors, there's a lot of cool stuff about colors,

there's a couple different things, ignore the nav for the moment.

I'm just using span tags here,

there's some default colors in the earliest of browsers, these days we have

all these fancy ones and you can go look these up and just google for HTML colors.

And there's a bunch of names and then they're consistent across browsers.

But there's 12 or so

really solid names that are in all browsers since the beginning of time.

But more modern browsers have a better palette of colors,

although really good graphics artists want to have much better control of colors.

And so this is the pound sign says that this is a hexadecimal number and

it's got two digits, hex means they go all the way up to F.

So A through F are numbers, 8b is the red level, 45 is the green level,

and 13 is the blue level, and so this is a brownish color.

And then there is what's called web safe colors,

this ends up being 884411, but it sort of reduces

the number of potential colors if you were mixing colors from various sources.

And then in HTML5, you can see this color picker when you have a form,

which we'll talk about in a bit.

It's a color form for modern browsers and then you can pop up with this button,

a color picker and I've got a little thing to print out what the color would be.

And so when I pick the green, it basically puts 00FF00, that's red,

green, and blue, it puts that into this thing which then the program could use,

could read this or JavaScript could read it or a server code could read it.

But right now, we're just kind of playing with the picker and we pick a different

color and so that magenta is all the red, none of the green, and all of the blue.

And orange is all the red, some of the green, and none of the blue.

So those are all just really strong colors and so

that's what's called an HTML Color Picker.

Anchor tags, in the old days, anchor tags were kind of funky.

They were blue if you hadn't yet

visited them and they were purple if you had visited them.

And so this one I've obviously clicked on.

And so we have a whole series

of styling mechanisms that we can have if we take a look at these.

I have put these all in the inside of an id tag of cool,

so this is basically saying, find the id tag of cool and

then style anchor tags to make them a font-weight bold.

So let's take a look here, so I've got one paragraph that has this one here and

then I have a paragraph with an id tag of cool.

And that's basically so I don't have to style,

usually you wouldn't say I’m only styling the anchor tags inside of.

I'm only styling the anchor tags inside a tag that has an id of cool but

that way I can have the default on this one.

That was my way of keeping the default.

So normally you would just say a, so

a links is red, if it's visited it's orange, and

so this one's been visited, so you don't see the red, that means it's unvisited.

Hover, you can change it, so you notice when I hover in,

the text-decoration goes away, the underscore goes away,

and I have a text font color of white and a background-color of navy.

And then there is one last moment and I click on this one, and I'll click.

There's one last moment that's really hard to catch and that is the moment of active.

If the web was slow and you clicked on it, then it would tell the user.

In the old days, this made more sense that it would turn red and then blink away,

I don't know if we'll even see it, you kind of saw, you sort of saw it.

So there was a color while you click on it, yeah, there it was.

You might not see it in the screen but

that's what the active means is that you've clicked on it but

it hasn't yet been retrieved and then a moment later the whole page goes away.

Another thing we can do is we can play with images, okay?

And so here is an image, one of the things that's

really fun to do with images is float them to the right or float them to the left.

And then what happens is is that the image text

is drawn around the image, so it wraps around the image.

You'll notice where I floated this left,

I kind of got rid of everything, I floated it left before the h1.

And so what happens is the h1, top of the h1 and

the top of the image line up and then all the text afterwards wraps around it.

And so you'll notice that I've got the image first and then the h1 second.

And the float sort of disconnects the image from the normal line of flow,

floats it over, and then takes this next thing and the next paragraph and

saves the space for the image and shoves everything,

shoves the margin over, so that it comes over here.

Now once you start floating images, you gotta learn about this clear=“all”,

because if we want this next paragraph, like this one,

we don't want this paragraph for whatever reason to be on the image, now,

if it goes far enough, you see this paragraph

here moves back to the left margin and then this next one starts there.

But if the browser is wider and the text is, and there's not so

much text, we don't want this to be up in here.

And so you say br clear=“all”.

So between this paragraph and this paragraph, we do br clear=“all”.

And you can put images right in the middle of the text like a character,

you don't have to have them by themselves.

And you can even make an image that's a clickable link and so

you can click on that image.

Now, C in CSS stands for cascading style sheets and so the idea is is that the tag

that's closest has more precedence than a further away tag unless you say important.

Okay?

So here we have some style.

Here we have a body tag,

a border-style of dotted, red, and red border-color that's red and !important.

And border-width is 5 pixels,

background-color, which is kind of a grayish, that's that gray.

When extra padding, so

we've got to put some extra padding all the way around it in extra margin.

And so, So

if we take a look at this, we take a look at this paragraph right here,

we see some things and we take a look at what we've got.

So we inherited this,

we got a border-style of solid. It wants to have a border-color of green.

But it doesn't because, it says the border-style is solid.

So the border-style of solid is down here in this second style tag.

So the second style tag has precedence, because it's closer to the paragraph.

And so, we tried to say border-color green, but that one was overridden.

So otherwise, this would have a solid green border,

except that this red !important is up there.

And so the red important wins, and you can see it really easily here,

that this was overridden, and

this is the one this border-color from the previous one is taking precedence.

Okay, and so this is the second one, and

it would normally take precedence over this one, except that this

important is sort of like it is overriding the one that's closer.

So another example of closer is the style tag, okay and so here we go.

We're putting this, I mean style attribute.

We're saying border-style equals dashed, border-color equals blue.

And so the border-style equals dash holds on.

But our attempt to make the border-color blue is overridden again

by the red important, right, so important is up above that, okay.

And so this dashed is winning and this blue is not winning,

because there is an overriding red above it.

I mean, there's an overriding red important above it.

And so if you want to override an important tag,

yay, we override an important tag right here.

We basically say, I want a border-style dashed,

come over here border-style dashed and

I want the border-color to be blue and this is important.

So now this one's closer and it says, important.

So among all the important ones, the closest important one wins.

And so now we see that the border-color actually takes here, and we are overriding

the far away, this one here, from further away got overridden, because of this one.

And so, you can do that.

Now, In general, while I've shown you how important works.

You shouldn't do too much with important,

because usually you're taking CSSs from other places and you're patching it.

And you can end up with really inconsistent looks and

feels with important.

Usually when you see important it means, kind of something's wrong and

your fighting with the framework or something else.

So, let's take a look at some blocks.

And so let's see background color, my h1 is colored blue.

And I'm going to put some padding in the margin, and so div, p,

and h1 sort of live in a box.

You have sort of like the actual, so, let's take a look and

see this paragraph right here, that's probable the thing to do.

This is just a plain old paragraph, nothing special, right?

There we go, that's a paragraph right there.

So, So let's talk about the padding and the margin, right?

So working from the inside out, there is the actual text and it's wrapped.

So if this, if I change the width of this, this whole block changes, right,

it gets taller and narrower.

But at some point the inner part, this inner part right here is,

however large it becomes, and in this case, it's 318 x 38 pixels, right?

And then what happens is, we sort of work from the out, work from the inside out.

So I'll go down here and see the box model.

So the inside of this, the actual text 619 pixels x 19 pixels.

And then I've asked to add 10 pixels of padding, and

that is between this sort of text and the border.

And then the border itself has a width, and I specified that border-width.

Right, I said I want a 5 pixel border width, and so

the border width takes up 5 pixels.

And then, there is, outside of that, there is margin, and so margin is space.

Notice that the padding and the text itself has the background of the block,

border has its own color and then,

the margin has the background of the color of the background document.

Okay, so this is the margin here, it's the color of the background document, right.

So content, padding, border, margin, and then, but

the padding in here, it's from the text in the box from a background and

the margin here, it's from the background document.

And you can have different background colors, etc., etc., etc.

By the way, this is an ordered list that we've got going on right here.

Okay, so that's CSS boxes.

We can change the sizes of these boxes, it's a little tricky so, and so

here we have, auto sizing div, where we're not mentioning anything about the height.

If we take a look at the box model here we see that,

this one is simply the size of the text, plus the padding,

plus the border, plus the margin, and that's sort of how that box gets sized.

You can say, that you want to set the size of the box, okay?

So I'm going to set that to be 3ems.

3em is three characters, but if you look, I have too much in here.

And so you'll see that even though this box is three characters tall,

it's four lines, and so the three would fit, but

the fourth one doesn't, and so it just overflows.

You can also, so it's 3ems.

It's good to set sizes and ems when you can,

because then if someone makes the screen larger, oops, didn't mean that.

This one something makes this larger or smaller.

Now the problem is, well, I don't know about it if we'd call it a problem but,

in the old days, if you set a height of pixels and you zoomed the screen, the box

where you set height and ems would zoom, and the one you set in pixels wouldn't.

But they decided to make zooming work, otherwise, so

many people made boxes in pixels that they made it so

that the zooming would pretend the pixels are really ems.

So it kind of converts pixels to ems, but you really technically,

you're supposed to avoid using pixels when you really mean characters.

If you want three lines, don't look at your font and say,

I'll make this 40 pixels in order to do that.

And again, we still in this box, we still have overflowing text.

And so we have a couple things we can do when we want to change the overflow.

We can tell a box that we would like the overflow to make a little scroll bar.

And so here is that same stuff, and as you can see, we've got a little tiny baby

scroll bar, and it didn't sort of blop out of the box, right?

And even if the scroll fits, you see you get little scroll bars, but

you can't scroll it because there's only one line there and it fits in a box.

And then another thing that you can do is, You can, just say chop it off, all right?

Chop it off.

Now one thing with some JavaScript, you can put a little more here and

that expands the box or it pops a bi-log or

whatever, but we're not going to worry about that for now.

For now, we're just saying overflow hidden means, lay this out as much as you need.

And then, throw this text away.

It's just not there anymore.

Like, where did all this, all this text go?

But it doesn't show it because we told it to chop it off.

Okay, so on to the next one.

You can move these things around.

This seems a little messy.

There we go, let's make this a little different.

Okay, so by default, I'll show you the HTML in a second for this.

Or maybe I'll just do view source.

Let's do view source.

Okay, so if you just say div, div, they just follow after each other.

And I've given them border because,

to make them a little picture I've given them some borders, some padding and

some margins just so they don't touch each other too much.

So by default, blocks just, so I got a little border both on all sides, and

a little space between them, kind of nice.

So however big they get, this one gets bigger.

And I put a width on them just so

that they wouldn't move around, there's a width on it right there.

10 m's, 10 characters wide.

So they just follow each other.

And then you can say, okay, this block right here,

this number 3 would lay out right here, but I have told the number 3 block.

I've told the number 3 block that I want to move relative to where you would

normally be, 20 pixels to the left and 20 pixels down from the top.

And so this block, it lays out exactly as if it belongs right here and

then we shoved it over and moved it down.

And it came over top of the number 4 block.

And so there you go, and so the text afterwards,

this number 4 block, just comes next.

And it's basically, it's as if this laid out without the position relative and

then this came afterwards.

But then we sort of just shifted it.

And that's why this overlaps because this corner here

is where 3 would have finished with a normal layout.

So you got to be careful with relative.

I mean, you don't usually want to make it so

that they sort of blop on top of each other.

Okay, and so now we're in 4, and then we're going to look at 5 and 6.

And so 5 is what's called fixed text and you'll see the 5 comes right here.

But because I've got this as position fixed,

this is fixed relative to the window.

So it's 20 pixels up from the bottom and 30% of the way from the left margin.

So you can see that this is 30% of the way from the left margin.

And the bottom of it is 20 pixels up from the bottom.

And you'll see that, that green box never moves, and

that is because the fixed text is relative to the window.

And that's how we actually get this little link that never goes away.

And so there's a link that never goes away.

Absolute text, it's, I don't know why they call it fixed and absolute, but

absolute text is a little bit different.

It's relative to the parent element, so in this div right here,

the parent element is the body tag.

And so, when it's saying I would like this to be 40 pixels from top and

30% of the way form the left, that means it's relative to the body tag.

And so the body tag starts up here, and

so this has been sized 30% from there and whatever, 40 pixels down.

And notice that, that one goes with the scrolling, right?

So that one goes with the scrolling.

And you'll also notice that between 4, 5 and 6, it's as if there's nothing here.

But if you look at the document, 5 and 6 are sitting there, and

that's because they are plucked out of the normal rendering stream, and so

they don't take up any space between 4 and 7, so

they don't count in sort of the normal layout as the page is being laid out.

And so [COUGH] here's number 7, for

example, actually number 8.

So here's number 8, and so

this is positioned relative with the left of -1000 pixels.

And so in a sense, this stuff right here has been shoved off the screen to

the left, and so that's how we often will put text on that nobody sees.

Just move it to the left.

But it takes up the vertical space anyways.

because it was just relative.

It would have normally laid out here but the left shoved it over there.

And so that's basically [COUGH] some layout.

And so, now we're going to talk about z-index.

Let's take a look at the source code here.

And so, a z-index is the ability to, what happens when things overlap, okay?

And so, this is a div.

Number 1 has a z-index of 100.

Number 2 has a z-index of -100, 0 is sort of the background document and

it works out pretty straightforward.

And I'm just moving these so they have to lay on top of each other.

And so you see this one here is -100, so it's kind of behind everything.

This one is positive 100, so it's in front of everything.

And this number 3 is, yeah,

I just put that there to be in the original document,

with no z-index whatsoever, and so it's behind

this thing that has a z-index of 100, okay?

And so that's z-index, like this little note way over

here by the right margin says, z-index is kind of tricky.

Everyone tries to be on top, and you'll put z-index of 100 and then you'll find

that the navigation put itself at z-index of 1000 or something like that, right?

And so, z-index is hard to debug and hard to fiddle with, but

at least now you know that z-index is there.

When things look weird and they're overlapping in weird ways,

z-index is what you're taking advantage of.

And so now we'll take a look at kind of how this navigation works, okay?

And so here's a couple things that the navigation does.

The body of course is font family: arial, san-serif.

The navigation bar itself, I'll do a view source on this so

we could look at the navigation bar.

The navigation bar itself, this block, it's a block tag, right?

That has a background of light gray and I've given it a height of 3em, so

it's like three lines.

And if I zoom this page in and out.

Right, that gets bigger and smaller.

Get back to 100%, it's three lines tall, and

I guess I didn't need to stay Arial or sans-serif,

I did that in case someone else wanted to change the nav text I guess.

So then I have within, I want ul tags within the nav, and that's one of the nice

things about this nav being its own tag, I can style just the uls inside here.

Okay, and so what I'm doing here is I'm saying I don't want any

little circles, little dots, little bullets.

I don't want any of those.

I want to take away any padding that it has by default.

This is one of those things that this ul inherits.

Let's go down here and take a look at this and you'll see that this ul right here.

So what's happening is this is the things that I've said in my CSS.

And I'm overriding some default things.

But it's normally would be display.

It's a display block that's okay.

And so I overrode the list type style.

And continuing on, the list item inside of nav,

that's what it is, nav in list item, I wanted to make that.

So let's inspect this guy right here, Inspect.

So if you look here, and I have a class of back and

so I'll have this position absolute which is relative to the parent right here.

And I have it, 20 pixels to the left of that upper left hand corner and so

that's how this comes over here.

And then I have it colored dark blue because it's a nav, an anchor tag within,

An anchor tag within li tag within a nav.

That's what this is saying.

darkblue text-decoration of none and so that's where I get this color blue and

no underlines.

And then, this is the .back, and so I use the back class to just push it,

position this right here and then I use the forward class to

position this relative on the right, 20 pixels from the right.

And so that's how I make the navigation bar work.

And CSS is really a lot of work.

We learn a lot about CSS and this is just a really short introduction

to get you a sense of what the basic mechanics of CSS are.

Thanks for watching.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play