Placeholder Image

Subtitles section Play video

  • All right.

  • Hello, world.

  • This is CS 50 on Twitch.

  • My name is Colton Ogden.

  • And today we're going Thio, do something that I'm a little less experienced that then the other things that typically doing stream s So what we do here on the channel is usually implement something from scratch.

  • So I am more experience with game development, So usually I make games from scratch.

  • However, this year, as I've said in prior streams, one of my goals is to get better at Web development.

  • And we have a bunch of staff members that are also much better skilled at Web development.

  • But today I'm taking it on myself.

  • Thio, usurper The last tutorial I did, which was on html sort of.

  • You know, the foundational technology behind Web pages, the skeleton or the now NHS that make up our Web sites.

  • We'll be looking at CSS today, So if you tuned in for the HTML stream, you probably saw that the pages we were implementing last time with Tom Tom ballot or who happened to be here from Japan for a brief stint, they were a little bit on the austere side.

  • Everything is sort of black and white.

  • We had text, we had images and that was pretty much it.

  • You know, we had a couple of fun little exercises and demos there to showcase things like gifts, which are animated images.

  • But everything was fundamentally very plain, very black and white.

  • No styling whatsoever, top to bottom, just sort of designed, you know, as the Web was way back in the day just to sort of broadcast research papers and very plain bits of information.

  • So today we're going to take a step closer to the modern web.

  • You know, I say that sort of tongue in cheek, but we're going to be taking a stab at C S S of cascading style sheets.

  • And David, Jamie Lynn is here in the chaps Everybody shout out to David for tuning act.

  • So we had a lot of chat in the, uh we had a lot of people posting messages in the chat prior to the stream is beginning.

  • And I also want to shout out Z h e l or gel any chu and great beram for following before the stream.

  • And some folks were curious about what the music was, So I'm going to actually turn to my computer here, and this is the channel that I played music from before every stream, so they have a very generous, non copyrighted license.

  • This in particular, is a very good sort of playlist that they put together, which is premixed, which is really nice for the streams.

  • You get a nice sample of different music.

  • NCS 2019 20 million mix of their 20 million subscribers are shot out video.

  • It's no copyright sounds is the name of the channel, and all of their music is completely playable for folks such as us who wants a music before stream or for a YouTube channel or whatnot.

  • So I use them for all of my sort of music needs.

  • And this is me doing some research in advance of the stream.

  • Let me make sure that I didn't miss anybody else's comments.

  • Obilic yours as Lee Whip streak, which is Nate Gravy.

  • Wait 123 blade A.

  • G.

  • Thank you all very much for tuning in, um, gravy way of saying also a moment.

  • I actually have no idea how to pronounce that solemn You'll like whom.

  • I'm not sure you're saying that that's apparently greetings in Arabic, and I, unfortunately have no Arabic knowledge.

  • Although Karim speaks Arabic, have cream were here, he could get a vouch.

  • So keep him with two missing banks.

  • Lead that they love the music.

  • Thunder 44 7 71 What was the music?

  • Yeah, that channel.

  • No copyright sounds Whipped streets saying, I love CSS Onate, actually, maybe even better at CSS.

  • And I am.

  • And Nate is actually 10 years old, which is insane.

  • So shout it to Nate for joining us at such a young age as the saying.

  • I hate HTML, but I'm here hoping that I like CSS.

  • Well, hopefully I don't ruin that image for you, Bartel D says.

  • Hello.

  • Hello, Bartel D um, with us.

  • We have here.

  • As he was saying, someone asked when I learned bootstrap instead of CSS.

  • And actually we will probably be doing a bootstrap stream with the next.

  • Actually, no.

  • We will be doing a bootstrap stream next Friday, and we'll be doing that with Aaron, So tune in for that one.

  • Bootstrap is a layer on top of CSS, so it's kind of a bunch of CSS that people it's a library or framework It's a bunch of CSS and Java script which we won't get into today that a bunch of folks kindly put together working at Twitter when they were developing Twitter.

  • And it's a great foundational layer.

  • Thio build a website off of where you don't need to know the low level details of CSS quite as much.

  • And it's an awesome tool, especially for folks that are less and less experienced in CSS.

  • Such sessions, for example, myself.

  • But we'll be we'll be definitely coming over.

  • Ah, lot of the basics today.

  • Stuff that's fairly straightforward, fairly easy to learn.

  • But it's a rabbit hole.

  • There's a ton of CSS a ton of attributes and whatnot that you can learn.

  • Um uh, check dressing was very soon being sure.

  • I've completely at them Kloppenburg here in the chat.

  • Hello, Martin.

  • Good to see you.

  • Great Maram who followed.

  • Thank you so much Snow.

  • Oris says.

  • Hello, Phyllis Norris.

  • And they keep for Shawn, 11 for the followers.

  • Well, are they gonna build a Web app with CSS?

  • Is thunder 44 7 71 Web app is, I think, a misnomer.

  • I'm not a web at per se, but we will be making a couple of in depending on.

  • This is dependent on how much time we actually have.

  • So I've allocated about three hours for the stream.

  • So we do have a few ideas are I have put together a few simple ideas for some simple Web pages that still look pretty nice, one even inspired by C s fifties home page that we'll get to implementing.

  • But they're not Web apps in the sense that they're functional beyond just displaying static content.

  • Ah, Web app sort of has the connotation that it does something more behind the scenes, and maybe it's tied to a back end, or at least has some JavaScript built into its what has some dynamic functionality.

  • We will not be doing any Java script, any dynamic functionality today.

  • It's purely on the aesthetics of Web pages and the aesthetics of CSS.

  • So we'll be taking a look at that here pretty soon.

  • Um, one sec.

  • Once you understand a bit of CSS from here, bootstrap will be a walk in the park.

  • Like for real, you could create a website at hours and days.

  • It's the best thing I discovered is keeping you too much.

  • Yeah, no bookshop is great.

  • It, uh it allows you to dio a ton of stuff.

  • I'm sorry.

  • Just one second.

  • Yeah.

  • It allows you to do a lot of stuff that would normally be kind of a hassle.

  • Like, for example, creating a knave bar which will try to implement today.

  • Doing that in CSS is incredibly easy.

  • You basically just plug in and we'll look at what this is.

  • Well, look at classes will say classes.

  • Our concept that we can add to our html to sort of specify that we should probably put, you know, maybe we want certain elements tohave a bold like a large, bold size and a particular fun.

  • And maybe they have ah, semantic value.

  • Maybe they're, you know, in a now Barcelona will be considered knave elements or whatnot.

  • So you give them a class of now header or now paragraph.

  • And that will just mean all of these elements in this.

  • Now, bar should be styled a particular way.

  • Um okay.

  • Thank you for Medi Spiegelberg.

  • Appreciate the follow.

  • We have a lot of chats.

  • I apologize.

  • We'll probably get into this very shortly here.

  • New Britain.

  • You says you know.

  • What are we doing today, eh?

  • So we'll be looking at CSS cascading style sheets, and we're just about to start diving into that.

  • But I just want to make sure that I didn't miss anything.

  • Any questions, Metal Eagle says.

  • I have seen at times there are some very detailed ways to solve very difficult styling problems, especially regarding positioning.

  • Depending on what you have in mind, we may or may not touch on some of that details.

  • I know, for example, absolute versus relative versus static positioning, and this this can get.

  • You can kind of get into the weeds with a lot of these things, and I'm not an expert.

  • So depending on what problem you're trying to solve, that may or may not have the insight.

  • But we'll look at least some of those elements.

  • Some of those attributes today and talk about some of the differences, which may be at least fill in some blanks for you.

  • Will you be covering selectors and pseudo elements?

  • Yes, we will be covering selectors and pseudo elements.

  • Actually, pretty early we'll be covering, selectors says You asked Jube on three keeping with Thomas saying, Explain the details on flex box.

  • So yeah, we have time.

  • I actually do have some notes here on some basic flex box stuff.

  • We'll be taking a look at that as well.

  • Teens and phones with you, 23.

  • Uh, there already.

  • Is this you want, Doctor?

  • Oh, yes.

  • Kings like Rock Roche.

  • So we do have a stream on doctor.

  • So actually, David and I did that one.

  • So go ahead and tune in for that one.

  • Um, I think it was episode like 27 or 28.

  • I'm not 100% sure, but yet tune in for that.

  • It's on.

  • It should be.

  • Still be a vote on twitch if not on the on the YouTube channel CSS grids and flex box.

  • And how are they different from media queries?

  • So media query.

  • So, actually, media queries aren't part of today's stream.

  • But immediate queries essentially asking, you know, having CSS ask the browser or the dom or whatever it's interacting with, depending on the device, how big is my page?

  • And depending on when it gets to a certain size, it could set or disabled certain elements, so this allows youto have, and this is a big thing about bootstrap is bootstrap allows you to resize your page.

  • Such that, um and we might even be able to demonstrate this for with for example, CS 50 page here on.

  • I don't remember offhand if it does this, but yes.

  • See how notice when I when I resized the CS 50 home page, we kind of got some different functionality here.

  • So we have a kind of a split page here, But if I go a little bit too far to the left, it ends up becoming a, um, a vertical split in this case, not a horizontal again.

  • Say, I guess there's a horizontal split so that we have two vertical oriented pains here.

  • And this is this is essentially being accomplished with the media query.

  • So we're basically saying when the browser gets to be a certain minimum with right or maximum with, then we need thio, shrink it down, I guess would be a minimum with we would need Thio essentially change the CSS such that the knave the header goes at the top.

  • We get a menu here so normally called a hamburger menu.

  • But there's no hamburger icon.

  • We can click that and open it up, and that's a Java script ability and then all the content instead of being aligned on the right side of the page.

  • Now it's strictly down below the middle of the page, right down the center.

  • So this is accomplished by what's called a media query.

  • Flex boxes Different Flex Box is sort of a dynamic container.

  • It's hard to describe exactly how it is essentially allows you to group elements, block elements together and have them dynamically sort of fill a space horizontally.

  • And you could do a bunch of cool stuff with a vertical centering and some other cool stuff.

  • I'm not sure how in depth we can get to that.

  • We could maybe pull up some articles later, depending on how far we get with a the demos on the actual you know, low level details of flex box, something that I'm still very much learning.

  • Um, but yeah, that is essentially what Flex box is, and what immediate clear is Yeah, pl Greetings from Poland Bihari Web animation to We will not be covering CSS animation, so it's very we could very easily split this dream up into like five separate streams and that would be the CSS animations would be a great thing to have a part to and maybe media queries and maybe responsive design kind of as a separate stream.

  • And that would be a great way to tie all these technologies together because that kind of gets into the more dynamic features of CSS.

  • Today we're gonna be looking more at the just the static features of CSS.

  • Are we gonna have a stream on Ajax Lib s O.

  • We will be having a J quarry stream at some point.

  • And Jake or he has a really nice Ajax set of functions built into it.

  • So we'll take a look at it.

  • In that context, it's already seven and indicate an end.

  • Thank you very much for the follows.

  • Okay, so just to try and get us sort of on track a little bit, I very much appreciate all of the all the messages in the chat.

  • Let's dive into a little bit of CSS.

  • So I'm going to pull up a my text editor here.

  • I'm gonna eliminate my sort of sample code 1/2 here, and I'm going to I guess I just used test, but I'm going to delete everything that I have here in in my two files.

  • And the first thing that I kind of want to touch on is the idea of what a classes and what an idea is these two very important things.

  • So last week we looked at HTML and HTML has just purely seen a skeletal noun, you know, sort of like what's in our Web page?

  • One of the elements themselves, right?

  • We have.

  • Maybe we have paragraphs or images tables, but we don't necessarily specify what they look like.

  • And we do that ultimately with things called classes and I D.

  • S.

  • Although that's not strictly necessary.

  • It's definitely a much more robust way of doing it.

  • I can illustrate the less ideal way of doing it here if we write some simple HTML.

  • So I'm gonna go and save myself that CSS page and we'll look at that in a little second here.

  • But again from last time in V S code and other modern text editors, if you're if you have an HTML file you that you've saved with some, for example, index that html I can go down thio.

  • I can type the word literally the word HTML.

  • I get this little menu that kind of dynamically pops up.

  • I can choose these different options here.

  • I'm gonna choose the 2nd 1 which just says simple html five starting point just so that it auto fills my text editor with a bunch of sort of foundational html that we can build upon.

  • Somebody said the title to stream tests.

  • I'm gonna get rid of the script tag.

  • So when we get to Java script the script, I will have to be very important.

  • But we're not doing any Java script today.

  • I'm gonna get rid of that and that I'm actually gonna get rid of this Link Wray Legal sell sheep thing, too.

  • And I'm gonna get rid of my soul sidebar there, and I'm going to just kind of put in some basic HTML elements.

  • And if anybody has any suggestions for some basic HTML so we can make this kind of dynamic and user, I guess our I guess if you were dependent, definitely toss some ideas in the chat I'm gonna start off with.

  • For example, a div and dibs are ways that we can sort of divide their short for division Weaken, divide our Web page into, you know, sort of vertical groupings of elements and that within my div, I'm going to say I'm gonna create a P tag erection.

  • I'm gonna create an H one, and I'm going to say CSS test within that div.

  • After that, I'm gonna create a paragraph, and that's going to say this is some paragraph text in my day, then lag between the YouTube live and twitch life.

  • That's kind of normal, I think.

  • Zen Ark.

  • It's cross dreaming to multiple service's.

  • I think Twitch probably gets it may be a little bit fast on, and then YouTube gets it.

  • YouTube started, I think a little bit slower.

  • I think there's some bit of delay there.

  • They have to do a couple of things that you like.

  • Preview The stream then started, and there's a few steps involved.

  • Yeah, that's that's, I think, fairly normal.

  • I think it's not normal for people to watch both of the same time and notice it.

  • So I think whether you're watching you to where they're watching twitch, the two are.

  • Either way, you're fine.

  • Um, gonna create another def.

  • And then in here, I'm going to say this is gonna be in h two.

  • I'm gonna say this is a second block and then p m going to say, Here's a little more text and then maybe create a table here and I can type the word table and then I can hit Tab.

  • And then I could go down here and say t had which remember, that's where we specify the header of our table de solo North and given much for following and then T body right here and within T head, I'll say th and it'll say name.

  • Um well, say image or whatever.

  • And then, um, Major, we can maybe re used some of the prior code that we, uh we did last time with the HTML table V s code for the way it is.

  • Alex.

  • Yes, I agree.

  • Although I mean all of the modern tech centers Adam Sublime GS code.

  • Whatever else folks are using even them, they're all great.

  • There's a pace.

  • Been that lipstick said so I'm actually I don't have the chat on my computer here whips you so I won't be able to actually click on the link.

  • But if you want to just shut out what you put in there.

  • Sort of in a nutshell.

  • I can I can take a look at it.

  • Andi within the tea body will say T d r Sorry tr right, because it's for a table row and then within the TR will do a TD.

  • Believe Colton.

  • We'll assume that I have an image in here.

  • Thank you very much.

  • See, are for i d for the fall, Appreciate it.

  • And then within here will say, um, that's gonna be an image tag, but I don't know off hand where the image is gonna be.

  • So we'll say we'll assume it's Colton that, uh, JJ, if for no.

  • And I actually don't think I have a Jiff of myself on that page that we got them all last time.

  • So this might just be a placeholder.

  • And then last time we'll say, We'll say, Major is computer science, right?

  • Just for now.

  • And then let's run this.

  • Let's just make sure that it looks okay.

  • So Okay.

  • Yep, it looks great.

  • This is pretty much exactly like we wanted it to look.

  • I mean, it looks awful, because again, it's just see, it's just pure html There's no CSS.

  • There's no styling.

  • Um, let me see.

  • Think before, in the web section we had here.

  • Okay?

  • No, we we have We'll just use David.

  • We'll use David a little bit easier.

  • Since I already have David's image there.

  • I'm gonna go back to my testing here.

  • Minute pace that in.

  • And then I'm gonna edit my HTML so that it says David and then David Dutch, If this should work, if all is well, okay, awesome.

  • So this is just some very basic sort of CSS that we have our sorry, some basic HTML that we have rendering in her web page very similar to what we looked at last week in the HTML stream.

  • This is all in familiar to you.

  • Definitely turned into the HTML video, the HTML stream and the either the pot or the YouTube video that we have on our channel.

  • So the sort of the most basic way that we could style elements, and this is kind of not looked upon.

  • Well, this is an older, um, less robust way of doing it is within a particular element.

  • We can actually specify a style attributes and within this style, attribute we can specify individual CSS properties that we want to apply to that element.

  • So, for example, let's say I want this div.

  • And this dip is just this whole entire thing, by the way, because everything is wrapped it.

  • Sorry, not the entire thing.

  • Just this This test the H one and the paragraph Both of those elements are wrapped inside a div.

  • So I can say def style is equal to background color.

  • Well, say yellow, so there's gonna be kind of atrocious looking.

  • But if I refresh, we do indeed see, And this gives you a nice sort of illustration of how far your elements extend in reality so we can see, even though, you know, the CSS text Sorry sees this test and paragraph text only take up a little bit of wit on our page.

  • That development actually spans the entire block of the entire wit of our Dom right of our chrome view.

  • And um, that's that's more apparent when you actually end up styling things than it is just by displaying things as is, you know, you might have expected that our pages on Lee as wide as this big block of text and the jiffy.

  • Looks very goofy.

  • Said I can't read that.

  • A terrible, terrible color on it.

  • See, for sea off already.

  • Person just followed.

  • Yeah, it is very.

  • It's a little It's good.

  • It's good.

  • I like the gym.

  • My Jeff is goofy, Er, because I actually wasn't present for the shoot on that day.

  • I didn't realize that they were shooting pictures, so they actually go down to where I am.

  • Uh, you can see I don't have a picture here.

  • I have a Muppet where my face should be.

  • So, uh, I guess I could have just taken this image right here and use that, but in any case, So this is how you style things in line.

  • Thanks.

  • Thanks.

  • Actually appreciate it.

  • You can actually specify on a given element in your HTML without needing a style of sheet or any separate place to put your styling, I can say style equals.

  • And then whatever property that I want in this case, I decided on a background color of yellow and I could do the same thing for this h one.

  • Aiken say style equals color.

  • And so now I'm not doing background color.

  • I'm doing regular color.

  • And what this is gonna do is gonna style the text itself.

  • I can say color red, and this is gonna look terrible.

  • But if I do that indeed.

  • See, that CSS test now is showing up is red.

  • So this is a very primitive basic way that you can.

  • It's a great idea to use this for a team.

  • Paige, this is before I d uh we have tiny dynamite.

  • 07 thank you very much for the follow up.

  • But this is this is how you essentially style things in a primitive way.

  • Now, another cool thing that we looked at last week was I could say border equals one like this on a table, right?

  • And what that ends up doing is it gives us this very old school, primitive looking border outline for our table.

  • But there's actually a border CSS style property that will take a much closer look at this a little bit later.

  • But I can say border to pixel solid, solid green right here.

  • And if I refresh, notice that now our table gets this green outline around the entire thing just around that, just around the table, not around any of the sub elements.

  • And that's because we've actually applied this just to the table at large.

  • This border and the way that border works, is it just put the border around that one element, that parent element.

  • It doesn't actually include some elements, and that's kind of a difference between using border equals one and style equals and in setting a border however you want.

  • But I could very easily set this to be a 10 pixels solid border and those that know our border is green and much larger than it was before.

  • And if I did, um, I think it's dashed, knows that now we get a very tacky, sort of looking, dashed green, thick outline around our table, but we have a lot more flexibility now.

  • Before, we were kind of limited thio.

  • Border equals one.

  • Either it's on or off, but we get kind of a weird, primitive looking outline and, you know, and also includes the nested elements, the TDs, the th is and one not the t ours.

  • In this case, we just get an outline around entire table.

  • But we could do anything we want with this within the limits of what border allows us to do, right.

  • So this is how you would use the style tag are attributes rather so you can use in any HTML tag whatever style attributes on a given element you want and then specify as a string this bit of code here and this is actually these air, actually CSS properties, CSS Um, yes, he says properties in this case border color, background, color.

  • And there's a ton of different properties just to give you a sense of how many There are a website that I think is really great looking at is the mdn, the Mozilla developer network page.

  • You goto m d N C s s.

  • For example, go to here.

  • So developers Mozilla dot org's in us, depending on which region of the world urine slash doc sexual obsession.

  • CSS.

  • There's a CSS, so it gives you a nice little high level overview of what it is.

  • So here we have an introduction.

  • We have tutorials.

  • But if you go over to the CSS reference and it's cruel down here a little bit, these are all the CSS properties that we have access to in the language, the entire language and there's a ton of them and we will not be covering.

  • You know, nearly anywhere close to the majority of these will be covering a subset of these that are often used.

  • But there's a ton of properties that you know, most people, I would say.

  • Most developers probably don't have them all memories, even the majority of them memorized.

  • Unless you're a CSS fanatic who's been studying for years and has committed the Milton memory sort of proactively.

  • It's a great idea to use this for a team bait should I do in a separate file or directly in the elements.

  • So good question.

  • So we're gonna start going more towards a better way of doing this, using what are called ID's and classes, and we're going to take a look next at the style tech so back to my HTML page.

  • I want to get rid of all this stuff, all of the in line properties, or rather, the in line, the attributes, properties go ahead and see where I had all of them, and I think that's it, right.

  • I'm not mistaken.

  • Nope, here as well.

  • So now I have no more.

  • Now is just pure html and this is important.

  • Having your HTML separate from your CSS, I think, is ideal so that you can decouple.

  • He sort of the layout of your page versus how it looks.

  • I think that way, you know, you could have one person designing the HT mo one person designing the CSS, And there are a lot of other reasons why you might want to do this, which we can take a look at later, the sort of next evolution of how we want to approach.

  • Adding CSS to our Web pages is gonna be with this thing called a style tag.

  • And a style tag is usually in the hat, actually almost always in the head of your HTML page.

  • And this sort of goes where you're starting, where your script tags often go, which we won't look at that today.

  • But JavaScript often also goes in the head if it's in a script tag, if it's actually built into the HTML page.

  • Um, the style tag is a container where we can place all of our CSS rather than having them be within a particular element.

  • And this is great.

  • So what I can dio is and this is where we actually start getting into our CSS syntax, right, separate from the properties, which was sort of CSS syntax.

  • But this is much more so CSS in Texas, I can say, for example, and we'll use the table for as our first example, I can say, whenever there's a table in my HMO, Paige and I do some curly brackets here.

  • I want the basically the same thing that I had before.

  • I want a border that's 10 pixels dashed green, right?

  • And the cool thing about V s code is actually whenever you right, you know, in the context of the CSS page or in HTML page, if you write a CSS color and in this case, it's defined as a word green.

  • But we'll take a look at how we can maybe define our own colors, using either RGB or hex values and a little bit.

  • But we have the word green here, which just means, you know, it's probably something like RGB 02550 which again that'll make sense more sense a little bit.

  • We are doing the exact same thing we did before, but we now we have it sort of decoupled from HTML up here in our style tag.

  • Want to save this?

  • Go back to my HTML page and then refresh notice that all of the other CSS is gone.

  • But that table CSS is the exact same.

  • So that's all completely still working the same.

  • Only now we've taken it away from R H D mail tag or HTML itself, and we've put it in its own designated location.

  • So we know where all of our styling is.

  • There is no intermingling of CSS and HT mo, which could get messy and hard to maintain.

  • And he's harder for people to sort of collaboratively work on the same source code.

  • Check out the CSS and website that will blow your mind.

  • Yeah, that's an awesome website.

  • I'm a huge fan of that one.

  • So, uh, CSS Zen garden, I believe, is the one.

  • And what it does is it shows this page here right by default and a bunch of other pages So I could go, for example, of this page here, which Okay, this is cool, right?

  • We have another page with some other content, right?

  • And then I can go, for example, back to that last page and go here.

  • There's another page.

  • Right.

  • Okay.

  • This is cool.

  • All right, So we have another page, you know, showcasing some CSS some pretty cool stuff.

  • Um, go back to maybe another page just to get a sense of what this looks like.

  • Okay, this is pretty cool.

  • This kind of looks industrial, you know.

  • Okay, some pretty cool contents are pretty cool.

  • Nice showcase of a bunch of a bunch of different sites, right?

  • But the funny thing is that these are actually all the exact same site.

  • They just have different CSS applied to them.

  • They're all the exact same site.

  • And this is a great sort of representation of what you can accomplish with CSS.

  • Just just CSS.

  • Nothing else has changed.

  • Except for the CSS.

  • You can see this paragraph right here.

  • How?

  • It says a demonstration of what can be accomplished through CSS based design.

  • Select any style sheet from the list toe, load it into this page, and then notes that this says a demonstration of what could be accomplished through CSS based design select any style sheet from the list to load it into this page.

  • It's the exact same content only thing we've changes the CSS.

  • So if you've been curious about how important CSS actually is in terms of what it does for your website, it's pretty important.

  • It included encompasses all that goes into making your site look different from any other website.

  • So this is a CSS send garden a great way to gain some appreciation for CSS.

  • Is this the Adam editor or the CS 50 workspace?

  • If I have the Websites has timed out of this is V s coat so than awesome Free Web free text editor.

  • You can download it by going thio.

  • Remember the West set off hand code dot visual studio dot com and this will allow you to download B s good for your operating system.

  • Highly recommended.

  • You can also download Adam or sublime text.

  • How did have the same style on SE seven text boxes using external CSS and greetings from India's doesn't kill 0211 Good question.

  • That's actually very easy thing to do, and we'll take a look at that when we start getting into separate style sheets.

  • But suffice to say, you can just say text area like that and then do some style that you want inside of the CSS, and we could maybe demonstrate this on a little bit.

  • But because we've said text area, this is just a very jealous is what's called a selector, right?

  • So let me delete this so back to where we were before this table.

  • Word is a selector, and what a selector does is depending on how you define your selector.

  • It goes through the entire Web page top to bottom, and it selects all of the things that match how you what you said in that selected for example, table.

  • All I said is literally table.

  • And if it has no syntax in front of it, if it's just literally the word, then that means it's an HTML element.

  • So in this case table, I've said the word table, which means get me any HTML table and apply this style to it.

  • So to demonstrate this, if I decide to copy and paste this table down here below right, first thing I'm gonna do is I'm actually going to just comment this out and way to do.

  • Commenting in CSS, which is a thin H m o, is to do it like in see where you can do slash star and then star slash.

  • So where you want the comment to begin Slash star and then we want the in this case forward slash and where you want to comment?

  • End star forward slash So the slashes, they're kind of like the container, and then the star's gonna go inside of the container.

  • I'm gonna go ahead and refresh the page so we can see that we have no more border around our table.

  • Our first table, right?

  • But I have two tables here, right?

  • Not just one table.

  • So if I go back to my page and then I uncommon this bit of code here out notice that we're seeing table and what I'm positing is that this should apply to all tables because we're not being specific about anyone.

  • Table.

  • I'm just saying all tables should have a border of 10 pixels dashed green.

  • If I go back to my page and refresh indeed, we do see that it doesn't apply just to the first table.

  • It gets both tables and applies a border around them and tuna kills question howto have the same style on seven text boxes.

  • You would do just this.

  • You would define seven text boxes and you know, the sort of the naive ish way which we've done so far, is just, you know, use it based on the element type, which is totally fine for a lot of cases.

  • But you would just define seven different text boxes and then you just have a text area selector and in that would encompass all seven of them, just by virtue of the fact that it's going to look for all of the text areas, the text boxes, if that makes sense.

  • So this is cool.

  • When using selectors, we can grab all of the given element of a particular type.

  • I have two dibs in my HTML page, so I can illustrate this with gives as well I can say Div, And then maybe I want a background color of yellow, right?

  • So using very simple attributes are properties right now, but I have to dibs.

  • So I have the CSS test with this paragraph, and then I have This is a second block and here's a little more text, right?

  • So if I refresh notice that we do indeed have yellow going around our entire element and also which I didn't realize until now the table that both the tables themselves were inside this Div so noticed that the tables themselves actually got a yellow background.

  • And this is part of what makes CSS cascading.

  • So what happens is we applied it to the the development, right.

  • But what that does is not only does it style the development, but it also includes all of the Children of the development.

  • So, for example, in this case, did is apparent element to this H one and this p tag right there inside the diff just like that's like puzzle pieces nestled inside of another puzzle piece like we've seen in scratch the div.

  • When it gets a style depending on what the style is right, it border doesn't necessarily apply in the same way.

  • But, for example, background color does the background color actually applies also to this H one and two this p tag right, because they're inside the div, their Children.

  • It's a cascading effect.

  • You get this ripple effect that goes down from the parent to the Children and it applies to same thing here with this Div.

  • It not only makes the background of the H two and the pee yellow.

  • It also makes the tables both yellow, their backgrounds also yellow.

  • Check out Robbie Lenard.

  • These interactive portfolio says Zan Arc, um, let me see.

  • Robbie Minority said this one interactive resume.

  • Oh, this is cool.

  • I've said about my illustration works.

  • It contains websites, info, graphics and animation projects, huh?

  • OK, he has three different places.

  • That's a launch.

  • The website.

  • Okay, this is cool.

  • So I'm guessing this is a good amount of Java script.

  • Yeah, this looks like Java script.

  • It's really cool that I'm a huge fan, so you can see what we get to a certain point.

  • The elements.

  • These you can almost sort of envision these area These.

  • Ah, I guess on how you describe it.

  • Rose of cards is having a position.

  • And depending on where we are in the website, the, uh, they have ah, there.

  • Maybe they're X or y moves left or right.

  • It's kind of similar to what we would do in a game.

  • Um, he has a little monkey hand here, and I'm guessing that that has some rotation applied to it, depending on where we are in the website.

  • So these animations themselves the's a Windows have a, um, a key frame or frame in their animation that also changes depending on which position were at in the CSS.

  • And this may be CSS.

  • I'm inclined to think that it's probably Java script, especially this slide down bit here.

  • But there's a lot you can accomplish with just CSS animation, so I won't say definitively either way what I presume it to be.

  • But my inclination is that there's probably some Java script here.

  • It won't be terribly easy to see just what has Java script by looking at the consul, actually, but yeah, the super cool.

  • There's a lot you can do.

  • You know, once we've gone past having just HTML and we go to CSS and we'll start including CSS animations and, more importantly, javascript.

  • Then I mean the sky's the limit.

  • You can do whatever you want with your website.

  • If, as long as you can sort of think it, you can implement it one way or another, right?

  • This is gonna cool.

  • There's a depending on where your mouse cursor is on this dip here.

  • It actually ships it left or right, and he has what's called Parallax, so there's different layers that move at different speeds.

  • This is something called Parallax, so these occupy and the mushrooms move slower than the bushes in the background, which moves slower than that island.

  • And this is something we actually look at in our games class in our Flappy bird lecture, I think, is the first lecture we look at, where you see the bird, the flappy bird moving and the pipes moving.

  • Rather flabby Bird always stay center, but the pipes move and that makes it look a zit.

  • Flappy bird is moving, and then you have a background in the distance that's moving even slower.

  • That's what's called Parallax scrolling, and it's a it's a sort of make the human.

  • I think that there is depth when there's not.

  • All these are is just a series of images, you know everything is completely flat, but as soon as we move left to right a little bit and things move at different speeds, it tricks the human eye into thinking that there's actually depth there so really cool effect that could be applied.

  • So anyway, thank you very much, Zan arc for plugging That was cool to look at that.

  • Um, do have developers get visual design lessons.

  • Says as Lee.

  • Um, I think it depends on who you are, what you're doing.

  • I think visual design is something that's a worthwhile.

  • I haven't gotten any visual design.

  • Formally speaking, you can, I think, teach yourself a lot just by looking, for example, that what we're doing here, looking at websites and sort of analyzing what they've done, getting some inspiration, trying things out, getting feedback and learning organically.

  • But taking a U X does class, I think, could certainly benefit.

  • I think a lot of people, and I think I could benefit from it a lot, too, especially as I get more into Web development.

  • Um, I'm more into games, and I tryto look at games that I've played and see things that I have enjoyed and get information and inspiration from that.

  • But I think everybody learns a little bit differently.

  • But anyways, great.

  • Cool little aside there.

  • I'm gonna go back to our page here, Make sure haven't missed any comments.

  • I s Susanna plugged the interactive.

  • Yeah, really cool.

  • Really cool.

  • Virtual resume.

  • Alex, What games do you play these days?

  • I've been into modern Minecraft recently.

  • Enigmatic it to an expert pack that I've been having a lot of fun with.

  • Um, before that I was a little bit of oxygen not included on and tried briefly.

  • Cem Rim world, but not not terribly much.

  • Um, I'm going.

  • I'm very interested in war group, which just came out, which is sort of like an advance words.

  • Fire Emblem style game.

  • Um, but haven't had time to play that too much yet.

  • So cool.

  • We have now the ability to style arbitrarily numbered.

  • Um, you know, depending on how many we have, we can have an arbitrary number of in the same element and style, all of them at the same time.

  • But, um, what if I want to style, for example, this table, this first table to have a green border.

  • But this second table, maybe I wanted to have a red border, so I wanted to be a little bit different play fortnight.

  • Elwell says, Sam, Mark, I did play a fortnight, but that's a time sync.

  • I'm I don't think I'm willing to dedicate that much timeto playing fortnight anymore.

  • Um, the problem is that here we've basically said that all of our tables because we've said just table all of our tables should have a border of 10 pixels dash screen.

  • But I don't want all of our tables.

  • I want only some of our tables are specifically I want my first table to be green in my second table to be read.

  • So how can we do that?

  • And there's an awesome thing, a couple of things in CSS html called ID's and classes.

  • So what I can do is I can say OK, I want this table to be green table and I want this table to have the i d of red table so that's not gonna do anything right off the bat.

  • And in fact, I think if I run this, they should function identically.

  • Nothing's changed for the sake of everyone's vision.

  • I'm going to get rid of the background color yellow bit here.

  • Nothing that's really doing anybody any service is.

  • So there we go.

  • We're back to our green borders.

  • But now we need to use a little bit of different syntax.

  • So we use the we created an I D in our HTML.

  • So this is something I need to do in your HTML and now we need a map to in our C s s.

  • So what I can do is I can say green table with the hash mark so that I'm saying hash green table and this just means you anything that has the green table i d.

  • That's the hash mark is the i.

  • D.

  • I'm going to specify that that should have the 10 pixel dashed green border.

  • And if I want the same thing to happen for my red table and you specify a 10 pixel dashed red border, they're right, and I can actually get rid of this table tag now because I don't really want anything at the moment, uniformly done to all my tables.

  • I just want my green table in my red table.

  • The I D should only be used once.

  • Classes can be used many times, says Joe Bond.

  • Correct.

  • That is correct.

  • Now notice that in the style of Christmas we do have a green dash border around the first table, which we gave the I.

  • D green table, and the second table now has a red border around it.

  • In the vein of the red table I did.

  • And to Japan's point gift, this is correct.

  • Ideas should only be used one time.

  • You should have one specific element that has an I d.

  • And if you want, You know, for example, maybe I wanted a couple of green tables, right?

  • Let me go ahead and copy.

  • Maybe I want a couple of red tables.

  • I'm gonna copy this table here and paste it down below.

  • And you know, now I have an I d.

  • In both places, but that's not really economical.

  • And actually offhand, I don't know if that will work.

  • That'll still work.

  • So you can still have two things.

  • Have the same i d and that it works fine.

  • But it's not good practice.

  • Typically, what you'll do is instead use what's called a class, and a class is meant to be used across multiple elements, multiple elements that share the same physical characteristics.

  • So both of these tables have the class red table, and maybe this we can change the class as well.

  • However, it's not gonna work anymore because the class actually has a different syntax for us to use it as a selector.

  • So remember this table selector was for all tables.

  • This is an I D selector, but we need a class selector.

  • So in order to make a class elector, all you have to simply do is change the hash to a dot.

  • So now, instead of hash screen table hash red table, we say dot green table dot red table to go back to our page.

  • Now we have a green table and then to read tables just like that.

  • So very easy is the only bad practice.

  • It's against the speck and things Kenbrell ache says Troll a little.

  • Ha ha ha.

  • So good point, Andi.

  • I haven't delved too deeply into the exact situation where it can break, but I imagine I imagine that being the case, But generally as a general rule, don't use the i.

  • D in a, um, multiple places only use it in one location, use classes where he would use I.

  • D.

  • S.

  • What's the usage of I D.

  • Says No.

  • 123 53 Just where you have one element that's just gets its styling or JavaScript applied to that one thing.

  • Classes are for a range of things, but if you wanted and to be fair, you could use classes for things that only have one use case to annoy.

  • Idea.

  • Think semantically.

  • You can derive that.

  • There's only one instance of something in particular that has an I D versus a class.

  • If something as a class, then people may use it in multiple locations, even if they you intended for it to only be used one time.

  • So I d just kind of tells you or your developer friends like, Oh, this should only happen to one thing, right?

  • But you could use class everywhere that you use, i D.

  • And it looks like Alex Gabriel says people really thinks that people rarely use I d.

  • I mean, I I've seen I d and a good number of places, but, um, it depends, I think, on your use case.

  • I use ID's names, classes and mixes.

  • Is says Job on three.

  • Yeah, you'll you'll use.

  • I d'you use class.

  • It depends on the problem that you're trying to solve.

  • Cool, Cool.

  • If anybody has questions, this foreign, anything we've talked about, um, let me know ideas.

  • They're useful as anchor tags.

  • Yeah, and a lot of cases you won't have the same anchor tag in multiple places, you'll typically only have it as one particular thing.

  • The front and designer at my last internship did the same.

  • And our mentor, Satin, explained why it's a bad practice.

  • Yeah, no, it makes sense.

  • Okay, so classes and I d.

  • S.

  • We understand how that works.

  • We looked at the style tag, which is great.

  • We looked at selectors.

  • Um, now let's go ahead and maybe get a little bit more fancy with R h t m o.

  • So maybe I want to style We'll do this.

  • We'll say at the very top of my page.

  • I'm gonna have an H one that says CS 50 on Twitch.

  • I'm gonna change this h one to be an age to, because generally you should only have one h one in your application, Tom ballot Or kindly explain the last stream how this affects certain people with, um, accessibility issues may be blind people that we're reading through through a particular reader, and they want to get to the header of the page.

  • If there's multiple headers, multiple H ones, this

All right.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it