Intro to HTML & CSS

1. INTRO: Hello, everyone. This is Arthur. And today even give you an intro to HTML and CSS 40 days class. We're gonna learn what software we need to get started, including chrome supplying texts and the service people claimed that I so get host website . We're also gonna learn about how to I filled out a website properly. What that means is my learned what issue mellitus its structure and its attributes. We're gonna build out a actual atrial, but page content we're gonna test about but actually building a quick arrest you together afterwards were also Millard about CSS. What see is this is how you write CSS and how you include styles onto the page. And at the end, we're gonna have a really solid ace portfolio that we can use to showcase some work we've done in today's class and to evolve over time as you learn more about friends Element, Let's get sorry 2. LETS GET STARTED: Okay, great. Let's get started. So first things first, we wouldn't have a big status track. We will make sure we have all the tools we need to be productive in this class. We make sure we have some blind texts, which is our code editor crown, which is a preferred browser to use and paper plane dot io. And that's gonna let us host our website online after it up next. We also did a walk through what Asian L request is, and finally, we'll take a look at file structure Trans Verceles and you making sure you're comfortable sitting up a Web development project. Let's take a look at the tools we need. So over here we're gonna make sure that we download Chrome browser choice. There's other reasons for this, as you have all into front of development, Chrome is really easy to help you debug a lot of the issues you would have. Second, we went down the sublime texts and what this is, as you can see in there lovely, just of putting it all together. It is a code editor, and this will allow you to build things as you go further. So not only just each human. It sees us, but you can start building other coding languages in here. I travel script python node. The world is your oyster Last one. At least we want to sign up for paper plane dot io Now it is free to try and I can even sign it in my account right now. You can see here that I have a number of sites that I've actually worked on for myself and for different companies I've worked with. So So you could easily have your own website hosted by paper plane and you can work off fit there. He's You know, when you actually worked with paper, plain sight there just connected through a dropbox account. So one other thing you might want to set up is your own dropbox account. And if you don't know, that is just goto Dropbox No. Come and set this up for free as well. So you get free housing for everything you need as you get started. So now that we have sublime chrome and we set out on a cattle people plain io and dropbox, if you don't have that already, let's talk about what's happening as we walk through nature, my request walking their nation on request. So what happens when we do type in that www google dot com into our omelet bar or dress barn in our browsers? The browser has no idea what Google means. What, So it looks for the I P address, and what that means is, it looks forward. The domain name system. It's essentially a phone book. So we connect the domain name, which Tom to an I. P address, which is a series of numbers and that is set out from the browser as a hypertext transfer protocol. Or http request basically asked her google dot com for HMO. We get that reply back, reads received browser and it decides, what do display downloaded? Whatever. We have some else that help us out. And Boof Yeah, we have a website. Maybe the else are not really there but you know you get. And the reason why before we go with a file structure and transfers, it is the reason why we talk about, uh, knowing what request responses is because you don't understand that the browser itself is what translating your coat for you. So why you make that request on the Internet and goes out to the wild blue yonder. The browser is what's actually helping out here, and what it's receiving is this. So all the idea information in those files text and all those Texas looked at folders guys , I should say, and those files are stored in folders. So this is the biggest idea that I find that a lot of people don't understand what development is literally just a full restructure. Any website you go to contains very specific files, but they're just a folder and you can have him on your computer anytime. That's it. Everyone paid you've ever visited on the Internet is a bunch of tax organized in a certain way on a computer. The significance of building this site is going to start with the inducts, so we've already seen that. So we've gone to some domain and you just have a domain name or you have the nerve means stash about Daddy Shima. You usually see the ladder after click on this menu items and website. But if you see the former, you've ended up on the home page aside. Now the induct Sandy Chanel is the fault file for the home page. So we start building our sights today, including the cookie Rest Me and Folio Slight. Our home page is going to be named index dot Aoshima So there should always be the name of your home. We think about building our sites as well. We want to make sure we understand the folder structure. So we put everything together. Would you make sure that we have a top file? Here are my awesome assets site there. We then have an assets folder and that can hold images, occult sounds, things we might need for that long. We won't have a Styles folder and that will hold our CSS. So whether it's our means, yes, Asir, what have you that's gonna be there? And finally we can have a job script folder and that's kind of the next level. So beyond intro ing Tosun success, the other front and code, you would think about it's JavaScript code and that kind of provides a herd functionality to our websites and you get to learn about that in a separate class later. And then finally we have our html five. So we have our index, our values, human contact issue. Obviously, you don't need to build you to one of these things, But remember that every issue of Valley build will end with a dot html and remember that your home page should always be an indexation. Some notes about structure and going through up and down your file structure transfer sel. So supposedly were in our documents folder on our computer. We have a couple of folders here, including our website. If I want to access my hands himself, the PNG dropped in my probably a pick. Let's say to excess that image from my documents, I would do something like my some site assets, my hands himself, the P and G. The forward slashes are the same thing as you clicking into four months, so really easy. But what if we're building HTML or CSS out and we want to access something in the water? So what? I wanna go inside my cells. They're like so and I want to get my image from there. In that case, I would actually write out about that slash assets cash, my dashing look like I know it's in my house himself, but, you know, I have so many files of my beautiful Self. Very humble. If you can tell in this case the dots Ashraf signifies going up on level and then going inside and other folders. In this case, we're going up a level and going inside the Florida with fine. Where that asks for her. It's getting that image assets. I won't go over this point too much right now, but you still keep in mind. So we start connecting images or CSS files stories. Shame out. We need to be comfortable actually putting this in in the code itself so we can link out and connect them together. So now we've gone over some getting started pieces. Let's actually get into building the insurance CSS itself. 3. HTML BASICS: Okay, so let's start off with some issue my basic. So we're giving our content structure. We think about the foundation of friend and development or Web development. A. She male is our wooden nails of our house and CSS. We're gonna learn next is more of our said. It's in our style. So what is a Shima? Asian L stands for hypertext markup language. It's a language used to displaying content texts, images, tables. Links would have you. It's also language to give again structure for your site. Will that continue need in there? It's also a front end Web language, so that means it's interpreted by your browser. The difference between Friendly, which isn't backing languages, is that the browser on your computer chrome Firefox safari would have. You are taking that information and displaying it, downloading it, translating it for you to easily understand why on the back inside, that's going to be translated by a server and pass on to you. The browser has nothing to do that. So the thing about the structure for extra number and he'll get a code example in a second as well we look at the structure recreational most html tags are gonna be having open tag and a closing tag. So where you see that brackets and tag name and brackets and tagging again, but a little slash before that that's our elements. So Ted name, other tag name and in between are content lives. I mean to say tag or element. So I might say, either since they mean the same thing. In what development? A couple of sample ties. We take a look at here with the title time, which gives the information in the actual browser title of age we have in each one tag, which is sands for heading hair ass, Which pretty makes sense pretty obvious. They are. We have a link tax when we link images on the page rolling out two. We were different nation. I should say you're going to use a link tax for that. So let's take a look at some code and see what a shame actually looks like. Get out here. We're looking at a very basic example based email so we can get rid of all these other pieces here. And, uh, just in case you're curious when I'm looking at right now is less. I called coop en dot io. I use it often to show examples of code on site, and it's another way they build out Conan play around that on your own without necessarily needing encoded area computer, though I do suggest getting that sublime text for the projects we ever. Each one tag here, and that is a header element, and headers are used to make sure that you have semantic information for each section of the site. So we have ahead, and we can also also have a paragraph. So we have a little paragraph here, which has paragraph information and a link, and you'll see here that this link has each rest. What does that stand for? That stands for hyper link reference, telling it where it's going. In this case, I haven't going to Google account directly back change. I like to anything within those a quotation marks for now, say welcome to Intro Pretty Straightforward. So let's get a little couple other tags and think about house. We concert using a shima before we get into additional tags. I wanted to go over a couple of the actually, so you're finding athletes allow you to define certain characteristics about attack. So coming back streets are again that be treff, that we looked up for a style attribute, which we can talk about it. We'll talk a little bit. We get CSS and class and I d which we'll also talk about. We're going to see us us some quick examples that you can see here Our image tabs, which had need to take in a source, should be our photo that we're gonna actually display on age again are linked tag below, which we're looking after. Google, as you can see our paragraph in and each one both have different ones here. So we have a class which is going to fine external styles for paragraph. And we have a style Tiger Norwich one which in which wish to find internal styles within the pages out and what was defined exactly what internal and external meats I don't think I want to do is on this page. Is that the in the image source where the image tag, I should say, doesn't have a closing tag? It's a handful tags in html, but don't need it closing tag image being one of them. So as you're learning this. Make sure to double check on sites like W three schools. Whether you're HTML needs a closing tag or not, it's better the savings are in close. Um, it won't cause any issues, but those didnt so we talk about those HTML tags, and the additional as we have here, some of the basic ones that we need to get started are right here. HC Male, head and body all do have closing tax, and they define our page. So when we start in, your doctor may. Now we want each team out top want, followed by ahead everyone and then go to the body attack. We have things like the navigation tag, and Mata lets us define navigation links or element that's gonna hold navigation routes inside of it. And we have things like Dave's or sections, and both of these are different tabs with. They define a section with documents up young that we have some additional tax give ethicists, or to add color and imagery to your side. So you have things like the horizontal won't tag just was a little break, a little border between the image site that we saw the form we can see that every requires an attribute of source, so we never image. We're getting the metronome. What? Amy? For showing the strong and AM tag, which both Bolden's a text or emphasizes that italics and the break long and brake lining rule. So we're revealing tag, which breaks any content damage itself. Play around these tags as you're learning how to code and see what they do to your content . So before we actually build out our cookie recipe, let's talk about something else. We're gonna keep in mind in some other tax. We're gonna talk about HTML nesting. So what is nesting? HTML it having elements within elements. So think of it as a parent and child type of relationship. And remember that as of your parents, but looking behavior to some of the great is going to be inherited to the Children. A good way to start thinking about nesting is in two forms. Lists and tables. Now we're Mantle Street on this today with our crew here, speak and are in our profile page. But you can also play a round tables in this element lists. Are we going to start out either in two different tags either ordered lists or unwatered list in each one of these hold list items. These little L one tax. So we'll take a look at that example of this in second, but just make sure you think it's out order. This wall was being number when you see them in a Shimao and I'm order. This was have bullet points and every one of those bullet points or remembered are gonna be list items themselves signal you have tables now. Tables aren't used often in a stream out, going out front in code, but they are very useful for things like booting out a resume. Perhaps will you need exact tables and cells put together. And again those air would be ordered by the main table, the road in the table and the columns of in their own. Let's take a look at some issue, no nesting examples, and here we are. So we have a couple of examples were here. So first, let's notice a couple things. I have a little bit here finding a section on age itself. It has a child. One has helped to paragraph. So these are Children within this div apparent again, a nest it doesn't have to be a lister table. It can be any element of page. We're looking at this one ordered lys here. You can see that we have each individual one and I don't try one shout too. But indigenously under child three, we have another in order to list and that can be our grandchildren. And I said to branch of Herman, you should say grandchildren to there. Finally, it's refresh woman. So that's something in mind. Nothing. He go far deeper sick of your child. You have a grandchild, you have you great grandchild. Even on one thing to take a look at here is once again those unwanted less You noticed there are bullet points. If I change his tag to you know well foreign ordered Lis, you notice now I have 12 and three for that topless. And because this is stone on ordered elicits a bullet point Still below that. So again, I think when you are setting up the structure of your website, if you do have to do nesting should be an automotive less important this how many of the Statham's do you need? And if you're Nessen things do you want it to inherit that styling. That's something about later when we talk about CSS. So now our next piece here make this big for you. We're gonna talk about best practice really quickly, and we're gonna do a lab. So we're gonna start building out cookie recipe together. So first, best practice commenting. Always comment Your code and house. You could see here. That's how you build a comment. In each email, we have a little carrot explanation, Part two dashes. And you put in your comment there and then two dashes enclose carrot. Everything in the comment is ignored by browsers. You don't worry about it showing up in your code, but it really helps you and other people that you work with understand your coat. It's a best practice and I tell you to definitely you it as your buildings out. So let's go to our first site together. We're gonna open up the cookie recipe folder and that started project in Sublime at in some relevant taxes content make it appear like the including image, which I might show you in a second. They won't take a minute break. Just just you guys walk away gets coffee stretch. Feel good. Make a top. Let's take a look at our final example. Here. Look at this. We can build this great gingerbread man recipe. Don't worry about the styling of this yet. Just we're gonna build out the eastern mill. It won't go from there. So how do we open? This is the context. What's first? Have a sublime text open. Well, so Test one knows you see here and it's Azizi. Assists. Go over here. Yeah. You know, again, the solution me and grab our started code, the recipe file and was gonna drag and drop it right here. And I ain't seen sublime. We have. I am unsure. We need to connect. And we have our in depth studies. Schimmel already set up for us. Well, we're gonna build that cookie recipe for a grandpa. And he's wrote everything out for us in the nation. A lot already. So first, I'm at least going to make sure that we take a look at this and get an idea what we're doing. So we remember what we talked about before. Starting external document. We need to actually certainly some basic tax. So first we'll need a Michel pack. We'll need a head tag. I warn you, Close that had tag because it is closing in. We'll need a body tag. Oh, no. Close these Cheveldae get your bodies had which it's just gonna hold all the content that we want to put in there. And we want in East German attack to close it at the end. A couple things we do here. One thing that we want to think about is putting in a dock type tag and what this is it's just tells the computer, Hey, this file than a building is a shame out. That's all. Got top does it just tells you, Peter, what is translating to? And we can put in one of the type that we talked about the title track. They won't call it ran Pause cookies. Make sure clothes that. So we already have this content from grandpa. You see that? He wrote out a little HTML content. Let's grab all this information. Well, there's some CSS down here, but more about that yet. Koppett, over here. Just a nice little a copy. It already cut who? I just copied it. That's good. Just in case we need it back up, grab everything, maybe just tap it out. So it's a lot cleaner and now we don't think about this. So when I talk about adding religion tags, let's think about that image that we have. So we see the solution itself. Do you see a couple of weeks we haven't. We have a header. Gingerbread men, we have an image. We can see that the recipes by Grandpa and you see that this is in a talent so you can see that has been in size. We also see that there are additional headlines below here, but they're smaller than this one and something that we didn't talk about. But to keep in mind is that each one for head attack. There's different levels of headers, so there's each one to each six, so you can make things defined as ever, headers all the way down the page. In this case, I might say these air most likely each twos since their sub headers from Marine Ashore speak. Finally, we could see here that we have the ingredients in an unaltered list and the directions, you know, with us. We have another piece of emphasised text here for the nutritional information. So I think we're good to go. So let's go back to our code. Think about how we're gonna build us. So first we said this obviously had her, and we knew that this was emphasized. If we go back, look at that image. Those two look good. Okay? Size. But I knew I put this in here. But how am I gonna test it? This is where chrome comes in. When you're testing out your tax, your HTML and your CFS you don't need any special where you have chrome. You have any browser? So if I go to my file, you open it up. Oh, I can see that Junior Birdman has been added as header and I can see that recipe. Bagram uh, his emphasize now doesn't look very good. Yet when someone's there, something I forgot is missus image. It's between grandpa. The recipe by hundreds, someone We had the image in there. Let's go back to supply line and the train grip on me. Remember, that's put together an image back there and our source is this gonna be this cookies that PNG That's all we need. We don't need to close anything, and the image should be on the site. Now let's go to the very best cookies fresh. Oh, so there's no wrong. Let's take a look here. No, I see what I've done. So make sure we actually pay attention to that found in their J peg, not P and G five. So when you put an image, you want to make sure that you're not just put in the images name, but also what type of file is in this case? And J. Peg go back here. Grandma's cookies. Refresh the page. Oh, we have the riches, but it's massive. All right, So what do we do for this? Well, one of the things we talked about this is a little little will introduce. CSS is that style interview, and we can add it directly to attack. Now it's not best practice. You put a style directly on to a page, but you do so in this case, let's say the lift also shrink down the height of the image. It's 400 pixels. Say bad, fresh, much better. Don't need that message in coming out right, So we have a couple more things we can do Let's put these guys in paragraphs since their separate information. Now, one thing about those paragraphs tax is there going to always locked himself out. So they're gonna be full blocks of text going down as you would set a paragraph on page. Remember, we build a she male. Originally, it was thought about some murder. How you build out magazines or other paper materials. So still a little bit like paper document. But don't think of it as the same thing next we were in. Think about All right, let's head. So we get many of those each choose the ingredients, needs that, people. It's cooling in there. And now we have our first list. So remember, we set up list and in this case, is a Nord lis. Do you want, say, another less or you l we didn't make sure that we close this for you. And then when you make sure each one of these items or inside a list hag copying pieces all the way down the board. And nice thing about sublime, it lets me do things like this. So I'm doing is holding my command key for windows. Believe it's control for PC is Amy put these little markers only once more, and that can create all this code at once. One of the reasons why it's just of one text is it has these little handy tricks to it to make your coding faster. So he set up in a moment lists. Let's head back to grandma's cookies. Refresh it. Ah, we're looking really good. Suffer one easier. And I'm noticing this summer of you guys are but the respirator samples were next to the image. What is difference here? Uh, why we emphasize the text. It's not. It's a block. It's just giving it a different style. So it's put grandpa in a paragraphs. Well, who should close it? Yeah, we're looking pretty good. So I'm gonna stop here. It's on you to finish us off now. The next piece is putting this these directions into Ed ordered less, making sure that you give again those each one teach each to which is a header to for each one of these pieces. Emphasizing this and we'll talk about the styling in a little bit when you're done adding all that she Mel, make sure to remove all this additional. Copy you don't talk about the CSS peace and a little bit her Nick's lap. So before we get to see a SAS, let's talk about a project. So, Mr Ransom Asian voters now for the recipe and we're gonna build is then this from a project here, which is simple to page portfolio Site B index of his portfolio site here is dressed a little about me, so make sure we're gonna add in our name. It added a little bit of about us here. And don't worry, I have this a copy for you guys to use. But, you know, maker Bill, use your home words here area here to put our own image. In this case, you see, my beautiful have it hard being 100 by 100. Great square. I think this looks about right and, of course, links to all over social media. On another page portfolio, a chair. You see that we have our experience and just are starting a little pavilion here, including our Web development for the landing page for grandpa dot com. Favorite recipes. Arjun, German and also our education out here A little list of what we've been educated, including our intro to issue on CSS again. League sources, media. So we're gonna build this all together. Now, if you want to get started right away, you'll find some starter code in the starter project file under final project. And you also find there sample texts that you have here and an index dot html file that has nothing in it but the bare basics. You need to get started. I'll take a look at it for you right now. All right, let's go up over towards the blind types. See you our final project file in here right now. Open our Serco for sample, Texan. And here's our index on a she male. So as you build this out, remember those relevant tax? So we had before you'll find in the image file here at two images of the final project itself. So be about me deliverable and the portfolio page deliverable. So it gives you an idea of what you're gonna be building out and those relevant has again. Always take a look at this ago. Okay, What's gonna be a link? What's gonna be a header? What's gonna be a paragraph and whatever gonna put together in this in this body at this document. And again, you have a basic HTML paging build out just on investigating. Smell. Remember, you have to build a 2nd 1 You just call profile that HTML they're gonna link to in this we'll tell about linking to one side when things us once again, we were docked type for each female tag. Make sure we know it's HTML and you might notice a couple of other tags here. Now, one. You notice a couple of met attacks here and all meta tags are useful information for CEO, so I can put in description of my website. He works around it, and I cant this character set telling helping sell the browser with characters that are gonna be translated. Okay, one of the after you might notice this is laying after you in the actual document. So if you Mel does have the ability to be in different languages and in this case I'm telling it to translate to English, play around with five different ling entreats values, you find them online. Okay, So before we get into CSS one last thing make sure we're ready for is linking everything the other. So we talked about a tax before their club anchor tags. Let me make sure that's clear, and they anchor you to other parts of your website. We're outside of your outside. In this case, if I say I want a, I think to portfolio female and here is type it portfolio showplace spoke correctly. I never have a link to portfolio page, so when we link pages together, it's a simple is up. We will put it anchored again usar a draft to think out to a reference to that page to know where to look for. And we actually published us we're saving to see this won't have a link of age that goes to that issue age. So that's how you get to one site when paid on site to another to sue these acre attacks. Let's go over CSS, and then we'll come back to our caressed me and start a little bit of a final project before we and everything 4. CSS BASICS: So talk about CSS. We're gonna get to know what the Dom is and what what about what that means? And once again, the first. What is CSS CS that stands for cascading style sheets? It's a language used for changing the appearance of a Shia elements or tax and enables reuse. So when we think about aspects of appearance, first we can change the font cover padding and margins around elements or inside of elements backgrounds, layouts, borders, ingredients would have you anything they can individually in style form. That's what CSS for. We talk about needling you reuse. We saw that I put that little South hag in an HTML Tiger and that image check to she's the with. But what if we wanted to use that across the board? It'd be really hard to code. Every single tag. The textile well CSS allows us to do is not only style on attack itself. So at the top level page within the header area, but more importantly, and what we're gonna do for our final project and for cookie, uh, recipe Israelis, external style sheets and that allows us to create styles once and link them to as many Web pages as we want, and that's really enable reels and make our lives a lot easier. What's the run? Nancy Assessing How does it work? So it's basically an elaborate way of searching Nishi, Mo. We're talk about what the dom is. Check out the syntax it we'll learn about basic selectors, how are able to connect CSS striations out classes, ID's and tags. We're also gonna talk about specificity and inheritance, and you is the SS. And that's the idea. How does a child element get some styling from a parent? And I can't even very precise than what we're stalling on our page. Let's check that Syntex first. So first you take a look at that issue Mormons again. So again, see any shammo again? We have our tag, but now we have that class attributes the same. But we still that processed meat before, and we're just giving it some last name. Well, what if we're gonna style something extreme using that fascinate? That's what CSS is for. So we take a look at how CSS is built. You see that we have dot some class name, but that dot is is it's telling that CSS that I'm making a class name whatever. And then we're gonna give it properties. And those property is a part of our styling. Some coming properties include thought wait for cover background color, Tech shadow, What have you So you can build out all those properties and give them different values? And we look at what those ideas are. One other thing to think about is that using multiple classes in directional So why we can have one class that has a bunch of different values of properties on it. We can have another class that's to speak very specifically, changing one thing a good idea would be Hey, I want to make sure that all the links on my site yeah, displayed side by side in a row and I want model. Call it blue and I want to make sure that they're all old. What if I say I want one? Particularly CSI Evidence saw emphasize. So I want to give it our talents in this case. Now, I could use a M tag to give it automatically that emphasize text. I talked look, but the best way to you would be using CSS and you just adding another class onto that one bit of a Shimo. Then we'll just call it The Classic could be special italics, but that just gives you an idea. You can start combining classes together if you want to make a very specific style with a few other options. So does the Tommy and Hamlets that work with our HTML CSS while the dollar stands for the document object model. And it's the A P I or application programming interface for its, you know, using the dumb programmers, engineers, developers can build documents, navigate the structure and add or modify and delete elements in their content. What does it look like? That's, you know, Let's walk through. We're gonna use Chrome's developers tools for this. This is one of the other reasons why we wanted to use chrome for this class. What are the developer Tools? Well, they used for many things, like inspecting the dominant, an idea what it is on the fly. You know, Caesar, for styling me, bugging our code later on the fly as well. We'll get to all that in the future. But first, let's check out the bomb. So but exit out of this will go to our cookie recipe. Where? Past cookies. Here we are. And to open up the inspector. You've couple options. But let's just go and hit the suspect about him here. And that opens up our crow inspector and we want to take a look at things. Open it up and what you're looking at right here in this window is the dumb. So you might be going well, that will take HTML. Well, you're right. The Dom doesn't look like a she male. And that's because it's translated html and building out for you. The difference is the domicile living article. So later with CSS and which I'll script. We're changing elements in the domino rendering alive so the dumb is not want or innovation metal. You should know it's gonna be static, the domicile dynamic. They and you're already using it. That is familiar. Belt was building the dom, and as we start growing up styling, that's also gonna get that gives you an idea to learn more about the document off your model. Check out one of the links below that had some resource is for you to read more about it. So now we got an idea of what the dom means. And then it's by dynamic version of our content or a page they have changed on the fly. And how CSS relates Lynam is it actually looks at the dom to say, Oh, am I going to do any sort of styling for different selectors on the page connected to make stream out? And how that does it is. It looks it up by a CSS selectors. Yeah, there three types of selectors in CSS one very used, and that is just any HTML tag. So in this case, if I say I want to style everything has a P tag selling all the elements of the page. There are paragraphs, but then I have class and I ds so classes and we still let before start off as a period put in my class name in the A she male did define as class equals quotation marks on the classic itself. No period. We put that there, and it's styles all elements of that class, so classes can be used multiple times throughout a page. Ideas were a little bit different. Ideas were first classified in CSS with a hash mark, but in your mighty name, whatever it is. And then in nation Mel, we're gonna have again the i d equals quotation marks in the name of your I D in the middle . Forgive me for that type of I don't have bad ash in there, but you get it. But the big part about ideas are only one i d is allowed on age of the same elements. So if I have one, I d called my also avatar. I'm only gonna have that on one page at a time. So it could be on my index page and it could be on my about that html page and it could be on my profile page portfolio page, but it can only be there. We once. So he should really be used for very specific elements, sailor and used once on a page that could be a navigational of it. That could be an image element that could be maybe even a slider or something like a movil that pops up. But you only one he's like these wants some basic properties of CSS. So some base probably is. We have off the bet we were color font size family. Wait background color tappings, orders, margins, texts, mine go to deepen, going to each one of these values again. You're gonna get both the slides and some additional links below this video. But remember, when we do this, we have to make sure we name a property value for the property. And we can look at some of the description here now to things that they give out, especially or towards the bottom. The hatting in marching area padding is surrounded space within your CSS elements and marching and see outside space. So when you're moving things around to make sure things are balanced out, remember, Patting brings things in closer it from the inside, and margin pushes things out. Just like to make sure I love that in their head after starting to lay out their pages. Let's take a look at some CSS right now and get some idea of what will you go out? So first, let's take a look at that basic example before so remember that before we had this one, welcome to the entrance star CSS. Html example. We're back here says Welcome class again, but now he has some CSS connected to it and say Welcome, Teoh Thean travel once more There we go. And the CSS is doing a couple of days So we take a look here first we have an idea of my header. Now I know that my head is only gonna be once locate It is very important So I'm using my phone styled Make it italics again We have our brackets We have our property Name your property value and the name of Al You're gonna be separated by colon and end Always a cynical Next we have our paragraph here Just information That raft is a little class name And again classes could be used multiple times So if I wanted to make another head wrap classic equals information Paragraph should spell this out right And he's at multiple times and go a there, Lose it now under the paragraph with that red color you see that has color and red property value for that If for each paragraph making the text read Last but not least at this background color almost anchor element. It's give me that fund Yellow background Here it goes off. Typical. So that's some basic ideas. Uh, CSS Let's expand on that 5. CSS STYLING: So let's talk about styling that cookie site and how we're going to make the styles together. So you have three different ways and style. Your website. You have in line styles, internal style sheets and extra style sheets. We've already used in line styles so that with Element that we put in a style attributes on that image type for our cookie. Initially, that cookie recipe initially was an in line style. You don't do that. Normally the singling India. It is using internal stop sheets and they live within style tags, usually health in the head tag of your website. It's not recommended to do that, but we're gonna use it anyway. Why we're learning because it's great for a prototype. So before we actually go to the next page was swimming about extra South sheets, let's actually see what interests all she's like on the page. So we exit out here. Let's go to our sublime texts. What? We don't need this indexation, really? Where who's here? Let's go back to our cookie recipe started code. Well, I've got rid of everything already starting scratch. Well, let's go here again. We want to make sure we have our each female. Tad, our head tag in our body had just in the holder content. Liz is grab our continent in here. We'll scrap will describe this first piece here. It's my keys. We're not gonna worry about anything else right now. In here, you put in the style tag. Now you see itself had gaslights and actually letting you know that you're building issue CSS file and he ever been a start putting these things out. So let's say we have are each one for gingerbread man and we're gonna say Do a couple its where first gonna do it by tag and say all each ones have a color read. I believe it's just Oh, yeah, you go. Well, what is that of Omi? So a couple of ways you could style colors in CSS is by hex code by specialized Web names or cover means in by our TV A or RGB. So you have a couple of wasting and color Thanks out I'm gonna just have you work with hex code for now. It will be easier. And you find any information about hats code on the cover combination for them online. Just look up CSS Exco. Let's say that and see how that books Let's go here. We'll get this hot red that's yellow, you know, not perfect. Remember all my school colors, but you get the idea. So that means any each one tag I have right now is gonna have this yellow color. What if I want to be a little bit more specific? Well, let's use that class name again. So let's say red color in this time from squeezed covered red and we'll go down to recipe by Grandpa, give it a class attributes and then the truth is gonna be read color back here. That's one back here. Refresh it. Hey, it's the color red. So just some basics. Here we were using Internet style sheets. We put a style attack in the top in the header beginning right CSS as we normally would again. It's brackets property name, colon property value, Cynical. Make sure we close that style tag in the header. And then we could connect CSS as we seen before. Either do tags classes or, if you want I ds again on my deeper page back and say my i d well so color in this time will do a blue You will give this a graph. The 90 equals my I d. Okay, close everything up, Care fresh and we got it Blue. So that's a little bit of a intruder. How to work with CS us initially. Now let's talk about now. So extra style sheets. So let's go back to sublime. Yeah, take steps back. We go back in time and do all this so you have a nice clean weight start up. But now let's walk over here. So what are external stop sheets? So it's journal style sheets. Are all those style elements linked out to a separate file? And how you do that? Is this link attack? So the link tag is looking for that trough and that a trap again is that actually, that's gonna be a euro out to somewhere else. In this case, is the euro of your style. Sheets up the link tag is placed in the head, just like the style attacks are that place ahead, and it's the best practice for live or production ready websites or applications. You don't have internal styles or in line styles in your live ready to go sites So we understand what? Our cookie recipe. So we're gonna again open up back, keep folder in our started project foul and already have it a bit. But, hey, you know, but it up. And we can create a folder called CSS and make a style that CSS file. And let's add some styles according to impairments wishes, which is in that file as well. And finally gonna link the style sheet to the issue of age. So let's get out of here. That's how your salon get within our lovely start. A coat. Lets go to this. Click your speak ill. We're gonna make a new folder called CSS. And in this new CSS water, we're making the file. You see the foul as style CSS. And now we can make our CSS in here. So we school all the way down. We see we have a nice NCS us peace and a grandpa, apparently as a graphic designer. So he gave us, um, sadly so. CSS he wants is pretty Senator standard. It was a bathroom color the entire page to be wiped any once a cover of the texts for nutrition information to be 87 and you look a bonus. If he would like a border around the entire age and the image to be this color, let's first do a couple things. Let's put some tags in the cage. We're gonna go straight on. You were awesome stuff here who concentrate on playing the image in extra straight on the border. We make sure we get the nutritional information I can't show. You guys have to do everything you can play around. That's yourself. So this makes for a little each one in here who? Let's make sure we actually connect all the tags as we see fit. And the reason I'm doing this over and over again. It's just emphasize that we want to make sure that we always have our elements together. Who the one that got messed up here is. Head tag is on its own. That's everybody. Here we go. Let's give this guy here. So, you know, nutrition information was emphasized. Yeah, there have a good start. Savory Shimon Place. So back her color of the page while the entire pages, either the body or the issue of active it standard Lee, you're gonna usually do body your cover. The entire background. So that means in the entire body along I'm gonna say background color. It's gonna be white. That's first. Second, the color of the texture. Nutritional information should equal 87 Well, there's nothing identifying the text, something special other than it being emphasized in a paragraph. But we know there's gonna be other emphasized tax because recipe by Grandpa also so speed. Besides, so we should put a class in here se class equals special. I think it's fellow special, but there were special so can spoke, uh, worried his own. Call it nice texts for fancy fancy color texts. And let's do it as one word It's coming. We're gonna go over back to her style, think dot to make sure, Mrs Class and we're going to double track that color 887 So there great. And finally, the last pieces that bonus. So when a problem border on the page and around the image. But you know what we did with the image of yourself playing engineer? You are images. Source equals cookies. Gee, pick and we know the entire page held my body. So when we use order and we'll say it's a five pixel border solid, and the cover for the border would be this. It's cut another. The border is a special CSS role because you can see that it takes three different values. Give it a with you. Give it what type of order it is. There's, um, out of exporters like a solid line dotted dash that's probably a few others, then the color of the border itself. So putting all that in one right? And finally, let's do one thing that we did before. So we before had a style tag. That's it. The width of this image 2 40 pixels. Let's translate that to the style, uh, older there. So I'm missing cancer. We don't even check is the only one image on the page. And as instant to tell it, the exact same thing the image with is gonna be for pixels. I can remove this from here. We should be good to go. So was taking the Grand House rules. Looks here it is now a fresh who looking pretty snazzy. Yeah, the missile CSS is in there, you tell because the image is very big. So even though we have the image in there everything looks pretty good. The colors haven't really changed. New those his image size What do we not do? Well, I didn't connect. Bless you See, is that Sierra? So let's make sure we do that now. So you add inhaling tag. And again that link tag is telling it. ISS Villa Vince is that it's a style sheet. It's going to be a CSS file, and it's going to be in our cookie and our CSS holder. So you have CSS. Remember that File transfer Social Peace CSS go into the file slash style dot CS has. Let's go back here fresh, big and yes, look at this. Who We now have a border in the cage. We have the image down and we have the nutritional information slightly colored, so it's emphasized in a little bit of a lot of color. Make sure to play around with this style page in treat things as you see, change, background, color, transborder and look up some other CSS properties and values that you can play with here. So now let's talk about specificity 6. SPECIFICITY INHERiTANCE AND YOU: UK. So let's talk about specificity, inheritance and you eso specificity. I'm not gonna fall in the knees right now for you to scream to the heavens, But it is one of the most important things you need to understand in CSS and therefore can be your nemesis. Specificity determines which CSS role is applied. Brian, the browser and this four distinct categories first defines the level of specificity of any given selector in lifestyles I DS classes and the elements themselves. What does that mean? This public here? I know it's a lot to get, but we want to think about is the order of the most specific to release specific in what is being applied by the CSS. So the most specific thing is the style of ST so that Yngling style a treat on any other element on your page is gonna overwrite any other internal or external south. She's, we said, only use it normally, but it will override anything else Ideas. Their second classes at third and the least specific thing are elements or tax because they are so spread out. In other words, if you think about this in terms of points, if element has in line style, and it automatically went to get 2000 points For every idea. Ply gets 100 points, very class or pseudo class. We worry about those yet gets 10 points and for any element reference, it just gets one point. So you think about being very specific. You can go up that teen or down the team. Does she see fed? I personally built a lot of things in classes because I know when you use the same stat line across border on different pages on my website. But if I want to be very specific about something on top of that, I might have a class and have an I. D. You put both elements on there and be like I'm starting this a little bit of this class style, and this idea is very specific to this element. You clear it with that. So let's take a living example. So we're looking at another one unless with the I d of summer drinks, and I have this great favorite kind of hear a class a favorite that speaking my favorite red and gold. So my favorite has been really was ganging, drab myself a drink. It's relaxing. Well, what if we go in here and change the I d itself? So what? We're going here and say, Hey, I want Teoh. Use the idea. Summer drinks and all the allies are all the element mining the statements, some of drinks to the color blue instead of red. Well, wait, what just happened? We see that our favorite is still working the class stone there because the family is mold , so it's still bolted. But now this red color got overridden. And that's because summer drinks you see here is using the I D. Which is greater than a class, and it's using the tag name on top of it. So, to those classes, 10 points, you know, have ah 101 points or huh 101 point simply because that system ever had. So when we think about this, we're gonna make sure being as specific as possible and not letting things get over it. Another way to look at specificity and inheritance. It's over here, so we have our sympathies again. Part flights is a little bit tiny homeless. We can see that we have. They're targeting of a lie. We also see that we have another one targeting ace Ban Limit spans are similar to paragraphs, but they're just in line, so they usually use for one line of text and not hopeful Walk of texts so we can see that we are inheriting still from our i d And every this element is purple. Every font size is 12 outfront Lee is normal. Maybe get 18 million easier See? And we can see that we can add additional specificity. So we're inheriting from that every element has that inheritance. But now the span itself The idea of yum has the italics font style and we can even make this call out a little bit more. Maybe give a little thought, wheat. Oh, here we go. So again we have an inheritance making this purple changing the font size you thought Wait and then we have specificity here, Give him this is that item their talents and the bold. So think about the surface ity inheritance. We want to think about when we built our styling what we want inherit to the Children especially. We're doing any sort of nesting like these lists and we also want to think about how to be very specific with our styles. Take all that in mind as you start working on your project. So let's do a little review of everything we've done together. And we'll work a little bit on the pressure together before we say I do. So what have you learned? Well, this is Sears has specific Closius s. We know that CSS is awaits stylish email and it smells are structure of our site. We have some basics in text properties. So we saw how you needed bracket our property values. These are separated by colon and into Aceh Michelman how toe link out to a style sheet and pages in that link tag How we gonna use selectors, ideas, classes, tax collectors to actually solve the elements on interest she male to style in themselves and how specificity and inheritance applies to our CSS inheritance, allowing us to give inherit styles to any of our Children. Elements within real men are page and specificity could be sure weaken targeting exactly what we want to change. Just being careful how we use it. Remember that CSS is important and awesome, and it makes sure that it separates are fine details of appearance from our basic display of our content or is she Mao? And that makes our lives a lot easier. The other thing about CSS is that one style sheet could sound instant amount of HTML pages . That's why wouldn't make it external. It makes life a lot easier. We're just changing a style, once implying across the board. You'll do that with the pavilion. Finally, when we talk about that amount of HTML pages worth talking about branding an entire site, and that's what CSS is. Four. You can add CSS parties to a new style on your side. Every time I see a real life example here, we're gonna do that a second off our portfolio site. But just to give you an idea, how do you work out together? 7. FINAL PROJECT: all right. Lastly for your final contract, your me creating the beginnings over your own portfolio outside. So take what you learned from the class today and better off a site. You'll find the starter code in your starter project file in the starter coat, you have basic HTM out online for your index file as well as in the CSS folder. You'll find a basic outline for the styles, all the pages and the hint to simply HTML text you should be using in the images holder. You'll also find how your final project should look at CNN. We're going to start doing this together right now for a couple minutes and then I'm gonna leave it up to you. Hope you had a good time during class. So let's get out of here. Go back to our sublime again. We have a project folder. We have our index elation will for copy, and we have those deliverables. So what we're gonna look like at the end? So one thing I want to ask to keep in mind enough right away is that we always want to make sure we're walking yet these images and make sure you get over them separately to get any of a minute build. So we know that we have two links of our name. We have a couple of borders in between here, and these borders are interesting. They just rules in between. So maybe look at that her horizontal there. And we see that we have also additional links with little paper. In between, these pipes are naming special legis, but pipe characters on the page. Let's build out this navigation piece and make sure reason link to our portfolio of age for you first, doesn't she? Who? Let's actually open any file. You're gonna see it as Port Julio Shima. Maybe go over to here. Copy that. Embody able to say portfolio for now. So we know that we have a different page here. Great. Now let's think about that navigation we thought about never getting before. We just have our navigation tag in here. Our first page. We look at this, this is about me. So it's Pedro on radio about me. Looks like it's think, and it's going to link directly to our index dot html Now in that pipe character know that is is right here that little pipe. So you keep itself. And now we want a link to that portfolio age portfolio. Everyone, Right, in the name of the link, it so okay or fully? That's it. So let's open this up way there, you finder area. Where did you put that? You hear this? Let's open up the solution. Let's open up for star. And there we go. So they relieve it as portfolio. It's actually up over here. About are we know that we're only in next page receivable links here in our pipe. But if you click this portfolio, all right, we're good. We can link these pages together. So remember, you know, make sure look at the image itself. We make sure we remember how to build out the market there. Really? For our headers. Paragraphs are links in that image. And make sure they were just looking these guys together. We're gonna make another file here, Felicia Male. And make sure that sent together using our anger tags in green the link right here. I hope you guys really enjoy the in traditional CSS class again. You'll find all the files we talked about and including the PDFs of the Kino gone through love able to be downloaded. And I also will include solution code for both the cookie recipe and board polio so you can take a look at it being done in the code itself. Try to build it out yourself first. It's really fun over. You enjoyed the course once again. We have a good day. Remember control? Believe in yourself, according to be released.