Check out a free preview of the full Introduction to CSS course
The "Floats Solution" Lesson is part of the full, Introduction to CSS course featured in this preview video. Here's what you'd learn in this lesson:
Jen shows off a few student creations from the previous exercise.
Transcript from the "Floats Solution" Lesson
[00:00:00]
>> Jen Kramer: I wanted to show you some amazing stuff that those of you who have been working on online through our lunch break. So this is Corinne here and Corinne has done a really cool thing with her article. So notice that she rounded the corners here. That's actually something I didn't mention.
[00:00:19]
It's in the notes. She's rounded the corners of a picture here of St. Nicolas Cage down here a little bit further. She's got a cool thing with her quote here. Look at that she turned it into a pill. This is done with rounded corners also. So I'll show you that trick here in just a second.
[00:00:36]
And then we have crazy Nicolas down there on the bottom. So, she's doing some fun things here with borders and margin and floats and so forth. So well done Corrine, very nice. And we have Brandon here, and Brandon has been working on his book chapter, and he has some cool effects here too.
[00:00:57]
So first of all, notice that what Brandon's done over here on the side. He's actually put in a navbar, how cool is that? So he's actually putting together a website about some of the pages that he's been making here in class, and he's got a little navbar over here.
[00:01:13]
And he's been styling some stuff here too. Take a look at this, pull quote right here. Now look what he did. We have a fat line here on the left side and then something thinner all the way around it. How might we go about doing that? First of all what property did we use in order to put that there?
[00:01:32]
>> off screen: Border.
>> Jen Kramer: Border, right? And then, so that's gonna put a line on all four sides, and then what? Yeah?
>> off screen: Border weight.
>> Jen Kramer: There is no border weight.
>> off screen: Radius.
>> Jen Kramer: [INAUDIBLE] left.
>> off screen: The left border then we gonna make it what?
>> Jen Kramer: Five pixels.
>> off screen: Pixels or something.
[00:01:53]
>> Jen Kramer: It's like five pixels or something right, even though the others are one. On the left side we're gonna make its width something more like five pixels instead of one pixel, right? And that's the way you would come up with that sort of effect. Brandon didn't actually have to put that border on all four sides.
[00:02:10]
He could have just put in the left border, right? Correct, a left border, correct? That would have been a little bit that would have been nice also. This nice fat left border, kind of a cool sort of looking effect. Alright? So he's got a nice picture of a camera down here.
[00:02:28]
And he's used that same styling consistently through here which really ties things together very nicely visually doesn't it?
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops