Am.
Michael T Ganschow Green: alrighty then welcome everybody to another round of knowledge injection into your brains.
Michael T Ganschow Green: So today we're going to go just a little bit more over html and then we're going to talk about cascading style sheets and how they are applied this cascading style sheets.
Michael T Ganschow Green: Look at this you learned one programming language well my half of it yesterday and you're going to learn.
Michael T Ganschow Green: Another programming language again at least the syntax of it today soon it will be all vocabulary word memorization for you guys you're going to know the structure of both of them by the end of this week, so a little bit more html mostly just answering some questions and then.
Michael T Ganschow Green: We will.
Michael T Ganschow Green: jump off into the madness that is cascading style sheets so before I get started does anybody have any questions on anything.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: okey dokey Let us then get started we're going to go share screen give me a desktop yes indeedy duty alrighty then so.
Michael T Ganschow Green: Here is our lovely little dream Weaver I took the liberty of pre popping it up a the.
Michael T Ganschow Green: Before class opened here so i've got my dream Weaver all booted and everything's going.
Michael T Ganschow Green: i'm going to do something a little bit odd, I am going to do here, let me do the smaller shop in smaller share in a second what i'm gonna do.
Michael T Ganschow Green: Is i'm going to delete like current site route and Riyadh it in one for practice to DEMO it because I think a couple of you were not here.
Michael T Ganschow Green: Last class and those of you who are watching pre recorded can either fast forward or wouldn't want you to practice as a couple of times i'm just saying so.
Michael T Ganschow Green: Here we go Oh, I see a chat I see a chat it popped up let's see question whenever you see this looking into some cool things I want to do with my website and Kim Chris yes, yes, yes, yes, yes, yes um I don't know if we will learn parallax thing.
Michael T Ganschow Green: At least a full version of it in time for you to use it on project to.
Michael T Ganschow Green: But we will go over it before the end of the Semester Oh yes, yes, yes, apparently axing is parallax in his totes awesome it's done there's a very basic way you can do it with cascading style sheets were basically fixing image in, and you have stuff scroll over the top.
Michael T Ganschow Green: And then there's some more advanced ways with jquery, which is the behavioral programming language will be learning.
Michael T Ganschow Green: In bits and pieces, where I can go fully into jquery javascript but.
Michael T Ganschow Green: One of the one of the things they do is you can use this scripting to vary the scroll speeds of your images, so, in theory, you could do a bunch of like semi transparent images or transparent images.
Michael T Ganschow Green: layer over the top and very there scroll speeds and get kind of this like 16 bit cartoon effect where everything's kind of shifting in depth, really, really cool stuff here, if you want to get started playing a little early in a minute.
para X G query.
Michael T Ganschow Green: let's see here this.
Michael T Ganschow Green: This is the one that we're going to play with So if you want to start playing around a little year.
Michael T Ganschow Green: Is the jquery we're going to play with this guy and along with this guy one of the other ones we're going to play with his.
Michael T Ganschow Green: enemy down scroll and animate on scroll boop is a little jquery library that, as you scroll.
Michael T Ganschow Green: Things pop in so you know you've been on websites like images coming from the sides yeah it's this bad boy will be going over this for the end of semester, too, because.
Michael T Ganschow Green: I mean Look how awesome this is their weapon in from all sorts of different angles, but come down and once flipping in I was flipping.
Michael T Ganschow Green: flipping up that was flipping down look these guys pulsing out here doing a little bounce Bowling.
Michael T Ganschow Green: very, very cool stuff So yes, will be learning all kinds of fun behaviors I don't think we'll probably get to these by the time you're.
Michael T Ganschow Green: Working on project to, but you will know how, by the end of semester, so a little preview ooh you just got a movie trailer for things that are happening in like April so cool all right.
Michael T Ganschow Green: Other questions.
Michael T Ganschow Green: You are very welcome allison OK so.
Michael T Ganschow Green: now time to do something really dumb i'm gonna i'm gonna delete my site why because I want to practice site creation with you guys and so probably i'm going to be doing this.
Michael T Ganschow Green: At the beginning of every class now you guys already probably have an appreciation for my strange nature, so that shouldn't be out of character that i'm doing something odd like say.
Michael T Ganschow Green: Coming to the gic 175 class demonstration website and deleting it now let me zoom in on this window here so we're going to stop share.
Michael T Ganschow Green: Share screen advanced know portion of screen, yes, there is the portion of Allah that it's all it's all shrunk down from the last time we used it now, I know i'm trying to move this Thank you so that they can actually see what i'm doing.
Michael T Ganschow Green: So now we're zoomed in on the main sites window, so that you guys can have a clearer appreciation of the madness we're about to do so, because my I have previously had my glc 175 class demonstration website.
Michael T Ganschow Green: up and running, when I last opened dreamweaver dreamweaver reopened to it, so if you guys have computers that, unlike the computer from the computer lab at mcc don't forget themselves every time they.
Michael T Ganschow Green: They get turned off when you open up dream Weaver it'll be pointing to the same site route that you had it pointing to.
Michael T Ganschow Green: As of whenever the heck you last pointed a site that could be months ago that you know when I fired the stream we wrap it was pointing at 275.
Michael T Ganschow Green: Alright, so let's get rid of this class demonstration website so in order to delete a website if you're going through your sites and you got one you're not really using any more, or whatever.
Michael T Ganschow Green: You can use basic you can click on it and you click this minus sign down here to add to delete it now, if you would like to edit it if you have a site route.
Michael T Ganschow Green: that's generally working, but you want to say move the root folder somewhere else well what you have to do is, you have to go in and Edit that site route.
Michael T Ganschow Green: And that is just as simple as hovering over the site, you want to edit double clicking on it, and then it will bring up the manage sites palette again, and you can point it to the new location on the local site root folder on the default images folder and on the scripts folder yeah.
Michael T Ganschow Green: But that's not what we're doing right now what we're doing right now is we're going to move the gic 175 class demonstration website and we add it yeah So here we go.
Michael T Ganschow Green: So this JRC 175 class demonstration website has to go so i'm going to highlight it.
Michael T Ganschow Green: And i'm going to yes, you can select multiple sites and delete them to well you're clearing out you don't have to one Z two Z this you can.
Michael T Ganschow Green: shift select multiples and modify them, but I want to get rid of this Jesse 175 class DEMO website bye bye cannot undo this action.
Michael T Ganschow Green: We cannot do it, you guys, oh no it's going to be all a once we made this decision I can't take it back we're about to say something we can't take back here we go.
Michael T Ganschow Green: gone.
Michael T Ganschow Green: We just killed our site, what have we done with such monsters look at this oh oh em gee we broken our dream we return, we will never be able to link files will never be able to link other pages it's all, no, no.
Michael T Ganschow Green: No fine we're going to Riyadh it's good it's good, so we do is we do a new site and i'm going to call this one G RC 175 class demonstration.
Michael T Ganschow Green: website.
Michael T Ganschow Green: To.
Michael T Ganschow Green: Class demonstration website hopes i've got a little my new district is open class demonstration website too.
Michael T Ganschow Green: alrighty then so now, there we go on that.
Michael T Ganschow Green: Again accidentally clicked my webcam and turned it off when I was clicking around so.
Michael T Ganschow Green: there's website to now let's go find the class files chug chug chug chug chug check us out on my desktop is GR C 175 and i'm going to click choose and then i'm going to come over here and i'm going to click on the default images folder in i'm going to select my images folder here.
Michael T Ganschow Green: Bring that in so you guys can actually see i'm going to click on my images folder here and click choose and then come down to jquery.
Michael T Ganschow Green: And i'm going to click here and click my scripts folder and click choose so once again what I did the main site window here, I gave my site name.
Michael T Ganschow Green: I then went and I clicked on this little folder here and went and found my root folder now I don't know what the name of your root folder is, but my root folder is pretty cool have you though.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: I went to my local info.
Michael T Ganschow Green: And I clicked on and I clicked in here which already was pointing into my root folder and I select my images folder then.
Michael T Ganschow Green: My jquery here, I went here and I clicked on my little folder already pointing into my root folder and found my scripts folder and selected that guy.
Michael T Ganschow Green: Now that I have that done, I simply just mash save and it says wait there's another one pointed in there, oh em gee yes i'm aware dreamweaver it's good fine have fun be dramatic this is good we're good here, we are all good here okay so with that done, then I click done and.
Michael T Ganschow Green: Second, let me and this year.
and put on a proper.
Michael T Ganschow Green: notice over in the left no over the right corner my other left Michael over in the right corner in our files window here or files palette our nice little site is all set up now, for those of you have popped up on the dream Weaver and this interface looks a little different.
Michael T Ganschow Green: than the stock one just as a quick review on zoom Thank you just as a quick review.
Michael T Ganschow Green: What I did is I ripped out the CC libraries from up here by clicking and dragging them out or closing them that I ripped out the document object model over here and close that.
Michael T Ganschow Green: And I ripped out the assets over here and close that and I ripped out the code snippets over here and close that.
Michael T Ganschow Green: boom that gives us my preferred working dreamweaver environment, but if it's not your preferred working dreamweaver environment, please.
Michael T Ganschow Green: play around with your with your dream weavers palettes until you find one that you're comfortable with.
Michael T Ganschow Green: The reason why I, like this one is because we have maximum room for our insert a palette over here which works like the.
Michael T Ganschow Green: The left side toolbar on most adobe graphic software, so I like to have a big long one, to play with like the big long toolbar.
Michael T Ganschow Green: that most of them have and this CSS designer palette said here, this is of all the dreamweaver palettes, this is the one we're likely spend the most time in this this semester.
Michael T Ganschow Green: we're going to be playing a lot in the code like a ton of the code, but uh, but this is the This is where we'll be where we'll be spending our time.
Michael T Ganschow Green: So any questions.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: Alright, that being said, i'm going to crack open my index that we created last class, with all the lovely links and terrible docs that that is air to so the Double Click my index and pop it open now, all I can add it remembered.
Michael T Ganschow Green: Now for some of you who are just opening dreamweaver this is going to look a little different the standard view.
split.
Michael T Ganschow Green: Has the wizard wig on top, and the code view on the bottom.
Michael T Ganschow Green: I preferred split the other way, because I work, mostly encode and the busy wig is our best and extremely limited preview tool, who will tell you all sorts of only the finest lies and previous occasions about what your website is supposed to look like.
Michael T Ganschow Green: You always always.
Michael T Ganschow Green: always want to.
Michael T Ganschow Green: preview your website in a browser.
Michael T Ganschow Green: I actually got some questions on that on Is this a couple of us well, this is not the way that I know how to preview in a browser this real time preview here.
Michael T Ganschow Green: You guys said, and this is actually what i'm about to show you is the main way I preview in a browser as well.
Michael T Ganschow Green: You guys told me that about this little icon in the lower right which I use all the time as well, this is actually my preferred way.
Michael T Ganschow Green: I wanted to show you guys the menu way first, but my preferred way is actually this little preview icon down in the bottom here right down fact here, we will get our zoomed in zoom zoom zoom screen share, and I will show you where it is so.
Michael T Ganschow Green: It is down here, right here in the lower right shrink this whole thing.
Michael T Ganschow Green: right here in the lower right of my browser window and when it come down here and click on it hi clicking on oops raise this up now, not that way now maybe that way.
Michael T Ganschow Green: still getting used to this, this way of doing things then there's the book let's move up a little bit further.
Michael T Ganschow Green: get a quite high enough, there we go click on that little guy and you get a preview in browser a little pop up menu, with all of the browsers you have installed, so I can go hey Google chrome I would very much like.
Michael T Ganschow Green: You to preview in there, and there I am with all my crazy ducks and my links in my self perpetuating index link and my title link.
Michael T Ganschow Green: So, before I go a little crazy here and show you a couple more html things, and then we dive in just wait look at that let wait a minute i'm still zoomed in I didn't even show you that properly cheese look at me oh man, no.
Michael T Ganschow Green: guys gonna be like what is he talking about So when I went down here and I popped open the little this little preview open this thing up I popped up in Google chrome there it is hi Hello.
Michael T Ganschow Green: And there is lovely lovely little ducky hi ducky went.
Michael T Ganschow Green: As well as a beautiful title link to somewhere I don't know my website, as well as the self replicating link.
Michael T Ganschow Green: In the other title now I turned I took off turn off target blank on that one, so that it won't just keep reopening new tabs I am.
Michael T Ganschow Green: A merciful God so before we get any further with html or anything do we have any questions related to what we went over last class any any html questions that you guys didn't.
Michael T Ganschow Green: You guys we're bombarding you with html questions in canvas so apparently a lot of you a lot of you have ideas about html, so this is cool.
Michael T Ganschow Green: So i'll give you the Florida ask a little question for a second here and then we're going to jump in.
Michael T Ganschow Green: Alright cool beans.
Michael T Ganschow Green: And let us jump in so.
Michael T Ganschow Green: um.
Michael T Ganschow Green: This is a good basic layout structure.
Michael T Ganschow Green: And I got a lot of questions from you guys about.
Michael T Ganschow Green: Do I have to contain my website in this way I he do I have to have all of my upper content in a header all of my central content in a main and all of my.
Michael T Ganschow Green: Bottom content in a footer and the answer to that is not necessarily the structure tags are here with a to help you well for three reasons to aid to help you organize.
Michael T Ganschow Green: Be to show a search engine and or a browser to give them kind of hints on where to display things search engines living room so it's a bit like this content.
Michael T Ganschow Green: and see the these structure tags well not displaying anything visually themselves, I mean I pop this open right here, and you don't see anything about header or a nap or our footer or really even our main.
Michael T Ganschow Green: Their hooks basically so there, there are two their organization tools and then they are.
Michael T Ganschow Green: hooks for.
Michael T Ganschow Green: Adding appearance to using cascading style sheets, which we will get into.
Michael T Ganschow Green: Either this class or next i'm not 100% sure.
Michael T Ganschow Green: today's basic CSS syntax day and then knowing the basics of both of those we're going to jump out and start building things next week, so these are hooks to add cascading style sheets to to modify and display and do all kinds of things with so.
Michael T Ganschow Green: um That being said, you don't necessarily have to use them.
Michael T Ganschow Green: there's only a handful of these structure tags and we will go over all of them through the class, these are just these are four of them right here there's a few more we'll go over as well as time goes on, but.
Michael T Ganschow Green: But they're there they're mostly to give browsers and search engines kind of a helping hand with how to display your website so.
Michael T Ganschow Green: That being said, along with that question, the other question I got is Michael i've been watching web tutorials why didn't you mention div tags Okay, and for those of you who are unfamiliar with div tags, which is probably most of you.
Michael T Ganschow Green: div tags looked like this.
Michael T Ganschow Green: bracket let me zoom in on the code here stop share zoom in.
Michael T Ganschow Green: One of these days i'll see if there's a keyboard command for all this stuff okay so div tags is like this.
Michael T Ganschow Green: So they are bracket.
Michael T Ganschow Green: bracket D of brackets racket.
Michael T Ganschow Green: When I get forward slash TIM bracket dibs are.
Michael T Ganschow Green: They were the very first layout tag introduced in an older version of html called X html 4.01 I in fact the direct predecessor html5.
Michael T Ganschow Green: And then one of a handful of carry overs well, not a handful but they're one of the carry overs from X html 4.01 into html5 and what a div tag is the Devon it stands for did vision.
Michael T Ganschow Green: And div tags were actually index html how you would lay websites out so you would lay out a bunch of gives all through your html file and then style them with a specific variety of cascading style specific variety of CSS rule and so.
Michael T Ganschow Green: These div tags were integral to laying out websites and, to this day, they are integral um they're less they're less used to now, now that we basically have similar functionality with our layout tags, but they are.
Michael T Ganschow Green: they're used where there is no layout tag to cover what you want to do yeah so if you're not sure what to do use a div tag and then style it with cascading style sheets to be what you want it to be.
Michael T Ganschow Green: So if you.
Michael T Ganschow Green: If you're not sure what to do with your layout build it with dibs and then you can kind of come back and figure it out later.
Michael T Ganschow Green: So, because dibs are basically the generic version of all of these layout tags there's no place in your design where they're supposed to be there's no overall container that they're working with there's no none of that there.
Michael T Ganschow Green: They can be anywhere, you can use them as many times as you want throughout the document, they are what started.
Michael T Ganschow Green: This layout trend these all of these structure tags are modified div tags basically live stands for division and was used for dividing documents up.
Michael T Ganschow Green: And i'm going to put a comment in here bracket exclamation point dash dash space notice all my html.
Michael T Ganschow Green: If I go and open the page now like let's say it's safe and I open the page oh they're all gone.
Michael T Ganschow Green: Oh no where's my deck go where'd my text go where'd my omaha know yeah yeah they're all gone I i've hidden them using a comment tag here so again comment tags got I got a couple questions on these.
Michael T Ganschow Green: How long can you write in a comment tag okay so.
Michael T Ganschow Green: I think I know why this person has to because I think they're one of these.
Michael T Ganschow Green: I have Okay, you can go as far as you want, in a comment tag and here's how I know.
Michael T Ganschow Green: I had a student find it a text copy of war and peace, the nominal that is famously unbelievably long thousands of pages.
Michael T Ganschow Green: And they found this text copy and the copy pasted the whole damn thing in a in one comment tag it was a.
Michael T Ganschow Green: bracket exclamation point dash dash war and peace of God, I don't even know how many pages, it is off the top of my head I think it's like 1200.
Michael T Ganschow Green: And then end of Warren PS dash dash bracket.
Michael T Ganschow Green: I should have been warned when he handed me a 300 K html file name is good size So yes, you can literally write Warren piece in the because that was the exam.
Michael T Ganschow Green: Right Warren priests in the comment you can put whatever so we literally pasted Warren piece in there, so I had to give him a few bonus points just for being that level of cheeky trolley.
Michael T Ganschow Green: So yeah You can write whatever you want as much as you want, in a comment tag none of it will show.
Michael T Ganschow Green: Their design entirely for annotating websites and annotating pieces of code and in their CSS flavor which will learn later on tonight.
Michael T Ganschow Green: annotating your style sheets so as you can see what is doing what, in your document Okay, so these these.
Michael T Ganschow Green: These content tags are really, really nice because they're good way to like talk to yourself.
Michael T Ganschow Green: Like if you know that you have a year from now, is going to come back and work on this thing you have to imagine you from a year from now, is not going to remember the minutiae of this website.
Michael T Ganschow Green: The way you from right now does so this is good for like for your own again again i'm helping you white blue little pieces of sanity back into yourself, this is really good to help you keep your sanity so i'm going to put this.
Michael T Ganschow Green: div tag.
Michael T Ganschow Green: is here to demonstrate div tags.
Michael T Ganschow Green: And you.
Michael T Ganschow Green: go there, we go so.
Michael T Ganschow Green: Yes, div tags and comment tags, you can comment anything and everything until the cows come home possibly literally I use that Okay, so I use that analogy some years ago as well understood and gave me a website with a.
Michael T Ganschow Green: ascii to cow in a set of comment tags so apparently everybody in my classes likes to take my various metaphors literally an attempt to realize them.
Michael T Ganschow Green: In the website, which is you know I got an eye on the spirit I got in my own spirit and that level of cheek it's quite good.
Michael T Ganschow Green: So Questions that was kind of an faq because I got a lot of those questions, I think I got to the rest of your individual questions as well, I have we found every thought of any new ones.
Michael T Ganschow Green: Since all of the messaging that I got yesterday.
Michael T Ganschow Green: Alright cool beans.
Michael T Ganschow Green: So.
Michael T Ganschow Green: That is the basic structure of html for those that were not here last class i'll do a quick review.
Michael T Ganschow Green: html tags html is a markup language, and when you hear programmer saying markup language, basically, what they mean are a set of tags that wrapper around information or objects and effect to them in some way.
Michael T Ganschow Green: So an opening html tag is bracket word bracket then a closing html tag is bracket forward slash word bracket.
Michael T Ganschow Green: And anything that goes on inside those is affected by that tag now the big power of html is they nest inside one another, this is called the cascade where cascading style sheets get their name from and basically.
Michael T Ganschow Green: As long as they don't interfere with one another.
Michael T Ganschow Green: They can combine effects together if they do interfere with one another in the html structure the furthest inside html tag will always win out okay.
Michael T Ganschow Green: So if you're getting any kind of interference between html tags look to the inner most tag in wherever you're having the issue with that will tell you where the interference is coming from, because this inner most tags will override.
Michael T Ganschow Green: All of the tags that are containing it whatever they are applied to also it will override.
Michael T Ganschow Green: In areas of conflict, whatever CSS is applied to those tags outside it, so that is the structure of html in a nutshell.
Michael T Ganschow Green: And then the various bits and pieces do various things this head up here is for things you don't want to show in the browser like links to your style sheet.
Michael T Ganschow Green: And some search engine metadata and then body is the stage body is where everything that you want to show on the browser goes so you can have fun and then anything in here will be visible to the browser for better for worse, unless you wrap it and comment tags.
Michael T Ganschow Green: And then you got to close everything body and html down at the bottom.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: That being that.
let's move on to CSS.
Michael T Ganschow Green: c s s cascading style sheets a whole nother language that's right we're learning the basic to two languages, over the course of a week and then we're going to combine the two together to do only the best things.
Michael T Ganschow Green: Over the next, what is this third week in February over the next 10 weeks of class.
Michael T Ganschow Green: So buckle up Buttercup we are going to start doing some crazy stuff here just inputting numbers match.
Michael T Ganschow Green: Alright, so that being said, let me get rid of the chat window here, so I can see.
Michael T Ganschow Green: All of my various Brady bunch camera heads over here Okay, so I fire open a text file and we use that.
Michael T Ganschow Green: To demonstrate, much like I use the text file to demonstrate html earlier, no, no, no, no, not from there we're going to move, you were going to move you.
Michael T Ganschow Green: To this, thank you, as a text that it alright cool so there's a nice little text file with a coupon code to something so we're going to write some cascading style sheets so Tom they educate you on the bits and bobs of a cascading style sheet.
Michael T Ganschow Green: cascading style sheets have a very interesting structure so.
Michael T Ganschow Green: The actual cascading style sheet itself refers to the text file another dot txt with a fancy extension like html just dot txt with dot html and.
Michael T Ganschow Green: CSS files are just regular old text files dot txt with dot CSS on the end.
Michael T Ganschow Green: And inside the CSS are a series of styles or rubles they the terms are used interchangeably but they mean the same thing and each individual style or rule affects something in your document Okay, so let me show you.
Michael T Ganschow Green: I see here's how they work.
Michael T Ganschow Green: So the very first thing you have when you're writing a CA rule or a style.
Michael T Ganschow Green: Is a selector.
Michael T Ganschow Green: l EC T Michael selector so this selector basically says.
Michael T Ganschow Green: What do you want to affect with this CSS rule, what do you want to affect with it, where do you want this thing to point, what do you want it to do actually what you want to do is not yet this is where you want this to point, what do you want what you're about to do to affect.
Michael T Ganschow Green: So the selector is a pointer points to somewhere in your document.
Michael T Ganschow Green: Regardless of how you are, regardless of how the document is set up, basically, you can point to whatever enjoy.
Michael T Ganschow Green: Then you've got a curlicued bracket.
Michael T Ganschow Green: And a line or two later another curlicue bracket.
Michael T Ganschow Green: These curlicue brackets basically signal the area for where we're going to enter modifications to what we are selecting with this selector so.
Michael T Ganschow Green: Basically, these curlicues are sort of de mar they're they're kind of like i'm like a little mini body in and of themselves, whatever we do in here is going to affect whatever we have on this here selector.
Michael T Ganschow Green: back you like Michael add a little extra room in here, so we can see what's going on, then within a year.
Michael T Ganschow Green: We have.
Michael T Ganschow Green: Two different items separated by a colon.
Michael T Ganschow Green: So, first we have a property.
Michael T Ganschow Green: she's not a type Michael.
Michael T Ganschow Green: First, we have a property inside our salon.
Michael T Ganschow Green: And this property is.
Michael T Ganschow Green: is something we want to change about our selector fonts landing kearney and tracking size, with their height color background color.
Michael T Ganschow Green: placement.
Michael T Ganschow Green: Any of those things and more work to learn all about that more that Morris carrying a lot of weight there anything about that more but pretty much whatever you can imagine, you can affect with the various properties that CSS has okay.
Michael T Ganschow Green: Then there's a colon.
Michael T Ganschow Green: And you can either have a space or not my preference is a space, again I like lots of room to work with.
Michael T Ganschow Green: And then over here you have a value okay so selector is what you're affecting with the CSS room property is the thing that you're changing what font size type size color.
Michael T Ganschow Green: Do you want a gradient do you want to put a border on it, do you want to rotate things whatever you want to do this, property is what you're doing.
Michael T Ganschow Green: And then the value is how you're doing it what color do you want to change your type what font do you want to change it, what exactly is the width measurement you want to use, you know how many percentage are with.
Michael T Ganschow Green: How thick is your border and what color is it that kind of thing so once you found a value and you close off each property value combo with a semi colon.
Michael T Ganschow Green: So you have the style sheet, you have these these styles these rules.
Michael T Ganschow Green: and have a selector pointing at something.
Michael T Ganschow Green: Or, more than one, you can have as many properties, as you want on styles, I will i'll show you a big one here in a second.
Michael T Ganschow Green: So you can have as many properties, as you want, so you know let's say i've got a let's say i'm looking to modify my H1 that big that big.
Michael T Ganschow Green: Bold text at the top of my website that I would have a selector named H1 it would automatically point to it and i'll probably have something like a font color font size of an actual font itself type face whether I wanted to book be bolder not.
Michael T Ganschow Green: location of it, too, I wanted auto centered don't want the text left line to right aligned in that auto centered area, what do I want to do.
Michael T Ganschow Green: So cool stuff then.
Michael T Ganschow Green: Once I get that up, then this is how i'm going to modify it what color is that type, what is the.
Michael T Ganschow Green: What is the what is the placement that kind of thing so select your property value yeah.
Michael T Ganschow Green: We have actually before I jump any further any questions.
Michael T Ganschow Green: Alright cool beans.
Michael T Ganschow Green: So we have multiple ways of selecting things with CSS there are multiple selector types.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Let me show you each one.
Michael T Ganschow Green: So you can tell when you look at a cascading style sheet, what kind of selector you're dealing with.
Michael T Ganschow Green: Based on what is in front of the selector what is, what is the character in front of a selector.
Michael T Ganschow Green: So when you're looking for selectors.
Michael T Ganschow Green: They come in a few different flavors.
Michael T Ganschow Green: The very first.
Michael T Ganschow Green: and probably the second most common that depends on the depends on the website and the developers preferences for how he's building it.
Michael T Ganschow Green: Is this could be either the most popular or the second most popular certainly most of my website it's the most popular, but I see other varieties of selectors more on some other people's.
Michael T Ganschow Green: So the first one is what's called a tag selector and the tag selector is for those of us who like to be lazy what a tax collector will do is it will go through your html document, and it will.
Michael T Ganschow Green: It will automatically apply itself to any of the html tags it finds in that document that matches selector so, for example, if I wanted to style that H1 tag I would do a.
Michael T Ganschow Green: H1 selector with nothing in front of it if you see a selector That has nothing in front of it, that means that it's a tag selector and it's looking for a specific html tag using CSS to learn.
Michael T Ganschow Green: html vocabulary, yes, yes indeed, so tag selector it automatically applies itself html tags great for those of us who incredibly lazy we don't have to do anything else with it at all at all, and we have to do is put that there point the CSS at our html file fire and forget we're done.
Michael T Ganschow Green: Like it never happened that day like it never happened okay so.
Michael T Ganschow Green: i'll just go and it's in in in in so next.
Michael T Ganschow Green: Brady bunch pictures out of the way there next.
Michael T Ganschow Green: We have what is called a class selector.
Michael T Ganschow Green: A class selector is a is the is either the first or second most popular type of selector that you will find in your.
Michael T Ganschow Green: In your in in websites a class selector is much more dynamic than a tax collector with a tag selector you're pretty restricted by what.
Michael T Ganschow Green: What you find in the document so whatever html tags are available that's all you can style and got repeating elements and all of that blah blah blah blah blah so, so there are limits to using just tag selectors, and this is where class selectors come in and fill in the difference.
Michael T Ganschow Green: Class selectors you can name as anything you can put any word or words separated my dashes After this period at the beginning, you can always tell you the end of the class style when you see a period in front of it okay So what does this do.
Michael T Ganschow Green: A class style.
Michael T Ganschow Green: Is a style that is manually applied to html tags so once you create your class style or you can create this before you create the class styles and then create class styles to fill it, you have to in your html tag.
Michael T Ganschow Green: That white space in your html tag so let's say we've got a paragraph tag here right, this has got it, this is a paragraph.
Michael T Ganschow Green: Okay, so we got a paragraph here and we want to apply this class style to it okay.
Michael T Ganschow Green: Now you remember last class when we talked about attributes the little things that you put in in the opening html tag.
Michael T Ganschow Green: modifies well look at this, we got a new attribute to learn, so if I want to add this client style here to my to my.
Michael T Ganschow Green: Paragraph i've put in an attribute get in between the last letter of whatever the word in the tag is and the closing bracket of that tag and put in a space and then I type in class.
Michael T Ganschow Green: equals quotation marks and then whatever word I type up here minus the period, so you don't want to type the period in in the attribute because then it will work, so my class style is called class, so I go class equals quotation marks.
Michael T Ganschow Green: Class this style right here this class style this class rule will apply to this paragraph and only this paragraph, so we're classes are really strong.
Michael T Ganschow Green: Is html is great for general targeting over your website things that that that that exist consistently throughout your website and web page that you want to establish and that you want to modify kind of all at once.
Michael T Ganschow Green: classes class styles or class rules are really, really good for like getting down into the nitty gritty you know you want to style a particular word when an individual paragraph or one link or like a button, or whatever you stick your.
Michael T Ganschow Green: You stick your class style in there boom, just like that.
Michael T Ganschow Green: So.
Michael T Ganschow Green: classes are really, really good for precision targeting you can also much like html selectors use them as many times as you want throughout the document.
Michael T Ganschow Green: Questions so far.
Michael T Ganschow Green: didn't want to blow your your headphones out there alright, so now we have.
Michael T Ganschow Green: come to an excellent show current styles are good for hyper specific targeting right well there's another one that works, a little bit like a class style.
Michael T Ganschow Green: And that is called it ID style and you can tell, an ID style.
Michael T Ganschow Green: Because it has a hashtag or a pound sign if you're an old fart like me in front of it so anytime you see hashtag whatever word that is an ID style ID styles work exactly like class styles, in that we have to add them to our document so.
Michael T Ganschow Green: i've got a nice H1.
And I want the style.
Michael T Ganschow Green: wow wow wow it's in capitals to signify margin bold if I want to add that ID style to this guy right here, then I have to add in another attribute in this case called ID equals.
Michael T Ganschow Green: ID exact same as class you don't want to put the hashtag in the attribute itself, otherwise it won't work.
Michael T Ganschow Green: So.
Michael T Ganschow Green: ID styles are like a real more restrictive version of class styles you don't really use ids for styling all that much ids or an attribute that's intended to be used.
Michael T Ganschow Green: For programming to trigger different things and stuff like that and typically you only use one ID per document so whatever word you choose for that ID that's unique to that tag per html.
Michael T Ganschow Green: So you're only really you don't really get a chance to use your ID style once per page, whereas when the class time just Willy nilly go into all over the place and use it where ever you don't done work we don't make noise, we can use it wherever in your document.
Michael T Ganschow Green: So tag class ID.
Michael T Ganschow Green: three big boys you'll see those a lot okay.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: there's one more that's really weird you guys like really weird like really weird so we got tagged we had class we got ID and those are the three main there was a fourth one that you will use a surprising lot and it's very strange okay.
Michael T Ganschow Green: it's called a pseudo class style.
Michael T Ganschow Green: And a pseudo class style is a starts with the colon.
Michael T Ganschow Green: A pseudo class style is like a little parasite.
Michael T Ganschow Green: or a symbol or a male anglerfish where it sticks itself to the side of one of these other styles and one of these other rules.
Michael T Ganschow Green: tag style class style ID style you stick it to the side of any one of those.
Michael T Ganschow Green: separated by a colon and no space.
Michael T Ganschow Green: Now these guys are on.
Michael T Ganschow Green: What they are used for is behavioral control in CSS but Michael you've been saying for like a month, now that you control behaviors with jquery and javascript yeah to us to end mostly for complex behaviors you do.
Michael T Ganschow Green: For non-complex behaviors you use CSS and you use disk guy So what is a pseudo class style Michael.
Michael T Ganschow Green: A pseudo class style.
Michael T Ganschow Green: Is a style, that is.
Michael T Ganschow Green: That will only apply.
Michael T Ganschow Green: When a certain thing happens in the document and there's a whole bunch of things that can trigger this a certain key is pressed.
Michael T Ganschow Green: A mouse hovers over an object, something is clicked the most common ones you're going to use are that hover and that click, but there are several others.
Michael T Ganschow Green: they're also used for targeting like if you've got a whole bunch of identical objects together, you can target one out of there by the whatever number, it is in the stack okay.
Michael T Ganschow Green: pseudo classes are very strange but they're basically applied a little and something happens in a browser when a form element is focused on that kind of thing and so.
Michael T Ganschow Green: They don't work nearly run when a web page loads up other than the number selector one, they do not run when a web page loads up they start running when something gets affected by an input in a browser key is pressed him a mouse interacts with something rolling over clicking whatever.
Michael T Ganschow Green: That will only then will whatever properties and values we've stuck between these curlicue brackets Only then will it work.
Michael T Ganschow Green: So questions on selectors.
Michael T Ganschow Green: four types.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So a quick obvious question.
Michael T Ganschow Green: Michael.
Michael T Ganschow Green: I went and I started looking through CSS files online by doing view source on or view page source, depending on what your browser sense on a particular file.
Michael T Ganschow Green: And CSS is looked very different than the structure you're showing here, and one that I saw looked like.
This.
Will separate ours.
Michael T Ganschow Green: Let me save this thing and working graphics so you guys can use it like this.
Michael T Ganschow Green: And I saying to me that is a perfectly perfectly valid way to write CSS My personal preference is to split them out with a little more space so, then I can see individual properties and values.
Michael T Ganschow Green: Yes, you and in the spacing with the property and value, I know you don't necessarily have to have that.
Michael T Ganschow Green: This is a perfectly valid way of doing a CSS so is this.
Michael T Ganschow Green: I much prefer this method to this method here.
Michael T Ganschow Green: Just because I can read this method here easier okay back the way I do it, I don't mean I don't typically have spaces here mine typically look a bit more like.
That.
Michael T Ganschow Green: look like that.
Michael T Ganschow Green: So yeah if you want to string them all out on the line cool good luck to having it but hey it's I you know I I I really stand aside for masochism in these classes.
Michael T Ganschow Green: So selectors properties values CSS structure.
Michael T Ganschow Green: You can see it to shape more complex than html you're not just dealing with bracket word bracket put some stuff in.
Michael T Ganschow Green: bracket forward slash word bracket but at the same time it's not like horrendously complex you're targeting an html tag where you're going to target or you're going to add a class style to that html tag you do something to it and it looks pretty.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So now, how do I write a comment tag in CSS so just to confuse you CSS is comment tags work quite a bit differently than.
Michael T Ganschow Green: html will not quite a bit, but they are different.
Michael T Ganschow Green: They work similarly and how the fireworks but the actual tag forum is different, so a CSS comment tag is a forward slash and a star and then whatever you want to write as a comment.
Michael T Ganschow Green: And then, a star and a forward slash That is how you like comments in CSS and comments and CSS are as important as they are in html.
Michael T Ganschow Green: Why, for the same reason, you are writing notes to yourself, or you are annotating things for other people on your team to take a look at so whatever you put.
Michael T Ganschow Green: In their comment tag is going is is is notes that will help you when someone else should work with work on the website so you can break things down, and you can you can annotate things, and you can.
Michael T Ganschow Green: You can talk to yourself, basically it's a way to drain some of your madness as.
Michael T Ganschow Green: So.
So.
Michael T Ganschow Green: One more thing, before we, and then we will dive in and start actually using these guys yeah.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Remember, when I was talking about specificity earlier with that class style that you can use a class style to really dig down in the weeds and really specify an individual tag or an individual part.
Michael T Ganschow Green: Well, you can do that as well, without necessarily using a class style.
Michael T Ganschow Green: without necessarily underlined know.
Michael T Ganschow Green: So without using a class style, you can do.
Michael T Ganschow Green: It you can also use class styles, in conjunction with these guys, which is how I use it, but these guys are called compound selectors.
Michael T Ganschow Green: What compound selectors are his mixes and matches of these selectors here, so they look like they typically look one of two ways.
Michael T Ganschow Green: Either look something like this.
Michael T Ganschow Green: or.
Michael T Ganschow Green: Something like yes.
Michael T Ganschow Green: shock compound selectors are unbelievably powerful.
Michael T Ganschow Green: And for people like me who are unbelievably lazy they're just manna from heaven I love using compound selectors and we will be using them all throughout the Semester their mixes and matches of these selectors here.
Michael T Ganschow Green: And what do they mean there's two varieties, what do they mean well.
Michael T Ganschow Green: If you see a compound selector where each of these selectors are separated by spaces, each of those spaces means inside, so this compound selector right here this guy right here means.
Michael T Ganschow Green: apply the properties and values, you have in the curlicue brackets to only only two to a tag to this tag style inside of this ID style.
Michael T Ganschow Green: Inside of this other tag style inside of this class so when you see spaces, that is somebody being very, very specific.
Michael T Ganschow Green: about what they want very specific about what they want, and you can run these out so you can get as specific as you want.
Michael T Ganschow Green: So what they're what they're doing is look for this inside of this inside of that inside of that inside of that inside of that ad nauseum I have seen some of these that are 25 and 30 selectors deep, you can like absolute precision specificity with these guys absolute precision specificity.
Michael T Ganschow Green: So you can really dig into your html and get down in like down to the like the little cell with these compounds selectors with this first type of compound selection.
Michael T Ganschow Green: So if you see spaces, that means inside looking for, so in this case, looking for this tag style inside of this ID style inside of that tag style inside of this class style.
Michael T Ganschow Green: Now the other kind are even more powerful.
Michael T Ganschow Green: If there is a particular property in value that you find yourself repeating throughout the document.
Michael T Ganschow Green: let's say it's a background color of red or something like that Okay, a background color of red.
Michael T Ganschow Green: What how do I keep using read over and over and over again there any way I can Jordan this make it easier.
Michael T Ganschow Green: let's say yes, yes, there is, and that is the second type of compound selector where they are separated by commas, and this type of compound selector is.
Michael T Ganschow Green: Not specific in terms of what it's targeting in the code it's specific in terms of its property and value so when you see commas separating the selectors here when you see the selector separated by commas, that means.
Michael T Ganschow Green: And so, whatever property and value, I have in my curlicue brackets here Okay, that means to apply it to this class style and that tag style and that ID.
Michael T Ganschow Green: And this tag style and so on and so forth, so you can stack in a 30 or 40 or 50 or 60 selectors and then put properties and values that you want to apply across all of them, and even stack them up as deep as you want to go, you know Warren piece here, you can stack them up so deep.
Michael T Ganschow Green: That you can barely see the end of it.
Michael T Ganschow Green: So.
Michael T Ganschow Green: This is how this is how they work, a selector what do I want to modify that's what the selector tells you then property how, how do I want to modify it in a value in what way do I want to modify it.
Michael T Ganschow Green: selectors how what am I what am I selecting my selecting an html tag with a tag selector Am I selecting a class that i'm going to add in as an attribute with my class selector and I can use as many times as I want.
Michael T Ganschow Green: War and i'm going to select an ID and ID I can only use once per document don't want to select that so i'm going to select that one attribute called ID.
Michael T Ganschow Green: And then do I want to change any of these based on like it gets rolled over by a mouse or a keyboard gets pressed or seller seller gets tab down through in navigation that's where my pseudo class comes in.
Michael T Ganschow Green: If I want to write notes to myself forward slash star star forward slash whatever I put in between invisible.
Michael T Ganschow Green: And then, lastly, do I want to be absolutely precise in my selection there's my compound selector I want to select this tag and this ID inside this tag inside that class will be absolutely specific or hey I like this fun, I want to use it on many things.
Michael T Ganschow Green: Put commas in there, those are any.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: No all right go.
Michael T Ganschow Green: let's continue, let me show you a few CSS this is this, this is in the wild so.
Michael T Ganschow Green: By magnifier you're in full screen again, thank you.
Michael T Ganschow Green: So enjoy a few CSS is, first, before I do that, let me save this text file file save into my working graphics Hello hi GMC 175 working graphics.
Michael T Ganschow Green: CSS bits CSS parts.
Michael T Ganschow Green: say.
Michael T Ganschow Green: There it goes and off it goes alright so CSS is parts close all right let's let's let's go let's go look at a few of these in a in action.
Michael T Ganschow Green: let's go to the class website will use this as a terrifying example So if you want to access a CSS you like the old way a web page looks and you want to see how they are styling it would cascading style sheets.
Michael T Ganschow Green: You basically just go view page source or whatever your browser's equivalent is.
Michael T Ganschow Green: And you rummage around in their code typically, you will find a link to the CSS is that are being used on a particular website in stop it stop it suits and get out of here I didn't want to trigger your chrome go go.
Michael T Ganschow Green: Out of my way and you do click on this tab Thank you so typically they're going to be found up in the head by and large, they don't necessarily have to be in the head actually to do CSS is do script stone CSS is do so I go up to the head tag have a website.
Michael T Ganschow Green: And hunt around to find CSS.
Michael T Ganschow Green: Then I got to do is they're typically live links and most browsers so you can just click on them and go and see what is going on, with a particular CSS this is as file now.
Michael T Ganschow Green: This particular CSS file is called a reset CSS and there's a bunch of these out there, this reset CSS.
Michael T Ganschow Green: Is is a.
Michael T Ganschow Green: A.
Michael T Ganschow Green: Cleaner What it does is it deletes a whole bunch of browser defaults so that you have absolute maximum control over your website.
Michael T Ganschow Green: And don't.
Michael T Ganschow Green: And won't get anything auto added to it okay browsers love in their defaults to add.
Michael T Ganschow Green: padding and margin add sizing whatever and every browser does it a little differently, I mean no two browsers agree on.
Michael T Ganschow Green: How big a pixel is you guys, so they all do it a little differently, and so one of the nice things to do is build a CSS that just takes care of all of it that's what I did there.
Michael T Ganschow Green: Now this layout CSS controls what this thing actually looks like and you notice this structure should look familiar.
Michael T Ganschow Green: selector bracket property value that semi colon and that colon.
Michael T Ganschow Green: Look whoo you guys Lu Lu we've got already already a compound selector the this reset has a huge one at the top, by the way, see all these commas.
Michael T Ganschow Green: All of that is the selector all of it every last piece, this is selecting most of the common html tags, there are and wiping out all your defaults from them So yes, you can write big selectors if you want, as long as you know what you're doing good.
Michael T Ganschow Green: Again here's a smaller compound selector.
Michael T Ganschow Green: Anything with a class of documents on the H1 tag it's resized this one's just a typical H1 tag style.
Michael T Ganschow Green: This one up here is just a body tag style adding some type and a background color and maybe a background image and maybe some background repeat enos and maybe some other background things to my body tag.
Michael T Ganschow Green: Again, highlighting my H2 tag there's a to where the contact instructor style on it each three.
Michael T Ganschow Green: Eight here's an eight tag that's got a pseudo class style of link on it so.
Michael T Ganschow Green: What this means is that anytime an anchor tag is added that has an attribute of a trend equals quotation marks to go to somewhere if I internal link to a page a file on your website or an external link out to another website, it will apply this style of that right there like so.
Michael T Ganschow Green: there's a style for my header.
Michael T Ganschow Green: style from a nap tag and then these guys these URLs are another list that we're going to use to build Naf button clusters, a decently shortly couple classes.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: I indented styles that are.
Michael T Ganschow Green: Sub styles of this ul navigation, so that I can see how they all in a react very similar to my tapping in in html.
Michael T Ganschow Green: there's my article tag style a class files class style and announcement class style it was links in that class files class style a little bit a homepage class got all kinds of classes down at the bottom if I scroll down through my style sheet, this is.
Michael T Ganschow Green: All of my background styles are actually that's taking them out there, I here we go, this is actually my background styles adding in my various background images for the pages.
Michael T Ganschow Green: Also, for those of you who have not seen the html for the class website, this is what it looks like.
Michael T Ganschow Green: And I deliberately open it up some because I knew students should be inspecting it so you can see how i've built things tab to everything over to immediately show really quickly what's inside what.
Michael T Ganschow Green: And then kind of explore how the class website works So those are some CSS is in the wild.
Michael T Ganschow Green: When I was demoing that did we come up with any a CSS question.
Michael T Ganschow Green: All right, well.
let's go mess around with our document.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So let's go.
Michael T Ganschow Green: hello, how are you very good good excellent excellent alright.
Michael T Ganschow Green: So click SAVE I think I already saved everything with that.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: The first way to add a style sheet to your document i'm going to show you is actually the wizard way in dreamweaver.
Michael T Ganschow Green: Why because it's it's Nice and easy relatively simple not as simple as coding linnean but i'll show you how to do that too, but i'm going to show you the.
Michael T Ganschow Green: way dreamweaver adds them in real quick because I actually use dreamweaver as busy wig a bit with CSS because I think it's got a nice menu to play with.
Michael T Ganschow Green: And there's some things I just don't want to code in hand code like gradients I like dreamweaver do that I don't want to mess it your stinking gradient so.
Michael T Ganschow Green: i'll let it let it do a little heavy lifting on that again, as I mentioned i'm lazy.
Michael T Ganschow Green: So let's do a little of that.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: First things first I want to color is her body tag.
Michael T Ganschow Green: So what i'm going to do.
Michael T Ganschow Green: First, is i'm going to hide everything in the body tag so all we can see is just a naked body tag.
Michael T Ganschow Green: So there was my header.
Michael T Ganschow Green: There goes my name.
Michael T Ganschow Green: Is goes live.
Michael T Ganschow Green: Yes, I know they're already mostly hidden when when when I know I know i'm.
Michael T Ganschow Green: Doing this as an exercise.
Michael T Ganschow Green: And lastly by by foot.
Michael T Ganschow Green: What am I doing.
Michael T Ganschow Green: Well, already have comment tags at the end of all these guys and therefore a closing comment tag.
Michael T Ganschow Green: So what I was doing was I was going through and just adding an opening comment tag to the front of them and commenting them out, so now that they're technically comment tags by go file save.
Michael T Ganschow Green: When I preview this thing in a lovely chrome.
Michael T Ganschow Green: there's nothing, nothing.
Michael T Ganschow Green: Oh go.
Michael T Ganschow Green: Now we're free to style it alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's play around with that, let me move my ready bunch heads over here to the side there and i'm going to close chat down, so I can see a few things I can probably minimize the Brady bunch adds a little bit.
Michael T Ganschow Green: sticky guys down in the corner okay so.
Michael T Ganschow Green: The focus cheering Sherman a lot of time window magnifies Thank you.
Michael T Ganschow Green: Alright, so we're going to go over here to our CSS designer.
Michael T Ganschow Green: CSS designer palette so that's how you add a CSS file.
Michael T Ganschow Green: shop the dream Weaver way order to add a CSS file.
Michael T Ganschow Green: I clicked a little plus right here.
Michael T Ganschow Green: Think, and I say, create a new CSS file so again my CSS designer palette I come down here to sources, which is the top thing for different things on this on this menu, you have one.
Michael T Ganschow Green: Go you have sources media selectors and properties, all of which we're going to use over the course of the Semester.
Michael T Ganschow Green: Particularly sources selectors and properties quite extensively media later on in the Semester, so I click this plus sign right here, and it says, I create a new CSS file attach an existing CSS file or define my styles in page now.
Michael T Ganschow Green: When you're creating.
Michael T Ganschow Green: CSS styles I highly highly highly highly highly highly highly highly highly recommend.
Michael T Ganschow Green: doing your styling in an external file now, why do I recommend this, because it means you only have to do your styling once for anything that repeats across your website.
Michael T Ganschow Green: So that once you've got all that style you just make that style sheet filed each one of those html files.
Michael T Ganschow Green: And then whenever you need to change something to one of those big styles you go in you click on your one style sheet that has everything in it.
Michael T Ganschow Green: And you change like say a background color and boom it changes it for everything across your website amber we thing across your website gets changed okay regardless.
Michael T Ganschow Green: So.
Michael T Ganschow Green: What does that mean well, that means that if you do if you do things externally, it will really help you later on, as your site grows, so I hardly ever use define in page for my style.
Michael T Ganschow Green: I only either create a new one or attach an existing one not case we're going to create a new one, so again I got here by clicking plus in my CSS designer.
Michael T Ganschow Green: palette I click plus and then I click create a new CSS file now what's happened it's vanished from your screens well hang on a second.
Michael T Ganschow Green: let's go to stop one share so it's popped up a little file called a create a new CSS file pop up.
Michael T Ganschow Green: So what I do want to have that.
Michael T Ganschow Green: Is I go browse.
Michael T Ganschow Green: And browse lets me point to where I want to save my CSS files, so what I typically do is I will click on my CSS folder because CSS folders are where CSS styles live at the whole point of having you guys create a CSS folder.
Michael T Ganschow Green: And then inside of my CSS folder I can save my file and you can name your CSS file anything I tend to prefer to be a little semantic of mine either layout or master or something like that so we're going to call this one master.
Michael T Ganschow Green: Then i'm going to click save.
Michael T Ganschow Green: The click OK bang now once I collect okay suddenly in my code or bunch of things happen when I clicked okay so let's focus in.
Michael T Ganschow Green: It moves zoom view.
Michael T Ganschow Green: portion of screen, we are now zoomed in zoom so a couple of things happen over here all at once, we click go.
Michael T Ganschow Green: First of all, we got a second row of tabs up top here, so now there is our file name tab right here, and then underneath we have another set of tabs one called source code which point store html and one called master dot CSS which points to our C s s file okay.
Michael T Ganschow Green: master dot C s s.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now I can edit this thing, also in my save if I go up, he said that the trick trigger the zoom pull down there we go I go to my file.
Michael T Ganschow Green: you'll see now save all is available and let's save all does it saves all of your open files if I go save all bang we're all set up so again a couple of we've got our.
Michael T Ganschow Green: index dot html overall tap our html now, we have our two new tabs html source code and master dot CSS so I can toggle back and forth between my style sheet and my source code in dreamweaver.
Michael T Ganschow Green: Also, for those of you who have your code open you'll notice in your head a brand new tag was added yo, this is a link tag.
Michael T Ganschow Green: Link tag is a singleton tag.
Michael T Ganschow Green: we've discussed them before much like that image tag on, but what it does, is it it's it's sort of a reverse anchor tag so the anchor tags mean go somewhere, this means come from somewhere and pull in so what this link does is when you link a CSS file, it will.
Michael T Ganschow Green: It will.
Michael T Ganschow Green: go through your html file and effect it will happen is your browser's reading code from top down, so it goes through debt that that that that that the it jumps into your CSS file and reads it first okay.
Michael T Ganschow Green: Then it goes down and starts reading through your html and based on the instructions, you have in your CSS file here, it will then modify how your index file displays.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: Now linked up linked up.
Michael T Ganschow Green: All right.
let's keep going.
Michael T Ganschow Green: don't you tell me what to do, thank you alright so we're gonna go stop share and do a mainland.
Michael T Ganschow Green: We give me a little tour around dream weavers CSS interface actually you know what no let's let's keep let's keep zoomed in here.
Michael T Ganschow Green: come over to our CSS design the palette i'm gonna show you guys a little bit around this thing.
Michael T Ganschow Green: And what a lot of these properties do and then we'll change our background color and do a couple of other things, and then we will be a good to go.
Michael T Ganschow Green: And then next week we'll start actually building proper websites with our terrifying knowledge that we're going to gain here now Okay, so one of the nice things about all of these little windows here.
Michael T Ganschow Green: Are all of these little kind of areas in your palate here is that you can click on the edge see we get the double sided arrow and drag these guys around So what are these guys exactly um well up here sources.
Michael T Ganschow Green: Is a set of.
Michael T Ganschow Green: clickable.
Michael T Ganschow Green: names which belong to every external CSS file linked to your html code.
Michael T Ganschow Green: Also in here if you open a page and dreamweaver and you see this, you might see a bracket style bracket in here, along with.
Michael T Ganschow Green: The list of some CSS file names anytime you see a bracket style bracket in here, that is a style sheet that has been defined in the page that thing that I don't recommend I mean she got one of those and you're doing that, like to you.
Michael T Ganschow Green: So over here is at media notice I keep media closed right now and medium.
Michael T Ganschow Green: Is a type of selector we haven't talked about yet called a media query.
Michael T Ganschow Green: I didn't talk about it because I want to fill your brains with things you might need immediately will do media queries later, but.
Michael T Ganschow Green: Basically what they are, is there.
Michael T Ganschow Green: They ask a browser questions and then based on that browsers interface size, for example, is it a phone is the tablet is it a is it a full size computers.
Michael T Ganschow Green: A smart fridges of the cars dashboard is a wrist on your isn't a watch and you missed, is it.
Michael T Ganschow Green: Is it a screen in the back of a dryer I don't know you don't know, but the media query knows.
Michael T Ganschow Green: So it asks the browser what size, are you and then based on what the browser tells it, you can style for different screen sizes, that is how you do what is called responsive design, which we will talk about.
Michael T Ganschow Green: Next week, when we start building proper pages with this thing responsive design, so these media queries this media controls that but we're not gonna worry about them, for now, that was just a quick little a little hint there so.
Michael T Ganschow Green: next step down, we have our selectors now y'all remember selectors from my CSS lecture so selectors are whatever you have highlighted here, whatever file or.
Michael T Ganschow Green: bracket style bracket if you're, particularly in lucky, you have up here, whatever selectors are in it will pop up here, so you can click on individual selectors.
Michael T Ganschow Green: and modify their properties and values Okay, and then down here we have a properties menu now.
Michael T Ganschow Green: i'm going to add a selector in here, using this menu here.
Michael T Ganschow Green: So that the properties menu will display at I can give you have proper to work, so I have my master CSS highlighted and i'm going to come over here and i'm going to click add a selector.
Michael T Ganschow Green: let's see what do I want to select well, I want to modify my body tag first I think once i'm done with all this we're going to put a pretty color on the body tag we're going to set an overall font for our document.
Michael T Ganschow Green: And I don't know one or two other terrible things, maybe we'll find out might even use baby's first compound selector tonight alright cool beans so let's do a.
Michael T Ganschow Green: Let us do a body tag selector so to do that again I clicked a plus delete it I click the plus sign here.
Michael T Ganschow Green: And I typed in body with nothing in front of it, so now we have a body tag selector.
Michael T Ganschow Green: And I come over here here to my CSS and I click on it, you will see suddenly suddenly like to add a little extra spacing dreaming or likes to.
Michael T Ganschow Green: him and how about spacing and CSS to like it does with html so I always like to add a little spacing of mine, but you will notice color coded even there was a body and a set of curlicue brackets.
Michael T Ganschow Green: it's almost like it was what Michael showed you in the text file there's less selector, and this is my properties and values, oh snap it's real it's really guys, I promise.
Michael T Ganschow Green: So here we go properties and values so like i'm in here and I select body now wait a minute Michael wait wait wait wait just a second you said, if we clicked on that a whole bunch of properties of chopped down here, yes, I did this is dreamweaver being helpful, so if a selector has.
Michael T Ganschow Green: properties and values on it in this mode, it will only show you those properties and values that are used on that particular selector.
Michael T Ganschow Green: If you want to see all of the available properties that dreamweaver offers, we have to do a real quick modification here.
Michael T Ganschow Green: come over here, we have to uncheck show set.
Michael T Ganschow Green: Now I will frequently check show set when I know that I have already existing properties and values in here because I can come in here and then just modify what already exists, but in this case I don't have anything.
Michael T Ganschow Green: This is the grand tour, this is the first time through so to do that, I have to uncheck that and show all of my excellent properties.
Michael T Ganschow Green: So there's all my ex and properties and now it's time to give you a tour of this little property section of our CSS designer palette because these are most of the common properties that you will encounter so first of all.
Michael T Ganschow Green: This little subsection is divided up into multiple sub sections of its own, so we have layout properties which are properties that are that will govern the layout of our page that's the top one we have text properties which are properties that will that we can use to modify our text.
Michael T Ganschow Green: We have border properties, I hope you guys like boxes and lines, because this is where you make.
Michael T Ganschow Green: boxes and lines and hope you guys like to round some rectangles are we feeling rounded rectangles because this is it around some rectangles, in fact, if you round them just right turning in circles.
Michael T Ganschow Green: To tell anybody, then we have background background is where you put in colors and images in the background, of whatever you're selecting in our case it'll be the body tag so the whole browser window will light up.
Michael T Ganschow Green: And then, lastly, we have a custom area where you can add your own properties lesson if we're adding your own properties don't do it here do it in the frickin text file yo.
Michael T Ganschow Green: Because properties easy once you know them alright, so that is a tour through Let me give me a little tighter tour though real quick and discuss some properties that we will be playing with throughout the Semester.
Michael T Ganschow Green: All right, here we go so we'll start off with our layout properties and again i'm navigating through this with the buttons on top, although I may scroll as well, you never know you never know So here we go.
Michael T Ganschow Green: So the layout properties, a lot of them are pretty self explanatory Okay, first we have width.
Michael T Ganschow Green: which is exactly what it says on the tin how wide is whatever you're selecting with your selector going to be height is the same how tall is that.
Michael T Ganschow Green: Beneath these are Min width and Max a Min width and height and Max width and Max height.
Michael T Ganschow Green: These are a little more complex.
Michael T Ganschow Green: Men with immunity immunize mean.
Michael T Ganschow Green: Typically, when you build a website and you set everything up if you don't put a width on it, everything will go 100% of the width of the browser window so 100% of the width of the browser window will.
Michael T Ganschow Green: will basically mean mean that everything expands full screen and, as you scroll and, as you crunch it down, it will continue to crunch and crunching crunching crunch until it shrinks down to nothing missing your whole thing smashes together in one pixel.
Michael T Ganschow Green: So here at Min width and Min height.
Michael T Ganschow Green: You can set a distance, how far down, it will crunch to, and then it will stop in the browser will display scroll bars she have to scroll around your content.
Michael T Ganschow Green: Max width and MAC side of the exact opposite, they are maximum stretch how wide a browser window goes.
Michael T Ganschow Green: it'll just keep filling 100% and it'll stretch all the way out like taffy if you're not careful Okay, so what you do is you, is with a Max width and the Max height, you can set these are that the thing will stretch out boom and then it will stop Okay, then it will stop.
Michael T Ganschow Green: display display is a damn magical property, you can turn with display you can turn anything you can apply a selector to which is anything in an html document.
Michael T Ganschow Green: effectively into a structure tag with this thing will be doing a lot with display over the Semester, you can also show and hide things as well Okay, you can show and hide things.
Michael T Ganschow Green: With display as well we'll be playing with that.
Michael T Ganschow Green: box sizing don't worry too much about box sizing that's something that we cover more in to 75 and even then not too much so don't worry too much about that we may get into it a little bit with our navigation, but not a huge guy to worry about.
Michael T Ganschow Green: Now the next couple of these little squares here margin padding and position we worry a ton about okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: objects that you modify with CSS are governed by a set of rules, called the box model Okay, and what the box model is is.
Michael T Ganschow Green: Basically, everything in a website is a bunch of invisible boxes.
Michael T Ganschow Green: and your job as a designer is to either work with the boxes or make the boxes, so that they're basically invisible to the user, but you're still using boxes building blocks essentially to assemble this whole thing okay so.
Michael T Ganschow Green: So this box model is all about manipulating these boxes, and that is fundamentally laying stuff out with CSS um it's not terribly different.
Michael T Ganschow Green: Theoretically, from laying out stuff in indesign we have boxes that have images in them boxes that are texting them all of that it's it's it's very similar to that and so um it's something that that.
Michael T Ganschow Green: Once you've played around with it a little bit and have used the page layout software will come a little more naturally to you this is basically just doing that, with like.
Michael T Ganschow Green: math and not really all that much math it's just like we it's in distances and things like that there's a little math in here sorry guys but.
Michael T Ganschow Green: But it's not that terrible so margin is the distance from the edges of an object to another object so from an object to another object.
Michael T Ganschow Green: padding is the distance from the edge of an object to whatever is inside it so padding will push an object apart will push an object will enlarge an object horizontally and vertically, whereas padding will push things away from an object.
Michael T Ganschow Green: position is basically a way to take control over where things appear in the browser window and force them to go places will be using position quite a lot in here as well, there's a lot of fun things you can do with position.
Michael T Ganschow Green: float is particularly crazy okay so flow is you notice here in our html right that the html stack is pretty much vertical and as we put stuff in our html document it pretty much aligned everything vertically right, so this vertical alignment.
Michael T Ganschow Green: basically means that web pages are naturally columns well well float over here are boy float.
Michael T Ganschow Green: is a way to modify that so in float basically you can take whatever pieces of the html stack.
Michael T Ganschow Green: That you want to that are vertical and basically take them all and turn them one way or another, so you can take the html stack and turn it from vertically to turn it on its side either to the left or to the right and again does not work if you don't make the sound okay.
Michael T Ganschow Green: So you can turn objects different ways, based on float so basically that you stack objects, instead of vertically stack them horizontally really handy.
Michael T Ganschow Green: Now, when you want to resume your vertical stack you simply mark the next object in line, after your float with a clear and it will come pass them will play around with floats and careers in here quite a bit.
Michael T Ganschow Green: overflow our content overflow controls, so if you have content that exceeds the size of one of your continue boxes what should it do it defaults by just letting the content spill out.
Michael T Ganschow Green: But you can specify with these overflows are different things, you can specify this pop scroll bars does it clip off and hide anything that is outside of it does it does it splay it out, what does it do it defaults displaying it out, but there are other controls for that.
Michael T Ganschow Green: This ability is another way you can control, whether things are visible or not in the document.
Michael T Ganschow Green: Z index oh we're going to be using.
Michael T Ganschow Green: we're going to be using the index in here okay so most websites are pretty much on an X, Y axis horizontal and vertical right when you start playing Z index, you can push your design toward your user push them out toward your user Pope your user right in the lens on their eyeballs.
Michael T Ganschow Green: Just like that you push it outward you now control all three axes with CSS using the index.
Michael T Ganschow Green: I promise you that.
Michael T Ganschow Green: And then opacity that's transparency so whatever you apply a pass need to gets more and more transparent, regardless of what kind of object, it is this one actually we don't use quite too much mostly we use color to do opacity, but we will use it occasionally, I believe.
Michael T Ganschow Green: questions on any of the spider webs been kind of jabbering in your ear about this stuff and I realized, I have not stopped to ask questions so i'm going to take a question interlude do we have questions on this stuff.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: All right, let's move on to text, so the text section is pretty much exactly what it says on the tin Okay, this is all of the guys that you use to modify your text okay.
Michael T Ganschow Green: So color appear pretty self explanatory what color do you want your text to be font family, this is what font do you want to use.
Michael T Ganschow Green: A font style, this is, do you want to set italics do you want to set a bleak do you want to select, what do you want to set their.
Michael T Ganschow Green: font variant do you want to find to be a normal font with upper and lowercase letters, or do you want to have some small caps font weight, do you want to build your font.
Michael T Ganschow Green: And you have normal boulder boulder lighter and then a series of numbers that some browsers will work with and some won't we won't work with i've never really seen these numbers work.
Michael T Ganschow Green: At all I mostly see normal and bold, I don't see too much bolder and lighter that doesn't seem to work either, so the ones that seem to work most commonly in browsers are normal and bold remember.
Michael T Ganschow Green: it's anything you do in a web design is fundamentally up to the web browser to display it does not want to display that little piece of code what.
Michael T Ganschow Green: Cat font size, we have a lot of sizes oh yeah let me show you the size of CSS is work with so here's our whip.
Michael T Ganschow Green: You can set your size in pixels points pikas inches m's or two inches centimeters millimeters per cents.
Michael T Ganschow Green: And EMS and a rams exes ch is be w's vhs demons and V Max will go over a few of these as the Semester goes on, but EMS and rams.
Michael T Ganschow Green: This is m sizing and for those of you who have taken the page layout class, this is exactly emphasizing that they talked about in their sizing type the size of its capital m.
Michael T Ganschow Green: percents we use most commonly for width in html or html and CSS so most things are going to be sizing with wise you're gonna be sizing with percentages if you're not using that default hundred percent with.
Michael T Ganschow Green: And then the rest of the time we're primarily using pixels, but you have all of these different sizes available to you okay.
Michael T Ganschow Green: And those same sizes, that I just went over you have visible to you have usable to you.
Michael T Ganschow Green: As type font sizes as well pixels points pikas percent EMS rims Ecstasy h's and then a few presets XX small small Small Medium large extra large XX large smaller and larger.
Michael T Ganschow Green: Most of the time for your font you can be sending it with an m what you're basically percentages based around the size of a capital M and your document.
Michael T Ganschow Green: underneath that is line height line height is letting.
Michael T Ganschow Green: letting.
Michael T Ganschow Green: Pretty self explanatory text align left Center right or justified you guys should be familiar with those.
Michael T Ganschow Green: text decoration do you want to know text decoration underline an overlying or a strike through and align to the middle, what is this good for well we're actually use this quite a lot.
Michael T Ganschow Green: This used to strip underlines off of your links notice how, when we create a link actually we can't right now, because it's hidden, but when you create a link it automatically adds an underlining me to type What if you don't know.
Michael T Ganschow Green: What if you would like your text to demonstrate that it's a link some other way.
Michael T Ganschow Green: Take all the text decoration off it and it's gone.
Michael T Ganschow Green: text in denting now this isn't like traditional paragraph in denting where does the first line, this is basically pushing over a whole paragraph within denting will use this one too much.
Michael T Ganschow Green: Now text shadow is awesome text shadow is a drop shadow specifically made in CSS for type of a lot of fun with this.
Michael T Ganschow Green: let's see here i'm going to horizontal and vertical shadow control how far does a cast biller is it a tight shadow that just looks like like a second piece of type underneath.
Michael T Ganschow Green: Or is it a bigger shadow that fuzz is out a little bit more what color is your shadow you want to make an awesome like I don't know pink shadow go all all all.
Michael T Ganschow Green: All right now below we have text transform text transform is do you want regular type of capitals and lower cases do you want all caps, what do you want no caps.
Michael T Ganschow Green: letter spacing and word spacing are tracking and current in those good old guys white spacing.
Michael T Ganschow Green: don't we don't really play much white space in because, not a lot of browsers use it, which sucks because I think it's very interesting it's kind of a paragraph space or thing we use other ways to space paragraphs.
Michael T Ganschow Green: Vertical alignment would be great if browsers listen to it, they don't much so we don't use it a whole lot.
Michael T Ganschow Green: These actually this right here list styles we're going to use these a lot Okay, because we.
Michael T Ganschow Green: lists are very critical structure building tool in web design and we have to use these to modify them so let's style position shows you where your bullet sits on your list list style image, you can set a custom bullet for only your lists dear.
Michael T Ganschow Green: And list style type, you can set what kind of list these are.
Michael T Ganschow Green: Then now we're at the border section so border is basically how you set lines either.
Michael T Ganschow Green: lines, all the way around making a nice stroke or lines on any edge and you can send them with a width so you can set a a width of different sizes again you've got your pixels.
Michael T Ganschow Green: Points pikas inches centimeters millimeters percent EMS rams x's and ch.
Michael T Ganschow Green: And then you can set the style in line you want oh we're gonna have fun with this one you have no line a dotted line at dashed line a solid line a double line a groove a Ridge an inset line and outset line and a good.
Michael T Ganschow Green: And then you can set whatever color you want right there.
Michael T Ganschow Green: Border radius around the edges.
Michael T Ganschow Green: Well, rounded edge rectangles.
Michael T Ganschow Green: A border collapse, to be nice it was used more by browsers it's basically how far in from the edge, do you want your border or how far out from the edge, do you want your border border spacing again would be great if browsers actually use it, they don't really hugely and so it's, not us.
Michael T Ganschow Green: That would come to the background section oh snap dog here we go backgrounds backwards.
Michael T Ganschow Green: background section is where we control background images in various whenever we're applying our selector to and background colors so we can select a color here.
Michael T Ganschow Green: And it'll set it for the body, you can set a background image here, you can even set a gradient which will play with all of those oh.
Michael T Ganschow Green: Hopefully, and on, and I will play the gradients and images next class we're going to put a background image a font and some color and then unlock it and the match.
Michael T Ganschow Green: background position, this is a background image thing you can position it in your browser window, however, you like background size, you can size your background image we use that a lot actually for full screen backgrounds and things like that play with those background clip.
Michael T Ganschow Green: wouldn't really use background clip a ton so I wouldn't worry too much about it background repeat which way, do you want your background image to tie oh.
Michael T Ganschow Green: background origin again don't worry too much about that one background attachment, do you want your background.
Michael T Ganschow Green: This comes, this is a question for allison do you want your background to scroll with your website, or do you want it to stay fixed and have your website scroll over the top of it.
Michael T Ganschow Green: background attachments scroll and fixed so allison that is the first form of parallax and right there, yes, about parallax and, at the beginning of the class this background attachment right here that guy right there that thing is that is where you control that so.
Michael T Ganschow Green: You can build your entire website on top of a background.
Michael T Ganschow Green: or even put a background image in a particular box, make sure it's full size of the browser window and then you set a background attachment fixed and that image will stay in place.
Michael T Ganschow Green: And just sit there with a whole website scrolls over top of it very, very simple pair Yes, he very, very simple parallax and so that is how you do parallax thing, and once we attach background image next class, you will know how just like that that's simple.
Michael T Ganschow Green: Then, lastly, at the bottom, here we have a box shadow what's a box shadow you ask it's a drop shadow for objects that aren't live type.
Michael T Ganschow Green: You can do horizontal and vertical distance blur of fuzzy it is spread how far out, it is pick a color you can even punch it in me having fun playing with all of those.
Michael T Ganschow Green: So that is the 10 cent tour of the properties menu will be doing more detailed examinations each and every one of us will be writing some properties of our very own and.
Michael T Ganschow Green: Once we're once we get further along here so question for the class rather oh God, here we go get those chat fingers ready.
Michael T Ganschow Green: i'm about to about to not to do it again guys.
Michael T Ganschow Green: Remember that you're gonna have to look at this thing for several classes what what what background color would you like us to have.
Michael T Ganschow Green: For our website.
Michael T Ganschow Green: i'll let you guys pick the background color i'm not even gonna look until you guys put it in the chat and then we'll see what colors you guys picked.
Michael T Ganschow Green: US and then let.
Michael T Ganschow Green: It go there chatting and configure the writing in the chat right now, all these terrible colors I couldn't welcome back and welcome back and.
Michael T Ganschow Green: i'm not gonna look okay let's see what they're doing okay we'll give him another minute to throw another moment to put these in and what colors if we chosen we've got all of these colors we've got purple sky blue barney purple geez oh boy.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: All right, since Kathy was first I will leave these colors in place i'll hang on to this online under this chat text.
Michael T Ganschow Green: And I will use will use sky blue barney purple and cream sickle.
Michael T Ganschow Green: For other things as well, so those will not have gone to waste or in vain, we might do like a critical header like a barney purple navigation, or something like that, so I will hang on to this chat as I do it all chats.
Michael T Ganschow Green: So I can keep these things, and we will use those colors so they are we've got a nice color scheme that is very um let's see between cream second sky blue and a couple of different purples This is very like.
Michael T Ganschow Green: instagram influencer girl's bedroom with like a bunch of fairy lights all over the place, and like purples and things on the walls, I think I think I think this is going to look like it's gonna be pretty interesting.
Michael T Ganschow Green: As this thing evolves over the course of the whatever.
Michael T Ganschow Green: tinker bell green yeah sure sure sure sure sure sure yeah you guys keep suggesting colors like I said i'm gonna keep this chat.
Michael T Ganschow Green: And i'm going to refer back to it so For those of you who didn't attend class today sorry you don't get any input on the colors that we're going to be seeing class.
Michael T Ganschow Green: yeah you guys keep suggesting colors have fun i'm going to close chat now will you guys keep throwing colors in there Okay, so the first one actually oops I close chat a little too soon, because I believe the first one.
Michael T Ganschow Green: That was suggested was a purple was it not, yes, it was a purple so we're going to do a general purple I think like a mall or something like that, so that our eyes don't get seared constantly when we open this website up.
Michael T Ganschow Green: So let me show let's add a background color first is.
Michael T Ganschow Green: Now we're just doing sesame street colors asked you to grab screen okay so let's go to background here we're going to background the crap out of this thing so.
Michael T Ganschow Green: i'm going to the properties menu and i'm going to click down into my background and we're just going to mix a background color first okay so we've got a background color right here and i'm going to click this and open it up and let's open up our lovely little thing here, so does that.
Michael T Ganschow Green: brother Michael pop it up a little further, because people have to see the people not see so we're gonna open the ass to gotta go any further, the further.
Michael T Ganschow Green: Further little further oh come on come on don't be funny Thank you all right now, so we have a interesting little color mixer here with dreamweaver and it's actually fairly robust color mixer okay.
Michael T Ganschow Green: um it defaults to what are called hex colors which are you guys saw them when we did the color wheel DEMO the basically they had a hashtag on the front and then they have six numbers and letters afterward to make the.
Michael T Ganschow Green: To make the the color up in the browser so what these guys are really good for is.
Michael T Ganschow Green: Like some precision color mixing but they're not really used anymore, because browsers have now gotten support for art like hey hey hey stay open for rgb a.
Michael T Ganschow Green: rgb a is going to be our primary method for making colors in here.
Michael T Ganschow Green: Why well rgb is pretty easy, you can pull an rgb mix out of any graphic software in their color area, all of them support rgb so you can mix colors really easily in any graphic software.
Michael T Ganschow Green: also note the a on the end of that the a on the end of it Okay, that a stands for alpha so anything in here that you color with this, you can also make trans parents, and that is really cool so you can you can make it.
Michael T Ganschow Green: Any you can you can make it whatever color you want with rgb mixers and then you can also add transparency in.
Michael T Ganschow Green: Now if you're not sure what colors you want, you also have a eyedropper tool over here which works like an eyedropper tool any other graphic software click anywhere on your screen, whatever it select it'll make the color that.
Michael T Ganschow Green: All right, let's pop the chat back open chat see what you guys have been typing in here.
Michael T Ganschow Green: Okay, so we ended with big bird yellow fair enough so i'm gonna go mom mom mom mom let's do that.
Michael T Ganschow Green: I so you got a pretty standard mix here.
Michael T Ganschow Green: You have your saturation right here you've got your whew what color it actually is, you got to tense and shapes here, and you got your alpha your transparency i'm not gonna worry about transparency, because this is a background instead we'll make sure it's set to rgb a.
Michael T Ganschow Green: And then i'm going to select.
Michael T Ganschow Green: Nice kinda pale purple it'll be okay, for us to look at, in fact, let me get a little darker would like to type white against it, how does that sound yes let's make the type white against it.
Michael T Ganschow Green: So, once you have your color selected in here I gotta do is press the return key and boom it's selected now we open this up a little let's go stop share and show the big one, so now.
Michael T Ganschow Green: Share screen right there.
Michael T Ganschow Green: So now, if I pop this open in a browser.
Michael T Ganschow Green: purple look at that beautiful now you guys because it's your world can make your websites whatever color you desire.
Michael T Ganschow Green: Alright, so there you go there's a nice purple notice, by the way, let me zoom in again stop share notice that.
Michael T Ganschow Green: Share notice that over here in our body tag we've sprouted a background color property.
Michael T Ganschow Green: And a background color value and rgb a color mix so that So the first number is red second number is green third number is blue last number is Alpha and alpha is in a percentage so we'll play around with alpha once we get into transparent things later.
Michael T Ganschow Green: Alright, so let's see what else we can do here let's roll rummage around type, I want to make our site type white and I would like to make our.
Michael T Ganschow Green: Maybe make it a different phone we just had a thought that's dangerous all right so from a type color here and make a white shoe It shows nicely against that purple.
Michael T Ganschow Green: Make sure it's set rgb a if it isn't make sure it is otherwise you'll be getting hex colors.
Michael T Ganschow Green: yeah no don't worry about it now notice, I have two colors in my CSS so it's hilarious the color property, the actual color the just color is only for text colors okay only for text colors.
Michael T Ganschow Green: If you want to color your background, you have to use background dash color for your property both though notice of values of rgb a mix is, in this case it's white so it's just all their colors all of them at 100% on Passover.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now let's change up the fun a little bit too let's get us some funky work going on you.
Michael T Ganschow Green: need to do to do okay so up right now we have a handful of default font families available all those menus big.
Michael T Ganschow Green: Time to stretch out the magnifier hey stop eight I said stop throwing me a Doc Thank you Thank you all right time to stretch out that magnifier a little bit because we have quite a few of these now.
Michael T Ganschow Green: Funk families are fonts are spect a lead differently in CSS than they are in a graphic software in a graphic software you pick one font okay.
Michael T Ganschow Green: In CSS because you are beholden to whatever the browser chooses to display you must take into account that a browser might not have that font.
Michael T Ganschow Green: So what you have to do is basically build in fail overs and these fail overs are separated by commas so, for example, if I want to do a San Sarah which I do.
Michael T Ganschow Green: First things first CSS looks for the gotham font if it does not find the gotham font then it goes to find a Helvetica new a font.
Michael T Ganschow Green: If it does not find to Helvetica new a font and it goes to find a regular Helvetica.
Michael T Ganschow Green: If it does not find that Helvetica it will go to find an aerial it does not find that area it will go and find whatever the designated sancerre.
Michael T Ganschow Green: On their system is and if they're not using One of those is they're saying Sarah they've got an oddly setup computer in the.
Michael T Ganschow Green: So my case I think we'll do everything sancerre of when like a nice big white sand Sarah when I come over here to my CSS notice it's now sprouted a font family property color coded purple yes.
Michael T Ganschow Green: And then we've got gotham there's Helvetica new way Helvetica Ariel and saying Sarah.
Michael T Ganschow Green: To go but Michael I saw only seven or eight of those fail over stacks Am I that limited on funds, yes and no, you want to use the default fonts that come with CSS.
Michael T Ganschow Green: Yes, if you want to feed in your own fonts externally know and i'm going to teach you guys how to make web fonts and feed them in externally.
Michael T Ganschow Green: Later on, it actually uses a type of media query that at sign selector we were talking about earlier in class.
Michael T Ganschow Green: that's use mostly as a like a thing that asked questions of screens like what size, are you a screen there's also a type of media query that forces a font to show in a browser regardless of if the computer has it or not, it basically feeds it out of your server, and so the.
Michael T Ganschow Green: So you can use that to feed your fault, but yeah if you just want to use the default yeah you're kind of stuck with seven or eight of them, but that's okay we're not going to use the defaults we're more powerful.
Michael T Ganschow Green: Okay, so i'm going to do a quick save all actually we're gonna come back here i'm going to go to my source code.
Michael T Ganschow Green: And I am going to hide everything.
Michael T Ganschow Green: Here we go i'm now on hidden everything we're now at the mercy of the duck you guys so i'm going to stop screen sharing here.
Michael T Ganschow Green: Big boy screen share oh my desktop close and we're gonna go to my room and look at that look at that I have a nice sancerre of gotham white type over a purple background.
Michael T Ganschow Green: So I think your brains are probably crammed fairly full at the moment and I think that may be a good jumping off point so does anybody have any questions relating to this madness that we have done tonight.
Michael T Ganschow Green: we've got a color palette now we're going to use it all, all of them all, all the colors too bad you people weren't here, you know saying the colors.
Michael T Ganschow Green: So questions.
Michael T Ganschow Green: The funds we use your day.
Michael T Ganschow Green: They will not work until you use a media query to make them work Estrella So if you just use the fail over methodology, if you just use.
Michael T Ganschow Green: You know this comma set and if the user's computer doesn't have it, it won't show it'll default down to whatever the fail overs, however.
Michael T Ganschow Green: If you use the media query to feed the font in you can make any fault work, so you can feed in whatever you want i'm going to teach you guys how to do that before your project to do so that you'll be able to put in all of your beloved custom fonts and.
Michael T Ganschow Green: Other questions it's a good one.
Michael T Ganschow Green: alrighty then so i'm going to give you guys the remaining half hour as open lab i'm going to hang out here and i'm going to put on a little video on building websites with html and CSS So if you guys want to watch, along with me it's one of the ones I linked in the class announcement.
Michael T Ganschow Green: please feel free otherwise, that concludes our broadcast day you want to ask questions and chat or talking to me in chat or whatever or.
Michael T Ganschow Green: You know, talk to me over your microphones feel free i'm just going to have this thing running with a nice little video on it, so let me change my screen share to include computer sound optimized for video Sir.
Michael T Ganschow Green: YouTube well michaels instructor YouTube and we are going to go oh instructor YouTube why toby and we go hey hey why toby so let's go my history should be in my history here.
Michael T Ganschow Green: decently high let's go history.
Michael T Ganschow Green: See to do that the crash course let's go down here, I was watching it a while ago.
Maybe a.
Michael T Ganschow Green: Second, all right, let me see if I can track this video there's a couple of good ones actually yeah was that one all right.
Michael T Ganschow Green: let's go, what I want to do, and it will do nice befuddled European guy.
Michael T Ganschow Green: hi we are you doing my dear, and we are popular web comics one of those days.
Michael T Ganschow Green: About that none of these days yeah and what you can do is just use these pre.
Michael T Ganschow Green: This T shirts is so tiny little different records his friends on the Internet is essentially morning for.
Michael T Ganschow Green: Goodness and where you know pens i'm all ready to get going, you guys asked for me like 10s of thousands of comments that's a lie, it was like five comments.
Michael T Ganschow Green: of building out last week's web design the glass the glass website, I thought they were going to do it right now glass i'm not sure why opposite example, but why not positioning and let's get going, let me.
Michael T Ganschow Green: Go to so um so positioning of images is done in a couple of different ways, Australia, which will go over on this class goes on, you can either use that positioning thing that I showed you or we will use.
Michael T Ganschow Green: margin and padding to opposition images or we will even use alignment to position, and there are many ways to position images i'm going to show you all about those various ways as we go on here that's that's that's another good book.
Michael T Ganschow Green: Good questions so i've actually had a link to a github so you can get the images that I use there.
Michael T Ganschow Green: And this is how the folder is going to look okay so we're going to have an index dot html just like that for gonna have a style dot CSS which is empty we just removed the margins and the padding on everything.
Michael T Ganschow Green: And we have some images that I acquired off the internets and that's it so go down to this not using dreamweaver he's using a program called visual studio but the coding stuff is all.
Michael T Ganschow Green: is generally applicable to what you guys are doing and get hub right now get it right, then check out my courses as well okay plug and let's get going so i'm going to give you some time to do that Cree to what time's up okay so let's get going let's open up live server.
Michael T Ganschow Green: Open live server we have nothing, this is what we're going for right, so this dependency not going to focus too much on like aligning things perfectly.
Michael T Ganschow Green: Because that's not the point of it we just want to make this glass sign, and we also want to have the blur in the background and everything when we put things in the background.
Michael T Ganschow Green: And stuff like that Okay, so if this is not perfectly pixel ally and then screw you.
Michael T Ganschow Green: Okay, just to keep things simple I think i'm only going to do, like the basic glass thing and then we're going to code out the content inside just to keep it simple.
Michael T Ganschow Green: Okay, so what i'm gonna do is actually style up this section here is with the background.
Michael T Ganschow Green: So for that we're going to create a main section like that and that's going to be the background and then we're going to have a section called glyphs right, so we section, with a class of glass that's weird to say.
Michael T Ganschow Green: Which is this Okay, so this whole glass here, and this whole class of glass.
Michael T Ganschow Green: Okay, and after death so in here we're also going to have the dashboard parts and we're going to have the active game spot a little part here advanced but we're gonna keep it simple like this, so what they're doing.
Michael T Ganschow Green: Just so we can do the glass thing style it up and then we're going to add the content.
Michael T Ganschow Green: What else i'm going to do actually before we move on, is outside of the main here actually I can add the inside here as well, or outside doesn't really matter and let's go outside.
Michael T Ganschow Green: I was just gonna add these circles so i'm going to see circle one i'm going to copy paste it and see circle to okay circles, right here, so we get that effect, Nice and pretty okay let's head over to our our style dot CSS so it's actually quite simple.
We can grab the main here like that.
Michael T Ganschow Green: Just like that i'm going to add the minimum height to this of 100 V each and then that basically means that.
Michael T Ganschow Green: It should take up the full speed of the monitor right here.
Michael T Ganschow Green: Then what we're going to do is add a background right i'm going to say linear gradient so we're mixing up two colors or.
Michael T Ganschow Green: Two ago right top, which means we go in diagonal alright so to write would mean that we go from this part, all the way here.
Michael T Ganschow Green: But to right top means from down here all the way up there, he the way he writes great I think that's, the reason I will a lot roscoe OK, so the color is i'm going to add is hash thing six five the FC nine I have it written on the other, monitor and the other one is six CD.
deb from baby.
Michael T Ganschow Green: All right, those are the two colors I picked so if we go here we have this beautiful fantastic sure no problem and there came and I think that's it here we can start with a glass.
Michael T Ganschow Green: Bearing it probably sometime tomorrow morning of the class class so first of all i'm going to have any background to this for you probably wouldn't even among.
Michael T Ganschow Green: Saturday at the latest, so I take up 80% of the screen see it i've said this to me up remind remind content i'm going to add the with a final one is to bend your crashes, all the way out i'm gonna see 60 just like that.
What i'm gonna do is actually Center right here in the middle, so to do that what you can do is just use these three properties to say display FLEX.
Michael T Ganschow Green: And then you can see a line item Center that's going to align it vertically and then justify content Center is gonna do it horizontal there's writing CSS.
Michael T Ganschow Green: White box now now these two don't work if you don't add the split FLEX so make sure you FLEX every time talk about flexing okay.
Michael T Ganschow Green: Now, this still doesn't look that good it doesn't look too glass you to me So what we need to do is add a background and we're gonna say linear gradient and away we go here's the magic.
Michael T Ganschow Green: The magic rules, we can add rgb.
Michael T Ganschow Green: And what rgb he loves to do is to control it.
Michael T Ganschow Green: With rgb color okay so i'm going to say to her right bottom on this one and i'm going to see rgb a we're gonna pick whites to 55 to 55 to 55 that's white.
Michael T Ganschow Green: But the Turk property here is actually the capacity, which goes from zero to one, so if I see 0.7 here that's going to be 70% capacity.
Michael T Ganschow Green: As that mother loving comma after it and say rgb K through eight 255 252 55 0.3 right so it's 32% look 50% skill okay there we go so that will be take a look, look at that we.
don't have 70% there and 30% there wow.
people get excited about this for some reason.
Michael T Ganschow Green: yeah there we go, so it looks pretty good can experiment with this make it look the way you want, you can add all sweet border to this to add that.
Michael T Ganschow Green: Little line that white line I don't i'm not a big fan of it actually so i'm just going to keep it simple at this, what I can do is also added the border radius to make this nice rectangle i'm going to see to rem.
Michael T Ganschow Green: Basically Ram is a certain amount of pixels so you can just go here and say like rather that still works fine i'm going to use rem for fun i'm going to see to run there we go and now it's all rounded and good looking.
Michael T Ganschow Green: Okay, so next up we're going to add our lovely circles i'm going to say circle on circle, to now these basic.
Michael T Ganschow Green: properties as to glass, so what i'm going to do is just copy things over from up here, first of all days, the background right off the BAT.
Michael T Ganschow Green: throughout the summer, they need the gradient i'm going to copy that over and here, actually, we can add the intensity of it bigger, I can say something like.
0.92 0.1 just change it up a bit for fun i'm going to add a fixed hype to this 20 rem.
And a width of 20 rem.
And if I save right now.
it's here, but you cannot see it, but to see it i'm going to add the position absolute and when you add the position absolute Now you can move this around wherever you want, so if I say something like.
Michael T Ganschow Green: Actually, when I left that position yeah, let me just go here and say top 5% so there it is right there all right so it's 5% from the top portion of the screen if I add something like left 10% well it's going to be pushed 10% from the left side The thing is, though, that.
Michael T Ganschow Green: Both circle one and circle two are together here, and I do not want that so i'm going to copy i'm going to add that position absolute here, however i'm going to select circle one separately here so circle one and circle to.
Michael T Ganschow Green: i'm just going to modify these so i'm going to get the top and left cut paste down here and i'm just going to change this right i'm going to say 15%.
Alright, so position that there and I can get the other circle so circle to and move it somewhere else, I can see bottom so let's put this 5% down here and left 10%.
Alright, so just messing around with this moving them around for fun.
Michael T Ganschow Green: And that should do the trick Okay, and the problem is, is that these are actually on top of our main class and what they want to do is actually put it behind it.
Michael T Ganschow Green: All right, so if I go down here and just add a background color of red you're going to see that this is actually food that's that hurts us.
Michael T Ganschow Green: it's actually on top of the class and want to put it behind the glass, so the way we can do, that is, I can go here to the glass and add easy index.
Michael T Ganschow Green: Alright, and the bigger than number of CNN or fox or do that damn thing is going to be all right push it out there, glass, has a Z index of three, for example.
Like that then it's going to be pushed the head.
Michael T Ganschow Green: So, if this has a Z index the circles of easy index of to who's going to be in the background.
Michael T Ganschow Green: right if I add five, well then it's going to be forward again because it's higher number 10 this year it is OK, so I just need to add easy index of tree here, I think I can go to two because the default is one.
Michael T Ganschow Green: So that's fine alright so it's behind our glass which is good now how do I add that blur effect super simple, we just need to go to our glass and just see background filter.
let's see blur and just add the number here so i'm going to see to rent.
And it's not working well, you.
know I messed it up.
Michael T Ganschow Green: it's not back background bank drop my apologies backdrop filter and blur and there we go.
Michael T Ganschow Green: The higher you go here, the more intense the effect is going to be so go 10,000 100,000 look at that you cannot even see the background so let's just do something small like to rem I think that looks pretty cool.
To rem hit save there we go perfect and now we can get rid of this Fred because I do not wanted their lovely.
Michael T Ganschow Green: Now actually i'm going to raise up the intensity of this i'm going to see one year on the circles and 0.5 or something alright, because I want that effect to kind of pop up there more intensely.
Michael T Ganschow Green: Now, I also want to make the circles, so what you can do is you can go through the circles here and just add the border radius of 50% and there we go there perfectly round lovely.
Michael T Ganschow Green: Actually i'm going to lower the intensity here but it's to do strong 0.8 0.3 let's see yeah that's fine that's good it's good like that i'm happy.
Michael T Ganschow Green: So all the people mess this up and they're like no my border radius is not the circle and I add that 50% will be careful because it's not going to work if your height and width are different, so my.
Michael T Ganschow Green: My with is like 50 gram and the height is 20 rim, the old are going to get this weird shape right, so you need to make sure that your height them with her the same.
Michael T Ganschow Green: So the border radius 50% this kind of work right or if you're smarter than me, you can just download the svg and just import that as an image and not try to do it with this, but whatever dude.
Michael T Ganschow Green: Okay, so we are done, we have our little glass and we have our circles as well, we can go back to our index dot html and start coding it up a little bit so again what I wanted to do is add the dashboard here, so this part and this part to continue okay so let's go here.
Okay, so inside the glass here.
Well, they want to do is add a dashboard that.
Just like that, and here, and the dashboard we're going to have three things we're going to have the user section, so this we're going to have the links and we're going to have this.
Michael T Ganschow Green: I don't know pro joined to become a pro section so three sections so we're going to create tweet this.
Michael T Ganschow Green: Okay, so let's go and create three tips, we did create the user section and in here we can navigate to image and we're going to go to images and we need to get the Avatar okay that's a picture of me included for free.
you're welcome you're welcome.
Michael T Ganschow Green: i'm going to write my name here also make sure you join my only fans link in the description we're going to have a paragraph to see pro Member link that lovely alright so after the user we're going to have the links i'm going to create the links section links thing, though, add incoming.
Michael T Ganschow Green: What would what does if we had a single continue on time.
We could steal from.
me here we have multiple links i'm going to see linkedin.
And in this link live, we have an image.
All right, i'm gonna just drop random images let's do the twitch i'm going to add the H2 that says streams.
i'm just going to copy this three more times so this whole link copy paste it based it basis and we're just going to modify the text here so streams that's the first one, then we have games.
Then we have you.
And then we have library.
Okay, and then we're going to just modify the images so i'm going to go here grab, which is a steam.
This one i'm going to change it to the upcoming.
And this one i'm going to change to library.
And it's safe.
Michael T Ganschow Green: Right So there we go that's what we have that's good and finally extra this whole link section so go here up where you have links and click on it that's going to give you a good indication of where that depends so click on links, here it ends, I can go after it we just had.
Michael T Ganschow Green: The pro pro button pro.
Here i'm going to just say join bro for free games.
Michael T Ganschow Green: Okay, what does he image i'm just going to add the controller here like that.
Michael T Ganschow Green: Okay, and last one, we have is the section right here.
So we just have basically a title, I mean I add, like a search bar here.
But it's super simple to do, I guess we're going to throw up a super simple example and the cards alright so it's super super easy.
Okay, let me see where I am.
So after to pro.
And here.
If I click on this one, this is the whole dashboard okay so after deep dashboard right here, right above the section we're going to create a games div and here we have the status alright so state this being this part and then we're just going to add the cards.
i'm going to add each one seeing an active games.
i'm going to add the input, which is going to be our search input.
And after this we're going to create the cards so cards that I, here we have multiple cards again so card.
image i'm going to grab the let's do the assassin's creed like that.
And inside here, so we have our image let's take a look, so we have the card, we have the image.
right here, but we also have kind of imagined splitting this up into three more sections OK, so the cards contains the image and the text and the progress bar and the percentage OK, so the image i'm going to create the section for the card info basically so another div.
H2 assassin's creed of all.
Terrible game, by the way, I played like.
Michael T Ganschow Green: Like five hours of it and it's incredibly boring I eventually ended up playing sandpoint great venture, which is a fantastic game I don't know what I don't know what people are doing with assassin's creed man it's like.
Go get me my soul.
Michael T Ganschow Green: I got the sword and beat like 10 people super boring, I have to travel with the horse.
Oh, thank you for giving me the story here is 10 shekels.
quests completed wow that was boring okay.
So any here, we also have a progress bar progress like that just the super simple emptied of.
Now, after the card info we have a percentage.
So let's do H2 and then give it a class of person to then say 60% like that.
Okay, so this this part here.
Michael T Ganschow Green: Okay, and that's we are pretty much done, I think we just need to copy and paste this card multiple times and we're getting.
Michael T Ganschow Green: things up grab the card click out of the car good copy paste or like Michael is grab this whole thing and coffee it two more times one and two, and we can change the text and everything and the images eventually but we're good for now.
Michael T Ganschow Green: Alright, so this is why we have wow.
Okay.
before we jump into the CSS.
You know what they say we need to take a break, because we need to stand up sitting too much unhealthy.
So tune the music.
Michael T Ganschow Green: dance break.
let's continue my apologize.
Michael T Ganschow Green: In advance website for your business first go to wix.com.
i'm margo from.
Okay.
Where are we.
let's see.
Michael T Ganschow Green: Okay, so we have our dashboard now, if you take a look at this dashboard it's still pretty much the same glass design alright so glance so we just need to kind of duplicate it.
Michael T Ganschow Green: Before we do that, I want to have this dashboard on left side and the games on the right side So how do we do that.
Michael T Ganschow Green: Well, we can use FLEX again so basically in FLEX does is it basically you guys all it takes like content that works.
Michael T Ganschow Green: And what's it called horizontally alright, so if we have our dashboard, then we have our games sitting like like this one beneath each other.
Michael T Ganschow Green: Adding FLEX is going to put everything work vertically all the child elements are going to be put vertically okay so we're going to see that in just a bit.
So, all we need to do is go back here to the glass.
And just add a this boy a.
FLEX.
it's safe.
Okay.
So let's see so as you can see, it just takes the two thieves and what's number two.
Okay.
So, now that we have that.
We can have additional fun So how do I allocate space as well, maybe I want this to be smaller than this section, well, we can use FLEX so I can go here and just grab the dashboard.
And if you use the FLEX one property that basically takes up all the available space left so it's going to take up all the space left.
Now it cannot take up all the space here, because the other content starts, but then just take some the available space, if you add FLEX one to the Games as well, so if I go here and see games and say FLEX one.
Now the space is going to be split equally alright so both of them are going to have kind of like with 50% and with fruit 50% now what if I want this to be twice as big as this well, then I can have FLEX to the Games, and now this one has twice the amount of spaces this okay.
Michael T Ganschow Green: That makes no sense okay all right so there's the last version so let's go here to the dashboard to broadcast day later recording people.