HTML & CSS: Building Responsive Websites For Beginners (version 2.0) | Jonathan Grover | Skillshare

HTML & CSS: Building Responsive Websites For Beginners (version 2.0)

Jonathan Grover, Developer / Designer / Creative Technologist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
75 Lessons (6h 29m)
    • 1. Computer Setup

      3:25
    • 2. How The Web Works

      3:38
    • 3. Web Terminology

      3:05
    • 4. Site Organization

      2:25
    • 5. HTML Syntax

      2:45
    • 6. HTML Document Structure

      1:51
    • 7. HTML Text Formatting

      1:48
    • 8. HTML Lists

      1:16
    • 9. HTML Tables

      1:00
    • 10. HTML Forms

      7:32
    • 11. HTML Images

      1:40
    • 12. HTML Links

      4:11
    • 13. HTML Iframes

      0:39
    • 14. HTML Grouping Elements

      2:00
    • 15. HTML Semantic Elements

      2:54
    • 16. HTML Comments

      0:34
    • 17. HTML Depricated Elements

      0:20
    • 18. HTML Validation

      0:25
    • 19. HTML Reference

      0:58
    • 20. Code Along - Introduction

      0:45
    • 21. Code Along - Part 1

      47:21
    • 22. HTML Validation

      5:08
    • 23. Developer Tools - Part 1

      3:10
    • 24. CSS Syntax

      1:13
    • 25. CSS Formats

      1:42
    • 26. CSS Type Selector

      0:17
    • 27. CSS ID Selector

      0:42
    • 28. CSS Class Selector

      1:06
    • 29. CSS Compound Selector

      0:43
    • 30. CSS Descendent Selector

      0:49
    • 31. CSS Child Selector

      1:23
    • 32. CSS Universal Selector

      0:17
    • 33. CSS Attribute Selector

      1:42
    • 34. CSS Pseudo Selector

      1:43
    • 35. CSS Inheritance

      3:53
    • 36. CSS Authority

      3:14
    • 37. CSS Comments

      0:17
    • 38. CSS Color Values

      2:16
    • 39. CSS Typography

      3:23
    • 40. CSS Web Fonts

      2:26
    • 41. Code Along - Part 2

      34:42
    • 42. CSS Validation

      2:21
    • 43. Developer Tools - Part 2

      3:21
    • 44. CSS Box Model

      6:12
    • 45. CSS Box Sizing

      5:01
    • 46. CSS Layout Types

      7:40
    • 47. CSS Overflow

      1:54
    • 48. CSS Display

      6:12
    • 49. Code Along - Part 3

      20:46
    • 50. Developer Tools - Part 3

      3:06
    • 51. CSS Float and Clear

      4:32
    • 52. CSS Clearfix

      6:01
    • 53. CSS Simple Float Layout

      7:53
    • 54. CSS Custom Grid System

      12:00
    • 55. CSS Using Third Party Grids

      0:51
    • 56. Code Along - Part 4

      24:13
    • 57. CSS Position

      6:21
    • 58. CSS Z-index

      2:18
    • 59. CSS Backgrounds

      1:25
    • 60. CSS Borders

      0:43
    • 61. CSS Border Radius

      0:37
    • 62. CSS Box Shadow

      0:17
    • 63. CSS Opacity

      0:37
    • 64. CSS Gradients

      2:10
    • 65. CSS Box Styles

      5:56
    • 66. Code Along - Part 5

      32:21
    • 67. Responsive Design

      2:52
    • 68. CSS Media Queries

      8:08
    • 69. Responsive Media

      1:56
    • 70. Responsive Type

      3:23
    • 71. Responsive Layout

      7:18
    • 72. HTML Meta Viewport

      1:14
    • 73. Responsive Support

      0:19
    • 74. Code Along - Part 6

      29:07
    • 75. Site Publishing Using FTP

      9:16

About This Class

33e51b47

About This Course

Learn to build your own professional HTML5 & CSS3 responsive websites from scratch! Your site will be viewable on any device and work in all browsers. This course is geared towards absolute beginners. It will walk you through planning a website, organizing your files, the fundamentals of HTML for building rich content sites with text, images, links, video, audio, as well as embedded maps, and social media content. We will discuss the fundamentals of CSS for styling content by adjusting text, loading custom web fonts, adding background images, gradients, shadows, and more. We will look at industry standard techniques for site layouts that will respond and adjust to look great on any device. We will also cover search engine optimization, site publishing, and more.

Sure, you could use a template to make your site with Wordpress or SquareSpace, but then you’re just a consumer limited to another companies vision. Break the chains and learn to code your own site from scratch and the sky is the limit! You will be able to build anything you can imagine! Let's get started!

Prerequisites

Students are expected to have a general knowledge of computers, opening, saving files, etc. Students will need a personal laptop computer for this course. Macs are highly encouraged (but commands are given for PC Windows as well). Students can expect to commit to a minimum of 5 - 6 hours per week on this course with approximately 1.5 - 2 hours watching videos and coding exercises and another 4 hours working on labs and building a personal site project each week. However the course is self paced so students can do more and move at a faster pace if desired. These time estimates are merely a baseline and suggested minimum amount of weekly engagement.

Instructor

Jonathan is the Founder of CodePajamas.com a code learning website. Previously: Lead Front-End Instructor at Flatiron School, Instructor: General Assembly, 3rdWard, PAI, SFAI. MFA from SFAI, BFA University of Akron. Media Coverage: Creative Quarterly, The San Francisco Chronicle, NBC BayArea. Interests: New Media Art, Sculpture, Travel. Jonathan currently resides in Brooklyn, NY managing CodePajamas.com, teaching, creating tech-art, and working as a freelance web developer.

Testimonials

The best course I've taken on coding. - Rhema Aminu

This class is a great way to get into coding! I also liked that I could jump around easily from topic to topic depending on what I was working on. - Denise Bee

This class launched my career as a freelance website developer. It gave me the applicable skills, the confidence, and the staying motivation to keep playing, experimenting and learning while at the same time applying them so I understood what I was doing. - Clorama Dorvilias

I knew nothing about HTML and CSS- this class has taught me a lot about how web pages are designed and I feel that is an extremely valuable skill in this day and age. I encourage you if you have any doubts about taking this class- take it! - Maurice Cunningham

Coding sounds difficult and is usually assumed to be understood by only the highly intellect ones. But this class completely defied that theory . . . highly recommend to absolutely anyone and everyone who wishes to learn how to build a super website with ease. - Sweta Modi

The instructor made everything really clear and easy to follow, and learning by creating my own project in parallel with hands-on exercises really solidified the concepts and made it fun! In the few weeks it took me to complete this course, I learned way more than I could have spending months trying to teach myself. - Rose Weixel

I was really impressed with the instructor. He explained the positives and negatives of coding in certain ways and explained why he made every coding decision. I found this approach super helpful as someone just trying to sink my teeth into website design through a guinea pig project and learn as much as I can in the process. Thank you!! - Julian Cooper

Very comprehensive. If you're a beginner, it will get you started and going really fast. If you're intermediate, it will give you the details you might have missed and get you to work faster and more effective. - Kasia K.

Excellent pacing, everything is explained so clearly and demonstrated very well. Not only am I learning and applying the information, I am also retaining it. - Seema Shariat

Excellent class. Very detailed and easily explained. I learned a lot... THANK YOU! - Sharnie Ivery

I've always been intimidated by code and never touched code before but this class made it very approachable and easy to understand. By far the best and most empowering class I've taken! - Adam Chung

This has been one of the best class I've ever taken in my life. I learned from the basics to the advanced. Each class is very enjoyable, and very well organized, I have learned a lot. In addition, in the office hours, the teacher gives very thoughtful tips and advises. The teacher is a true expert. I'll take more classes with him. I look forward to enroll in new classes from him. Thank you very much Jonathan. You are the best! - Javier Hurtado

Syllabus

If you wish, you can download the full course syllabus here.

Transcripts

1. Computer Setup: let's start out by downloading and installing the various software that you'll need for this course, we're gonna go ahead and open up safari. And if you don't already have Google Chrome, we're actually gonna download the Google Chrome browser. Um, if you don't have it, what you can do is you can open up your, um, default browser, whether it's, ah, Internet Explorer for PC. Or in the case of Mac, we have safari. And then you're gonna go ahead and type in in the search Google Chrome browser, okay, and I'm gonna go ahead and click on Chrome browser and then just click the big blue download button to proceed and the next except and install. And that's going to take a moment to download now on Mac by default. This should end up in your downloads folder. Um, and you're just gonna go ahead and double click on the file to install it, and then you're just going to simply drag the icon into your applications folder. Now, once you've dragged the file into your applications folder to make it easier to open in the future, you can actually drag the Google chrome application icons here, Doc at the bottom of the screen. So now we can go ahead and close out safari, and we'll be using Google Chrome as our browser for the remainder of the course. So the next thing we'd like to install is going to be our code editor. We're gonna be using the Adam code editor. So to get that, you can go ahead and type in adam dot io, and then you're just gonna click the big red download button for your operating system. And this is available for Windows, Mac and Linux to install. We can head to our downloads folder again and double click the Zip file for Adam and then Samos before you're just gonna drag this in your applications folder. And then once Adam is in your applications folder to make it easier to access, we can go ahead and click and drag it to your doc at the bottom of the screen. Okay? And we can go ahead and close out chrome. Let's go ahead. Click and launch Adam for the first time. Now, go ahead and select open. Next, we're going to go to the upper left hand corner and click on the Adam menu And then we're going to go ahead and select preferences under preferences were going to select install from the left hand side bar, and then here under the search for packages, we're gonna go ahead and type in em. It's which is e M M E T. And go ahead and then click the packages button here on the right hand side M. It is going to give us code completion, which is going to help in some of the upcoming exercises. So go ahead and click install, and we'll just have to wait a bit while it installs this from the net. Okay, great. So it looks like it installed Emmett. Um, we can now close out our settings tab by clicking the small X in the upper right hand corner, and then we can go ahead and close out Adam. 2. How The Web Works: in this first set of slides will discuss Web fundamentals. We'll talk about the request and response cycle, which is the conversation between your browser and a remote server. We'll also talk about terminology such as local versus remote, and will also discuss the differences between front end and back end development. We'll also discuss some site organization practices that you'll be using throughout the course. First, let's talk about the request and response cycle. So let's say that your home on your laptop and you'd like to visit a website How stuff works dot com to go up to your euro bar at the top of the browser, and you type in how stuff works dot com. And what happens is your browser connects to the Internet through your Internet service provider, and the first computer that it talks to on the Internet is your domain name server. Domain name server, otherwise known as a DNS server, is kind of like an operator on the Internet. DNS servers don't really have Web pages on them, but what they do is the associate. A list of domain names with a particular I P address. An I P address is a set of digits that represent the location of a computer on the Internet so much in the same way that the post office uses addresses to correctly deliver mail to your house. All of the computers on the Internet also have a unique address to identify them. So this first DNS server we talked Teoh. We ask it for the i p address for the domain howstuffworks dot com, but this particular DNS server doesn't know. So it asks another DNS server. Um, and this DNS server does know the answer. It has that, and it tells us that the I P address is 70.42 point 251.42 So it sends that I P address back to the first UNA server, and the first Dina server says, Great. I'll cash that That way, in case another person asks for the I P address, it'll already know that answer now and then it sends that I p address back to us. So now our computer can connect directly to the remote server matching that I p address. So these servers here are holding the Web pages when our browser connects to this Web server it starts a conversation back and forth between our computer and a remote computer on the Internet. This conversation is made up of two parts, a request and a response. So the request is our browser requesting the homepage. And the way it does that is it sends a set of http headers. So these headers contain information such as, um, what type of computer are we on? What type of browser are we using And what type of requests are we making? So in our case, we're making a http get requests were trying to get in this case the index dot html page or , in other words, the home page of the website. Now the server then sends back a response, So the response also has a set of headers. Typically, it's just a status code that says we've successfully received your request, and here's the information you wanted. The more interesting part of the response, though, is the content that it sends back such as HTML files. Or it could also be some CSS code or some JavaScript code. Now, in our case, in this course, we're gonna be learning to write the HTML and the CSS code that's going to be sent back from a Web server to our browser to be rendered 3. Web Terminology: Let's talk a little bit about the terminology. Local verse remote so local refers to the computer that's right in front of you Now the one that you're watching this video on. Whenever we're building websites, we first start out by building our sights. Locally, we're going to be writing HTML code on our computer, and we're also going to be previewing that code locally in our browser here. So it allows us to refine and re factor our code and make sure our website looks exactly the way that we want before we share it with the rest of the world. Now, remote refers to a computer that somewhere else it's any other computer except for the computer that's right in front of you. So typically, when you're going to be publishing your website, you're going to need to put it up on to a remote Web server. And the way we put our files up is we will actually upload our files, and we'll talk a little bit more about that later on. Once you've uploaded your HTML in your CSS files onto a remote Web server. Now the world has access to that content. Let's talk a bit about the terminology front end versus back end. So when we refer to front end, we're talking about all of the code that's rendered in the browser. So this includes HTML, CSS and JavaScript. Now the back end refers to all of the code that's actually being interpreted on the server remotely so back and could be programming languages such as Ruby or PHP or python or Java. Now on the front end client side, it's essentially then the presentation layer of our website. It's all of the visuals. It's the style of the text. The images in the links now contrast ing on the back end. All of the information there that's actually processed server side is data centric. It's doing things like handling the requests. It might be perhaps looking up information in a database if it needs to, and then its constructing Ah, the HTML in the CSS content that's actually being delivered back to the front end. So let's break down each of the roles of the different code that we're going to be writing on the front end here, So the HTML that you'll be writing is actually a markup language that defines the type of content. HTML tells the browser whether some type is a line of text that's, Ah, link or whether we're embedding an image or some audio or video etcetera. So it's the meat and potatoes of our Web page. It's the physical content of our site. Now. The CSS is a markup language also, but its role is to define the style of that content so it will choose the colors, the font family, the weight, the thickness of the type etcetera. JavaScript, on the other hand, is a programming language that's going to add logic and behavior to your Web pages. So, for example, when a user clicks on a button, JavaScript can be listening for that event of a click, and then it can do in action, such as animating ah menu to open or close 4. Site Organization: let's talk a little bit about site organization. So throughout the course you're going to be building your own website, and it's very important that we keep all of our pieces of content together into a single folder. So you may be familiar with other applications that allow you to embed and sort of glued together different pieces into a single document. For example, Microsoft Word would allow you to drag and drop in image and write some text into a file, and it sort of cement that together into a single document that you can share with people. Well, that's actually not the case for websites. Websites are made up of different pages, which are HTML pages, and those link out to other pieces of content. So you might be linking to a CSS file that's telling the browser how to style your Web page . You might be linking to a Web font or a JavaScript file or an image that's being embedded into that html page. So it's very important to organize these separate pieces into different folders and then keep those, um, all organized into a single parent folder. So in this case, we have everything here inside of our root folder, which is called site Now. You can actually name this anything you want. Typically, people name this site folder, whatever the name of the website is. So if we were building website for a used car sales, we could call it. You know, Jerry's used cars dot com or something like that could be the name of this parent folder here. And then inside of that folder, we have separate sub folders and files that make up the entirety of our website. This first sub folder here is our CSS folder, and this is holding all of our style sheets that are going to style our Web pages. And we also have a folder here called Fonts. In case if we're using any special Web fonts that we want the user to be able to see, we also have an images folder, and this is containing all of the image files of our website. We also have a Js folder for any JavaScript files we might have. And then, as I said before, all of the different pages of our website are HTML pages. The nice thing about having all of these pieces of our website contained in a single folder is that when it comes time to publish our website weaken, simply just upload all of this content here. And we know everything is properly linked to each other. Um and everything is all contained in one place so nothing will get lost. 5. HTML Syntax: Hi. Welcome to the second set of slides on HTML. Fundamentals in this set of slides will discuss the HTML syntax, a typical HTML document structure. Also go over a few common high frequency HTML elements, and lastly will discuss how you can validate or check your HTML code. HTML stands for hypertext markup language. Um, text, because it's text base and Markab language is a language that surrounds content than in our case tells the browser how to define it. So this is really hte emails. Role is to surround, for example, a line of text, um, and tell the browser that this particular text is a paragraph which close the browser in on how to actually then display that how to format it and, in the case of a paragraph, how much space to put above and below it to separate it from other pieces of content. So let's talk about HTML syntax in detail. HTML is made up of elements and elements surround content, and the way that it surrounds content is it uses a starting and ending tag. There are a few HTML elements that only have a starting tag, and we'll discuss those a bit later, but most HTML elements are made up of a starting and ending tag or, you could say, an opening and a closing tag. Also, eso tags are made up of a tag name, and they're surrounded by angle brackets. Or you may refer to them as you know, the less than and greater than symbol. So you can see here is the starting tag and the tag name would go here and our last example . We saw the letter P here indicating that it was a paragraph element. And then the ending tag is always the same as the starting tag, except that it's preceded by a Ford Slash. And then, of course, in between is all of the content now in the starting tag, we have the ability to place in options that will, um, greater style eyes or adjust the way the content is being formatted. So, for example, if you had an image element, you might have a width or height option that's actually setting the width and height of that image. So options are made up of an attribute name and a value on. We separate the attributes, name and the value with an equal symbol, and then its value is included in quotes now Options air only included in this starting tag , you'll never see options in the ending tag. 6. HTML Document Structure: here. We're taking a look at the typical HTML document structure. So all HTML documents are made up of an HTML element which you can see here, and what this does is it tells the browser that everything in between this opening and closing html element is in fact HTML code. The HTML document is then split into two main sections. So we have a head section here and a body section as well. Now, inside the head section is all of the content, such as metadata for the browser and for search engine. So you might include the title of the page here, a link to other documents that are needed for the styling of this page or something like keywords or a description of what? What content is on this page for search engines. Now, everything we place inside of the head section is not actually gonna be seen by our viewers . So our site visitors are actually only going to see content that's in between the opening and closing body tags here, so everything such as text or images or links will all go inside of the body section, whereas only document metadata will go in the head section now proceeding the HTML element . There is a special element that we placed at the top of all our documents on this is called the Doc type element. Now the DOC type is created using angle brackets and then an exclamation mark and the word doc type in all caps. And then it's followed by a space. And here we put in an option or an attribute name that represents the version of HTML. So in the case of HTML five, it's a very simple You just say HTML lower case like this, and this will tell the browser that it's in fact, in HTML five version, which is the current working version of HTML, will be using. 7. HTML Text Formatting: we're gonna take a look at some high frequency elements that you'll be using throughout your HTML pages. We're gonna start off with headings, so these do exactly what it sounds like. They're actually going to give you a text heading. So any text you surround with these elements are going to give that texts Ah, bolder, thicker style by default. And it's also going to imply more importance in the browser. So these also ah, scaled down in size as you go. So H one is actually the largest heading and carries the most importance for search engines and then going down H two and H three h for H five all the way down to H six, which is the smallest heading. So this 1st 1 we've already taken taking a look at previously is the P element. So the starting in closing pitak surrounds text that is meant to be formatted as a paragraph. We also have a small element, and this is good for things such as copyright. If you want to put a copyright at the bottom of your page or anything, that's sort of secondary information that's smaller. So anything that's supposed to carry less importance. We can include that text inside of a small element there. Now, in the midst of a paragraph, we may have the need to do a line return where we push the rest of the text down one line. So any time you'd like to create a line break and force content after that, that line break that BR element to move down to the next line. We can just do so by inserting this BR just before that content and we'll be seeing some live examples of this coming up. We also have an HR element, which creates a line across the page so H R stands for horizontal rule. 8. HTML Lists: and we also have the ability to make lists in HTML documents. So here we're seeing the HTML code for an A Norden list. So the way we make an order list is we start out with a UL element here, and that's an opening and a closing UL tag here and then nested inside of it, were actually inserting L. I elements here or list items. Okay, um, and what this does is it actually makes a bulleted list. You can see the result over here. We also have an ordered list, and the order list is just the same as theon ordered list. It has list items inside, but you'll notice that it's it has a ol element instead of a ul element that we had seen previously in the one ordered list. Um, and you'll also notice the difference here between the two is that an order list will have numerals beside each list item, as opposed to the one ordered list which had bullet points before each list item. We also have a definition list which is made up of the de Ella Element and then DT for definition term and then the definition following below that and this is going to give you this type of formatting here where we'll get a term followed by a definition. 9. HTML Tables: We also have the ability to make tables in HTML any time you want to make a structure table of data with nice rows and columns, we used the table element here and you can see this is made up of the opening and closing table tags there and then inside of it we have TR elements which stand for table row. So this content is the first row and then another table row here below. It gives us vertical separation between the two and then inside of Rose, we have the ability to put either th or TD elements th dance for table header. So this is a heading which will have slightly different formatting, as you can see, um and then we have t d, which is a table division here that creates ah cell. So these guys are creating both th and Tedy are creating a horizontal separation such as a column, and the TR is creating a vertical separation such as a row 10. HTML Forms: and our Web pages were going toe also need away occasionally to gather user input. So the way that we gather information from our user is by using forms, so forms are made up of a form element. Here is the opening and closing or the starting and ending form tags here, Um, and they have these options here of action and method. So here we have the action attributes, um, followed by the location where we will send this information. When this for miss submitted, we're assuming that a user is logging in with their full name and password, and then when they click the submit button here, it's going to send that information to this file here on the server. Our method attributes is telling it the type of http requests that were sending so the most typical for forms are a get or post requests on, and we will talk a little bit more about that later on. Let's take a look at a couple different types of text inputs. This first input here is just sort of a multi purpose or a generic text input for this one . You set the type equal to text and for this text input, the user will actually see the characters that they're typing on the screen as they typed them into the input field. Um, in contrast of that would be a typeset to password. So if you create a password type input, what happens is while the users typing characters into the text field, they're actually just seeing a dot in place of each character they're typing. And this offers a little bit better security. If, for example, there at you know a cafe using the WiFi this way, other customers in the cafe who are maybe like peeping over their shoulder won't be able to see the actual characters of their password. They'll just be seeing dots in their place. We also have a type of email. It's meant, of course, forgetting users. Email. One of the nice things about this is if you have a browser that is HTML five compatible, it will actually check to make sure that they're submitted value for email matches. A standard email like, for example, if it's missing the at symbol or something like that, it doesn't look like a proper email address. It'll actually put a little alert message onto the screen saying Please fill in a valid email address. Similarly, we also have a type of Telfer telephones, and another nice thing about this one is that on compatible devices like most tablets or smartphones, when a user clicks into the telephone input field, it should bring up the numeric keypad as opposed to the alphabetic keypad. So it will be much easier for them to just type in a phone number there. Some other attributes that air worth mentioning here, Aside from type, which we discuss switches, the type of text input is name, so name is a label for whatever content the user types in. So if the user types in the name Bob is a value here that's gonna be stored under a variable called user name, so user name will be set equal to Bob when it's passed to wherever we're submitting this form placeholders also a nice option to set on, and we do that with the attribute placeholder, and any text you type in here will actually appear inside of the input. Um, and it's temporary placeholder text that the user will see, and then when they click into the input and start typing. It will replace that text. We also have an option called required in any input that you add required. Teoh is going to prevent the form from being able to be submitted until the user fills in this input. We can also make hidden inputs, so these air inputs that we're able to insert values into so this one is an example where there's kind of like a user I D number inserted. So that way, when the user submits the form, they're not able to see this input. It's it's in the code, but they can't visually see it on the Web page. But it's actually going to send this information this useful piece of content to our back end. There's two main ways in which we can submit our forms. The most common way is to put an input element with the type of submit inside of your form , and then here for the value. Attributes were actually writing the text that we would like to appear on the button itself . Now contrast ing that is a button element and the button element. As long as we give it a type of submit. Also, it will allow us to use this button to submit our form now. One differences. Whatever text we would like to appear on the button is actually written in between the opening and closing button tags here, whereas on the input element with the type of submit, we were simply passing the tax that we'd like to appear on the button to the value attributes. Now we also have radio inputs on, and that's an input with the type of radio here on this will create the two dots that you can select within a group of radio button. Selecting one will de select the others. So this example here we have, ah, the gender values male and female. And whenever we click one, it's de selecting the other, so we can only select either one or the other. We also have check boxes, and these are a great choice if you like users to be able to select one or the other or both of the options. So unlike radio buttons where you can only select, you know one radio button choice per group check boxes allow you to select multiple choices within a group. Here we set the type to check box and thes names here can be separate, so we have vehicle one and vehicle to so this user could select whether they own a bike or a car or whether they own both a bike or a car. Another common form element is a select menu. Ah, select menus give you a little drop down menu with different options that the user can select, and here the user can only select one of the many options. So it starts with the opening and closing select element. And then it's important we give this select element and name attributes eso that whatever the user selects, that that value will be stored inside of that named variable when it sent to the back end. So in this case, this is the size for perhaps some clothing now inside of the opening and closing select tag . Here we have different options elements which are made up of this opening and closing option tag. Each option gets a value assigned, so here we have small, medium and large, and this is the actual value that will be stored under whatever name. This particular variable or key is given. So here will be setting size to either small or medium or large. Now the selected attributes shows the default for whichever one is selected automatically when the user first comes to the page. Now, the actual text that appears on each of these drop down menus options, um, is the text that we insert in between the opening and closing option elements here. Text areas are great if you'd like to have ah larger, open space for people to type in. For example, if you want to allow your user to type maybe a multi line message or an entire paragraph of information. 11. HTML Images: here we have the image element. So any time we'd like to insert an image into our HTML pages, we used the I M G element here and you'll notice that this particular element does not have a closing tag. So this is just a self contained opening tag here, and there's a lot of important attributes that we have to fill out here for image. The 1st 1 here is SRC, which stands for source. This is the source location of this particular image. So here we give it a relative path to the image. So this allows the browser to find the image wherever it is and then embedded into this HTML page. Now the Alta Tribute is very important here were able to set alternative text. Now this text will appear to the user only if this image link is missing. So if the image link is broken, we would actually see the alternative text here. And it's also very important for search engines because search engines aren't actually able to see the content of the image itself. But they can absorb the alternative text and store that as useful information. Alternative text is also read aloud to people who are visually impaired. So, for example, a blind person, when they're browsing the Web, they would have a screen reader that's actually reading aloud to them all the content of the page. And when the screen reader comes across an image, it'll actually read the alternative text here now, optionally. You can also have a title attributes, and title is going to allow us to insert some a short snippet of text or a sentence that's going to appear when the user leaves their mouse over the image for a period of time. 12. HTML Links: next. Let's talk about HTML links. Links are really the backbone of the Internet, and they're what gives the Internet. It's underlying magic quality, which is the ability to easily just click a piece of content and then be transported from one Web page to another Web page. And we can easily link Teoh content or Web pages within our own website. Or we can easily linked to content that's on a completely different website somewhere else in the world. Let's take a look at this first link here at the top, which you can see. All links are made up of a opening and closing a tag now a stance for anchor link. Or, if it's easier to remember, you can also think action because it's the action of changing the user from one page to another. Now, whatever content is in between the opening and closing a tags is whatever is going to be clickable as the link itself. So in this example, you can see this is a line of texture. This is a link that will actually be clickable, and down here in this example, it's actually an image, so we're using the image element that's ah, nested inside of this opening and closing a tax. So here this image will be a clickable link, whereas here this text will be a clickable link, and then the way that we control where the user is sent when they click that content is by using this h ref attributes and setting its value to the location of where we like to send them. So a draft stands for hyper reference, which is the content or the other Web page that you're referencing. Here's an example of leaving your personal website and going to someone else's website, and we do that by using the full girl here. Here's another special type of link, and this is a link that will send an email so you would click this text, sent an email, and by using the mail to colon in our A treff value and then providing a valid email address, it will actually bring up the users default email editor, um, and have the the to field already filled out to the Web master at example dot com. In this case now, it could also create named anchor links, so a named anchor link is made up of two parts. It's made up of an element that has an i D that you've given it. So here we have a paragraph. It's called The Useful Tips section. That's, you know, somewhere on our HTML page, Um, and we've gear. We've given it an I D. Attributes equal to tips. And then if we'd like to make a link somewhere else in our page that when we click it, it will actually jump or scroll the browser to this part of the page. We do that by simply including a hashtag symbol and the name of that i. D. In this case, tips inside of our A treff attributes. So as we mentioned previously, links can go to a particular page within your own website or your own server, or it can go to a completely external site. Um, the way we do that is by providing different types of paths to those files. So the two main types of past we can give it are a relative or an absolute path. So here we're seeing an absolute path. So an absolute path is a path that starts off with http or https coal and slash, slash and then the domain. So this is the full Earl to another Web page on a different website. Now we can also provide a relative path, which is just giving the browser the location of the other file in relationship or relative to the current page that were on. So if we were on the contact dot html page and in that same folder on our server, there was also an about dot html page. We can simply provide the name of the file. So here we have the about and contact page are in the same folder, Weaken. Simply click this text and it will take us, in this case to a HTML page that's in the same place that we're currently at right on our same server. 13. HTML Iframes: now on I frame is a really interesting element. What it does is it creates a small little window, kind of a window cut out inside of your HTML page that's actually linking to content somewhere else. Here I frame actually stands for inner frame. And here the SRC or source attribute that we saw previously on the image element is also here on I frames. And this is going to allow us to point to a piece of content or, as I said, a Web page somewhere on the Internet. In this case, we're actually embedding a map from Google Maps on, and we'll look at how to do this in detail in the upcoming exercise. 14. HTML Grouping Elements: now it's also useful toe have grouping elements in HTML. Sometimes you'd like to create a box that will allow you to define just the content inside of that box or to physically separate, um, a few pieces of content from another piece of content. We have a couple generic grouping elements that are, you know, high frequency used for this. This 1st 1 is called a Div, which here has an opening and closing DIV tag. And the development really is just creating a box around other content so you can put other HTML elements or, you know, images or text or whatever you like inside of this box. Ah, and it's going to give you than a physical box that you can later style. You could make it look like a box if you want, by giving it a border or a background color as we'll see coming up. Or you could also just use it to sort of size or shape the content inside of it, and also to ah, position the content later will look at, you know, using dibs to display content side by side or to move content around into a grid. Now we also have a span element, which is kind of like a cousin to a div. What it does is it allows us to surround content without disrupting the space around it. So whereas a div will actually display like a box, it will force content to stack by default. One on top of the other span content will actually not disrupt a line of text. So, for example, if you have a paragraph about a new movie coming up and you wanted Teoh style all of the celebrities, names or all of the actors who were in that film a little bit differently than the rest of the paragraph one thing you could do is you could surround the names of all the celebrities inside of that paragraph using a span element on. And then this would allow you to to select that content separately from the rest of the paragraph and deal with it in a different way. 15. HTML Semantic Elements: so we also have semantic elements in HTML five. These will display just in the same way as a div. They're basically just a grouping element there just meant to create boxes to surround content. Now the nice thing about using semantic elements is instead of just using, for example, DIV, which is this kind of a generic box, the semantic elements make it a little bit easier for us as developers to see. So when we're moving through the code on our page, it's easier for us to see with these labels that were working inside of the head section versus the Footer section articles, or just meant to represent sort of a self contained composition within a document aside is for sort of secondary information. Um, could be like a sidebar beside your main section. Details is useful for creating a section where the user can retrieve perhaps additional information about the content above. We also have figure in fig caption. Eso figure allows us to surround out a piece of content such as, you know, typically an image or a diagram. Ah, and then fig caption then allows us to write a little snippet about that particular piece of content that's nested inside of our figure. We also have footers, we, which is, Ah, section that closes out the bottom of our main content. Typically, um, and again, this usually has data or links related to the document above or copyright information and header we can place above our main content. Often times it carries something inside of it, like a logo or a search form, etcetera. Our main content represents sort of the meat and potatoes of our HTML page. It allows us Teoh, surround all of our main content and sort of label it as such. So Mark is a way that you can represent a small, highlighted piece of text that's perhaps being referenced somewhere else. Knave again means navigation, so it's implied that it's sort of a main way for the user to get around. And sections are just sort of a generic piecing of the document. So it means that everything inside of a section typically has the same theme, and you might have different themes on your page and hence different sections of the page. Time is a good way to surround Ah, a calendar date or physical time of day one of the nice things about it is we can have a human readable time like May 15th and then a machine readable time inside of the daytime attributes, which you can add on to the Times opening tag here. 16. HTML Comments: so HTML comments are really useful to leave ourself or other developers. Notes about the code were writing. We might call out a block of code and say what it's doing there, what it's for. We might write little notes to ourself about things that we intend to put into our code later on, We might say to do plan to insert a video here later on something like that. So comments are great because visitors to your site won't be able to see the comments unless they start browsing your source code. But it's easy for you to see later on or other developers. 17. HTML Depricated Elements: This is a list of a few deprecate ID elements. So these air elements from older versions of HTML that we simply do not want you to use anymore. They're so these air frowned upon. These are things that are deprecate ID, and you no longer want to use these elements. And I just mentioned them because you might see them out there in the wild and just know that it's kind of Ah, no, no, to use these guys. 18. HTML Validation: Lastly, let's talk about HTML validation from time to time, even though we might make a typo here and there in our code, we can easily find those typos very quickly by validating our our code so we can actually paste in our code or we can link to it using the W three c validator it will actually list out, then the particular line number where you might have a typo or there some malformed code there. 19. HTML Reference: so that's a large list of elements to memorize. But don't be overwhelmed. It's really easy to look up the full list of HTML elements online. Um, one thing you can do is you can run a Google search for HTML element lists in your browser . Um, and you can see the top result here is one that I actually quite like is the html element reference from Mozilla Developers Network. So go ahead and click on that link and you can see that will take you to a page here and on the left hand column. You can see a list, a dizzy of every HTML element. Um, so here's when we learned about this is the BR element for line breaks. And if you go ahead and click on a particular element and that will take you to a page for the element that will give you a good summary of how that element works. All the permitted attributes, uh, and also show you some examples of how it works. 20. Code Along - Introduction: in order to give contexts and to put into practice what we've learned will be building a website together in five different parts throughout the course. This is the finished product of what the website will look like, and this is a website for a vintage bike sales company that's called geo cycle, and you can see it has a couple of different pages here. Um, it has a main navigation that stays fixed at the top, um, of products page to future. Different bicycles, individual pages for each of the products. A swell as a contact page that has a Google maps, Ah, showing the location of our company as well as a form where we can gather contact information from our user. 21. Code Along - Part 1: for this first coat along exercise, you're going to get started by downloading the starter code as a zip file. I'm on Max of this automatically ends up in my downloads folder to extract the Zip file, Go ahead and double click on it, and that will expand into a folder that I'm going to move this folder to the location on my computer where I'd like it to live. In this case, I'm going to throw it into my development folder inside my user folder. You can really put it anywhere on your computer that you like. You can see inside the Starter Code folder. We have a folder with images that I've provided for you as well as it read me file that has some short instructions for each code along exercise as well as a source dot text file. This has all of the source text that we can use to copy and paste onto each page of our website that will be building today. Let's start by dragging the CE Dash 01 folder down to our Adam code editor icon in order to create a new HTML file for our home page. We're going to right click on the CE Dash 01 page content start folder, and we're going to select new file here. We're going to type in the name of the file, and it's very important that we name this index dot html all lower case spelled exactly as we see it here. Then go ahead and hit return. It's important to always name your home page index dot html. This will ensure that whenever someone visits your website, the browser will automatically load index dot html. First, let's start out by typing hello world into our index page and then we're going to save our file by doing command s on Mac or control s on Windows. Alternatively, you can also click the file drop down menu and select Save from There now to preview our work. We'd like to bring up this HTML file in our browser, So I'm going to right click with the mouse on the index dot html file and I'm going to select showing finder and then I'm going to right click on the index dot html file here in Finder and select Open with Google Chrome. Here you can see the text. Hello world showing in our browser there, So any text you insert into an HTML file will automatically show up in the browser. Now, let's jump back over to our code. In this time on the next line, let's type in Hello, Moon And then we'll save our file. That'll be command s on Mac or Control s on Windows and then we'll jump back over to our browser. And in order to see our updated changes, we always have to refresh the page. So here, we're going to do command, are on Mac or control R on Windows as a shortcut to refresh the page. And that's just the same as clicking this little reload icon here. Now, one thing you might notice is that the text hello world and hello Moon are appearing side by side on the same line, even though they're written on two separate lines in our HTML file. That's because the browser ignores white space. And in order to tell it that this is two separate lines or two separate paragraphs, we have to use HTML code. So, in order to set this as two separate paragraphs, we start by putting an opening P tag before hello world and a closing p tag after Hello World. This makes up the P element, which creates a paragraph and again it's made up of this opening P tag in this closing P tag. The opening P tag is made up of angle brackets, otherwise known as less than and greater than symbols, which surround the tag name itself. The closing tag name is just the same as the opening tag name, but it's preceded by a Ford Slash. Let's also insert an opening and closing paragraph tag before and after the Hello Moon line . Then let's go ahead and save our file and let's jump back to the browser to refresh. The browser is now displaying these as two separate lines and creating some space in between them. Next, let's jump back over to our code and let's erase the code we have so far, and instead we're going to create the basic HTML document structure to start off with. We're going to put element that's going to tell the browser the version of HTML that we're using. And to do that, we right less than symbol exclamation mark doc type followed by a space, and then we're able to put in the version of HTML for HTML five. You simply write html all lower case on the next line. We're going to create an HTML element made up of this opening and closing HTML tags. This tells the browser that any code found in between the opening and closing HTML elements are to be interpreted as HTML code. Next, we'd like to divide our document into the two main pieces that every HTML document has, which is a head and a body. Now you may have noticed that we're automatically in Denning by two spaces every time we insert one HTML element inside of another. Now, this isn't actually necessary for the browser to format the content properly. But it's helpful for us as human beings to be able to see this indentation, because this is a very clear visual indication when we nest one element inside of another. Now remember, the head section contains all of the metadata for our browser and information for search engines. So this is the part of our page that's not actually seen by our user. Next in the head section will start off by creating a meta tag, and here we're going to give it a attributes called Character Set, which will tell the browser the formatting for the particular characters that are in our page for HTML five documents. It's recommended that you use UTF eight as your character format encoding. Next, we'd like to create a meta tag that will tell search engines. A description of our website here will create another opening meta tag, and then we'll give it a name attributes, and we're going to set its value to description. Then we'll put a space and will create another attributes called Content. And here, inside the value for content. We're going to write a short paragraph that will actually show up whenever we do a Google search for related terms on our website to demonstrate what this looks like. If you jump over to your browser and open up a new tab and go to google dot com and let's do a search for vintage bicycles. Now, if we scroll down past the paid ads and you'll notice in our search results, we have included here the title of the page, the actual Earl of the Page and then following. That is a short, descriptive paragraph, so it turns out we can actually control which descriptive paragraph appears here on Google searches by filling it into the content value for our meta description tag. Now, I've already provided that text for you in the source dot text file, so you can go ahead and click on source dot text from the sidebar and then here under line three words, says description. Let's highlight that Texas says restored vintage bicycles, and you can copy that by using command, see on Mac or control see on Windows, and then we're going to jump back over to index dot html. And we're going to paste this as the value for a content attributes so you can paste using Command V on Mac or Control V on Windows Next, inside of the head section. We're going to create another meta tag, and this one will give the name, attributes the value of keywords and here, under content, we're going to provide a comma, separated list of terms that we would like search engines to associate with this particular Web page. So jumping back over to source dot texts, you can see online five. After the word keywords, I have a comma separated list year. We're gonna highlight that text and copy it. Command C on Mac or control. See on windows and again will paste it here. Command V on Mac or Control V on Windows. Now here you can see that our code is running off the right hand side of the screen. You can go to the View drop down menu, and you can select toggle soft rap, and that will allow the text to wrap onto a new line. Next, we'd like to create a title for our Web page, and this is the same title that will appear here in our search listing and also the same title that will appear here at the top of the browser tab. Now show you a quick shortcut you can do using the Emmett Completion plug in. That, we added, is you can simply type the name of the tag in our case title, and then you can hit the tab key and will automatically create that opening and closing tag for you. Now, for our title will put the name of the company, which is geo cycle, and then we'll put a space hyphen and then some descriptive terms for what we are selling here, which is vintage bicycles. So these words inside of the title are also very recognizable to search engines and important to include. So that's everything we need in our head section. Now we can move on to the body section and here we're going to break the page up into three parts. We're going to have a header at the top of the page that will include our main navigation below that will have a main content section and below that will have a footer that will contain contact information and secondary information for our site. I'm going to write a comment in the code to myself to label these three sections to make a comment. In HTML, we do less than symbol, exclamation mark, dash, dash. And then here we can write Header And then, in order to close out our comment, we have to do Dash dash greater than Let's make another comment for the main section and let's make a final comment here for our footer now in HTML five. We actually have a semantic element called Header now are Header, for now is going to include a navigation bar inside of it. So inside of here I will nest Another semantic element that's called knave, and inside of it, we're going to create links to our other pages. No, I haven't built those pages yet, but we'll just put in some links as placeholders for them. For now. Now, to create links between each page, we use anchor links which using opening and closing a tag like this. And then inside the opening a tag we used the H ref attributes to point to the relative path of where we would like the browser to jump to whenever this link is clicked. So in this case, the first link here is going to take us to our home page, which is index dot html Now, in between the opening and closing a tag, that's where we put the actual clickable text that will take us to our home page. So for this one, I'm just going to put the name of our company, which is geo cycle. Now for our next link here, we're going to have take us to our products page. And although I haven't created this file yet, I'm going to name it products dot html now whereas we had to name our home page specifically index dot html. You're free to name the other Web pages Anything you like, as long as they end in the dot html file extension here will write the clickable text in between the opening and closing a tag, and we're gonna write products there. Lastly, we will create a link that's going to take us to contact dot html and here for the clickable text will just right contact. Now, before I move on to the main content, I'm actually gonna skip and go down to the footer here will create a HTML five semantic element known as Footer and inside the Footer. I would like to create a couple headings and I'm gonna start off with a level four heading . So we're gonna use the H four element and that's made up of the opening and closing age four tag. Now this first heading Aiken, grab from the source dot text file. If we scroll down to the section that's labeled Footer Online 60 you can see I have a title for all of my headings here. And this 1st 1 is correspondents. We can go ahead and copy that, and we'll just paste that into our age for their now blower H four. I'd like to create a paragraph so we'll use the P element. And inside of RP Element, I'd like to have two links. One is going to be to our telephone number, so here will create an A tag and inside of its h ref attributes, which is where the link will point to. We're going to have it actually dial a telephone number for us. So on compatible devices if you set the A traf as TL colon and then the 10 digit dialing number here, So I'm gonna do plus one for the country code of us and then we'll do the area code 555 and then we'll do. 555 1234 And then inside the opening and closing a tag. There were going to put that phone number in again as the clickable text that will dial the number now on compatible devices. When we click this phone number, it will actually bring up the dialer on smartphones and tablets if available, or whatever application you might be using through your browser to make calls inside of this paragraph, as I mentioned, will also put another a tag. But this one's actually going to send an email to our email address so much like we have the TL colon prefix here inside of the link. We also have the mail to prefix. We can add inside of the HF attributes to bring up the users default email client in their browser. Then we simply type in the name of the email address we would like to send the mail to. In this case, it's info at geo cycle dot com and here in between the opening and closing a tag again, we put the actual clickable text that the user will see. So here will just repeat that email address again. Info at geo cycle dot com. Additionally, inside the correspondent section, we'd also like to include an address. HTML five provides us with an address element and for the address here, weaken type in geo cycle incorporated and in order to make a line break to force the text down to the next line, we can use a BR element and here will put the street address, which will be 555 Edinburgh ST and if you like, you can actually copy and paste that from source dot text online's 52 to 53 we'll just pace those in there and we'll add a line break after each blower address will create another Level four heading, and this one instead will say customer service. This will be followed by a paragraph, and inside of that will be three links. And again, we can grab that from source dot text. Your online's 57 to 59 we're going to surround each of these with a tag. So I'll put a opening and a closing a tag after each. Now, inside each a tag. We're going to do an H ref attributes, and we're just going to give him a pound symbol as a placeholder. For now, it's weak and copy and paste that into each link. There below are customer service. We're going to create another H four, and this one's going to say get involved. This will also be followed by a paragraph that will have three links inside. We can also grab those from source dot text online's 63 to 65 and we'll also do a hashtag there is a place holder and I'm going to paste that into each link. Next, we'll do an H four that says, Follow us now the same as before. We'll do a paragraph with three links, so I'm actually going to copy and paste it from the section above. And the only difference here is that each of these links will link to a social networking site. This 1st 1 here I will call Facebook this next one. Here we will write Twitter, and lastly here will have Instagram as the final link. Now in the main content section, I'm going to use the HTML five semantic element. It's called Main and inside of here for right now just is a placeholder. I'm just going to write home page now. What I like to do to make things easy on myself is whenever I'm building a multiple page website, I always start off with the code that's going to be the same on every page. So I've already built the header in the footer, which I know are going to be the same on every page. Now I can simply duplicate this code as many pages as I have in my website, and then I just need to go back in and change the main content in the middle of the page. So let's go ahead and duplicate our index page with this code inside of it. So I'm going to right click on the index dot html file here, and I'm going to select Duplicate and this 1st 1 I'm going to call contact dot html instead and we'll go ahead and hit return. And for this file, the only thing I'm going to change inside of the head section is in the title. After vintage bicycles, I'm going to write contact and then also down here in our main section. We're also going to write Contact Page, just a za placeholder for now, and we'll go ahead and save that. Now let's go ahead and right click to duplicate index dot html again, and I'm going to call this next one products dot html and will hit return and again in the title section here. We'll just put another dash and we'll type products and then here in the main section will change home page to say products page, and then we'll go ahead and save that file So let's jump back to index dot html inside the browser. And let's refresh the page to see our changes. So here you can see the head section made up of these three links Geo cycle products and contact. Go ahead and zoom in on that to get a closer look. And underneath that it says home page. And that's followed by our Footer, which says correspondents, customer service, get involved and follow us. So to test out our links here, if we click the second link for products, that should change the main content here to, say products page. And if we click contact that takes us to contact out HTML and says Contact page here inside the main content area, and then if we click Geo cycle, it takes us back to index dot html, which is our home page. That's a good start. Now the only thing left to do is to come back into each individual page and change what's in the main content area. Now, inside of the main content section of the page, we can write some comments to herself about the things that will place here. So, for example, we're going to have a splash image. That'll be the first thing people see when they visit our home page, and we're also going to have a safety films video. And additionally, we're going to have some information about our charity ride events now starting off with our splash image in order to create an image in a Web page, we have to use the I. M G element. Now the AMG element is self contained and on Lee has an opening tag, so there's no closing. I am G tag necessary to create an image. Now it does have two very important attributes. One is SRC, which stands for the source location of where that images and the 2nd 1 is Ault, or alternative text, which is text that's meant for people who are visually impaired, where they'll have the text read to them as they're not able to actually see the image and this old Texas also very important for search engines. Now let's start off with the source location of our image. Currently, we're on the index dot html page, and we have to give the relative path location to our image file, which is in the Images folder now in order to tell the browser to go into the Images folder . We have to write images slash, which is the name of the folder here, followed by a slash. Now we can give the name of the image, which is splash dot j peg. So again, this tells the browser, go into the images folder and then load the splash dot j peg image. Now for the alternative text. We're just going to write a sentence that describes what's actually in this image. If you click on the image here, you can see that it's basically a family riding bikes looking off into the distance so here will just right family on bikes looking down a road, crossing a field on a summer's day. So again, this texture will be read to people who are visually impaired by a screen reader as they're unable to actually see the physical image. And this texture will also be recorded by search engines. Now optionally, we can also add a title attributes. Now the title attribute here will only be visible if the user hovers their mouths over the image and leaves the mouse still for a period of time, so to demonstrate This will type some text here that says, Choose your path ahead and let's go ahead and save the index page and let's jump back over to the browser and refresh. So here you can see our image appeared on the page, and if I hover my mouse over and leave it, you can see our title appearing. Choose your path ahead, and as soon as we move our mouths again, it will disappear. And you'll notice that although that all text is in our code, we're not actually seeing that all text. Let's move on to our safety film here. Now we'll start off with an H two here, and if we jump over to our source dot text file online. Seven. We have the title vintage bicycle safety film. We can copy and paste that here and then on the next line we'd like I frame. So let's go ahead and open up a new tab in our browser, and we're going to head over to youtube dot com. And under our search here, we're going to type in vintage bicycle safety film now, within the search results here. If you scroll down, we're going to select this film here that is shared by the user large fish. Now, if you can't find this exact film, it's perfectly fine to use a different film. So here I'm just going to click on the title of this film, and we're gonna click this share link here, and that's going to expand. And here you have three tabs and we're going to select the second tab that says, In bed Now, underneath this code, it's a show more, and if you click on show more, it gives you a preview. It also lets you set a video size, and it also lets you set different options for the video. Now here we can just copy this code at the top for the I frame and to copy the code, you can just click inside of this small frame, and I'm going to do command a on Mac or control A on windows to select all and then command see on Mac or control. See on windows to copy now will jump back over to Adam, and we're going to pace that code in Command V on Mac or control the on Windows. Now, the only thing I'd like to adjust year for this I frame element is for the width. I'm going to change the with 2 606 pixels, and I'm going to change the height to 455. Um, and I just happen to know that these numbers workout for my particular layout. Here. You can see that the I frame also has a source attributes similar to our image element, where we're actually pointing to the absolute path, which is the YouTube location where this video can be found. To preview this, let's go ahead and save our index page and jump back over to the browser and refresh. You can see the video appearing and you should be able to click to play the video so you can see that the I frame element, which stands for Inter frame, is acting like a small window. That's allowing us to look from our website into a frame to another website. So in this case, were embedding a piece of the YouTube website here into our particular Web page. Let's jump back to our code, and underneath our I frame, we will create a paragraph that will give some information about our film Now, if you head over to source, dot texts will copy from Line nine, where it says public domain and well paced that inside of our paragraph and save Next. Let's move on to our charity ride events section. We'll start off by creating an H two and this age to should, say, charity rides, which you can grab from Line 11 and source dot texts, and we'll just paste that there. Now we'll start off by just putting in the information for one particular charity right event, and the name of the event will be inside of an H three element. So inside of our H three, we're going to paste in the name of the event, which we can grab from source dot text. Our first event is called a D. A tour de cure, so we can copy that from Line 13 and source dot text, and we can paste that here into our age three. Now, we'd also like this text to be clickable, so I'm going to surround the title 88 toward a cure with an opening and a closing a tag there now, inside the opening, a tag will create the A traf attributes, and here we can jump over to source dot text and copy that link from Line 14 and then we'll jump back and paste that in now following our level three heading, we're also going to have a paragraph that will have a description of this event. We can also grab that from source dot text online 16. So we'll copy that and will paste that into the paragraph. So we'll go ahead and save the index page and will jump back over to our browser and refresh. So here you can see the charity rides heading. And here is the link to our event toward a cure. Now, one thing you might notice when we click this link, it causes us to leave our Geo Cycle website and takes us to the American Diabetes Association website. Now that's all well and good. But what if we don't want our users to lose access to our website? In fact, what I'd like to happen is whenever they click links to our internal pages, I'm perfectly fine for to just change between those pages. But whenever they click a link to an external website, I'd actually like it to open up a new tab in the browser instead. In order to do that, it's really quite simple. Also we have to do is go inside of the opening a tag, and after the H ref attributes, I'm going to put a space, and I'm going to include an additional attributes called Target, and we're going to set its value equal to underscore Blank. This is going to tell the browser to open up a new blank tab each time that a person clicks this link. So let's go ahead and save index dot html and let's come back to the browser and refresh. And now you'll notice that whenever you click the 88 or to cure link, it's actually opening up a new tab in the browser. That way, the user can easily tap back to our Geo cycle website. Next. Let's go ahead and move on to the contact page. Let's go ahead and erase the taxes, says Contact Page, inside of our main section, and said will write comments for the things we're going to build here. Our contact page is broken up into two main parts. We're gonna have a contact form and additionally, we're going to have a map that shows the location of our company. Now we're gonna create our contact form using the form element which is made up of the opening and closing form tags and then inside of it, we're going to give it to important attributes. The 1st 1 is action, and action is going to point to the location on your server where this form content will be submitted and we'll just include a hashtag is a placeholder. For now, the next attributes is method in which is going to describe the type of http requests were making the most common ones. Four forms are get in post, and in this case, we're going to choose post because we're going to be posting this information to whichever action location we have specified here in the action attributes. Now, inside of the opening and closing form tags, we write all of our inputs for the user. So first will start off with an input with the type of text, and we can also give it a name attributes which will give the value that the user types into this input a label. So here we're gonna call this one first name and we're also going to create some placeholder text inside of it. Now, this is Texas will appear when the user first seizes input. But when they click inside of it and begin to type, their content will replace this placeholder text so here will just right first name. And then lastly, we're going to put the required attributes by itself. So here you don't need to give it a value. We just simply right required. And this ensures that the user has to fill in information in this field. In this case, there first name before it will allow the form to be submitted. Let's go ahead and create another input. And this one I'm going to give a type of text also and here will set the name to last name instead. And we'll set the placeholder text also to last name, and this will also be a required field. Next, we're going to create an input with the type of email and this one will have the name label of email and the place holder will be set to email and this will also be a required field. Next will create an input and this one will get the type of TL for telephone and here will give it a name of T E l and will set the placeholder attributes to phone. And since this particular field is not required, I'm simply just going to omit having that attributes there. Next, we'd like to have a general text area element, and this one is going to give us the ability to have ah larger area for them to write. So whereas thes inputs for first name and last name will just simply provide them a single line to write on text area gives them the ability to write an entire paragraph of information if they like. So here we're going to give the name of text area and set it to message. And at this time, we don't need an I d. Attributes. I just did the Emmett Auto completion and it gave me an idea. Attributes I don't want it, so I'm just gonna delete it. And here we have columns and rows and I'm gonna go ahead and set this to 30 columns and eight rows. Now, columns is the number of text characters that can appear before it will line rap to the next line and roses the number of lines of text that you can see visible before getting a scroll bar. Now we also wanna have placeholder text inside of this and here we'll just write message and will also make this particular field required. Now, lastly, we want to put an input button. So here we're gonna put an input with the type of submit and we're going to give it a value which will contain the text that will actually appear on this button. So here will also right submit so we can go ahead and save our form and let's come back to the browser and we want to click the contact link here to jump over to our contact page. And here you can see the form appearing. At this time, all the inputs are appearing side by side and a bit later on, we will style this so that they're stacking vertically. But this is fine for now. So here inside of the first input, you can see the placeholder text first name. But as soon as I type in my own value, you can see my value is replaced that placeholder text. So if I said this last name to sky. Now, if I fill out an improper email, for example, if I just type food and then I click submit, it tells me that I should please include an at symbol in the email address and the reason it knows that this is an email specifically is because we set type to email here. So in any modern browser that's html five compatible, it sees this email type, and it's going to then validate for us to make sure that this actually matches or resembles a really email address. Now here, phone number wasn't required, so if I don't want to put it, I could just leave it. And again we made message. It required field. So here it's telling us to fill it out, and you can see then that only when I fill out all required fields in the way that it deems necessary will allow me to actually submit the form. And here it submitted to hash tag because that's what we had set for the HTML action. So at this time, it's not really doing anything with our data. We haven't written any back end code to I received this form input, but this shows you how to on the front and create the form fields themselves. That's looking pretty good. Let's move on to the map. So here for the map, we would like to in bed another I frame from Google Maps. So I'm going to open up a new tab in the browser and we're going to go to google dot com slash maps And here you type in the address of your company. Since this isn't a real company, I'm just gonna type in New York City. Just is a generic location. Then next, What you can do is you can zoom in, so just zoom in and center this right over lower Manhattan. Now, once you get the map looking the way you want, you can go over to the side panel here to expand it, and then I'm going to go ahead and click this icon here that says share. And then next we're gonna click the tab that says in bed map. Now, under this drop down menu, you can change the size from small, medium, large or custom. We're gonna actually select custom size, and we're gonna change the size here to 523 pixels wide, and we're gonna set the height here to 359 pixels. These numbers are arbitrary. These just happened to work for my particular layout. So then we can copy the I frame code here so you can click on the text and do command, see on Mac or control, see on windows and jump back to your code here in the Adam Editor. And we're gonna paste amusing command V on Mac. Or you can use Control V on Windows and also gonna set view to toggle soft rap so I can see all of that code here. So here you can see the I frame code. Let's go ahead and save this and jump back to the browser and we can refresh our contact page there. Okay, Perfect. Next let's move on to the products page. So here in the main area, it says products page, let's go ahead and erase that, and we'll write a comment for the first thing we like here is going to be a product in true blurb. And underneath that, we're going to have kind of like a motivational quote and underneath that will have a section to feature certain products. So have sort of a featured product section. Now starting off with our product intro. We're gonna do this inside of a level one heading. So that's the most important heading for search engines. It also gives us the largest text in our browser. And here we're going to put some rich search engine terms such as vintage bicycles, which is what we sell here for our website, and underneath that we're going to put a paragraph. Now, if we jump over to our source dot text file and you scroll down to the products area, that's below line 18 you can see online 22. There's a paragraph you can copy there that starts off our shop sells so we can copy that. And we're gonna pace that into the paragraph, and we'll also set view to toggle soft wrap here. Next, we want to work on our quote. Now, this motivational quote is going to be inside of a paragraph. But we would like a way to individually style two different pieces of this quote. So we're actually gonna wrap the two parts of our quote in span elements so this first span will be the quote itself, which we can copy from source dot text. And that is online 24. We're just gonna copy everything just before the EM dash here that starts off a bicycle ride is a flight from Sadness will copy that. We'll jump back over to products and well paced that inside of the first span element. And then after that span, we're gonna create another span. It's going to separate the second part of our quote, and then we can jump over to source dot text and copy the author, which is after the em dash here, James E. Stars. And then we'll come back over to products and paste that into our second span there. So because we have this paragraph divided into two spans, it's going to make it very easy for us later on in in an upcoming exercise to style this portion of the paragraph differently from this portion, let's go ahead and move on to the feature product section. So here we're going to create a level two heading that's going to say our featured picks, and below that we're going to have a link that's going to surround an image and heading, so we'll start off by creating the A tag there. Now this link is actually going to point to our first product, and I haven't created the page yet for that product. So let's actually put this on pause and let's go over to our root folder here that says CE dash 01 So I'm going to right click on that C A E Dash 01 folder and I'm gonna select new folder. And here I'm going to name this folder Products. So here, under the images folder, you can see I've created a new sub folder called Products, and this again will house all of our individual products pages. I'm going to go ahead and right click on that product sub folder, and there were going to select to create a new file, and we're just going to name this 11 dot html, so this should appear as products slash one dot html and then you can go ahead and hit return, now jumping back over to products that HTML. Now we have a location that we can actually link Teoh, so we have to tell the browser to go into the products folder and then to load one dot html from inside of the products folder. So to give it a relative path, we have to say Products Slash, which tells the browser to go into that products folder. And then we have to say one dot html toe load that particular page now inside of the opening and closing a tag for our first product, we're going to make a clickable product image, so we'll start off with the image element, and here we're going to link this into the images folder to one dot j. Peg. So the source of the image will be at images slash one dot jpeg. And for the alternative text, we're just going to write Product one now. After the image, we would like a small heading so well, right H five here, and this one is going to just be the name of the products, which you can grab from the source dot text page. And here you can see that's online 28 which is lime Schwinn and jump back over to products and paste that into the H five there now, because this a tag is wrapping both our image element and R H five element. That means that both of these will be clickable as a link, and they'll both take you to products slash one dot html. So let's go ahead and save products that HTML And now we need to finish up our one dot html page, which will be our individual products page. Now one dot html is blank, but it's going to have the same head section as the products page, and it's going to have the same sort of main navigation and then same footer at the bottom so we can copy and paste a lot of that code. So let's go over to products that HTML and let's copy all the code, starting from line one worse as Doc type and let's click and drag and highlight all the way down to the main element online. 19. So go ahead and copy that and jump back over 21 dot html and well paced. Then let's go back to product study html, and we're going to skip past all of the content inside of the main section, and we're gonna start copping again from the closing main element all the way down to the end of the closing HTML element, and we're going to pace that in. So there's our footer. There's our header, and the only thing we're going to change here now is inside of the main section. So as a test inside of this main section, let's just right product one as a place filler for now. And let's save the page and jump back to the browser and here will refresh the products page here. The product link you can see is showing our little white Mickey Mouse glove, which is indicating that this is a clickable link, and you can see also are age five years, also clickable. Now, if we click the product, it takes us over to slash products slash one dot html, and here you can see the main Texas says Product one. Now. You will notice, though, that these links in the main navigation section are broken. Now. For example, if I try to click the products linked to go back to the page for all of the products, it tells me that your file was not found. If you look at what's happening up here in the URL Bar at the top of the screen. When we click the products linked, it's trying to go to slash products slash products dot html. Now we have to consider the relative path from our one dot html page, which is inside of the products folder, to get to the products dot html page that's outside of the products folder. So what we have to do here at one dot html is we really need to tell the browser first, leave the products folder and then once you've left that folder and you're in that parents CE folder, you then want to load products dot html. So on one died. Html. We need to update these links in order to describe the proper relative path from one dot html to index dot html. 22. HTML Validation: Let's talk about some other ways that we can correct typos and errors in our code. So let's say, for example, that you made a very common mistake, such as you accidentally didn't include the two after your age, too. So here we just have an opening H element, which is not actually a valid HTML element. These types of typos air very easy to make. We all do it from time to time, and it's also very small and hard to see within your larger block of code. That's why it's always a good idea to validate your HTML. Now, in order to validate your HTML, you're going to want to copy all the code from this page. We're gonna do command a on Mac or control A on Windows to select all. Then we're going to do command, see on Mac or control, see on Windows to copy. And now we'll jump back over to our browser and will open up a new tab, and we're going to do a search for HTML validator, and we're going to click the first link at the top, which is the W three c markup validation service. Then we're going to click the validate by direct input tab and we're going to paste in our code. So I'm going to use Command V on Mac or you compress control V on Windows. Then you're going to want to click the large check button. Okay, so here we're getting a warning in several air messages. Now, warnings are always a good idea to follow, but they're not something that will necessarily break your code. It's more of a suggestion, but we'll go ahead and follow this suggestion here. It says that our document appears to be written in English, and we should consider adding the laying attributes inside of our HTML starting tag. So let's go ahead and correct this warning first. So I'm gonna jump back to my code, and I'm going to go into my HTML tag here the starting tag and put a space and type the laying attributes and said its language to E N. So E. N. Is a character code for English, and there are different language codes. You can look up for different languages all across the world. Let's go and copy this onto or other pages while we're at it. So all copy laying E N. And then we'll go ahead and switch to the contact page and will paste that into the opening HTML element there and will also add it to the products page and will also add it to the one dot html page, which is inside the products folder, jumping back over to index dot html. I'm going Teoh select all again and copy and jump back over to my browser and I'm going to go here and select, delete and replace the code that's been updated there and click the check button again. Okay, so you can see the warning disappeared. But now I'm onto the actual error messages. So the first air message here says that the Element H is not allowed as a child element of the main elements. Okay, so it shows here also that this is from Line 24 Columns seven. Ah, and it's showing here that it's the age just before the word vintage. Now, if you click this link, it will actually highlight in the code that you pasted above the particular issue. So it's highlighting here the H element, and again it says that that's online. 24. So let's go and go back into our code. And if we go down to line 24 on the index dot html page, sure enough, we can see that that's an H element which is not a valid element inside of the main element . And that's because we really meant to put in hte to here. So let's go ahead and correct that, and then we'll save the file. And once again we can update our code here and recheck it. Now we only have one error message left and it says for this one that the frame border attributes on the iframe element is obsolete for the time being removed. This frame border attributes from any I frames in our website. So if we go back to our index dot html page and we go to our eye frame online 26 we can see here that there's a frame border attributes set to zero, and this is the code that we had copied and pasted from YouTube. So we wanna get rid of that now. We also have a I frame on the contact page. We might as well go over to the contact page and remove the frame border attributes from there as well. So I'm gonna go back to the index page. I'm going to select all copy, and I'm going to replace the code here in the validator and check again. Great. So this time we got a little green box that said, No errors or warnings to show. That means that my HTML is properly validating and there's no longer any errors in my code . 23. Developer Tools - Part 1: next, let's talk about solving issues in your code that won't necessarily be triggered in the validator. So here, under our image link, I've actually removed the h from the file name. So this is an example of something that won't actually be triggered by our validator Because the validator doesn't really care about what we name our files. It's more looking for improperly formatted HTML code. So in order to solve this, one thing we can do is jump over to our browser. So any time you see something like this, where your images and appearing good and inspect it to bring up your developer tools so you can bring up the death tools by either clicking under view developer and selecting developer tools. Alternatively, you can right click on any element within the page and select Inspect, and that brings up the developer tools panel here at the bottom of the screen. Now, if you click the network panel here and you refresh the page and you'll notice that the browser is showing us the response for each resource, it is being loaded in this page. Now, if we zoom in here, we can see that, for example, when we requested the index dot html page status is showing as finished, or you might also see a status of 200. Which means a successful response, however, under R J Peg Image here we can see that the get request is lit up red, and it's showing the statuses failed. And if we hover over that status, it shows error file not found. So what it's telling us is that we haven't provided the proper path to our image file now. Additionally, over here under initiator, we can see that it's actually showing us the file in line number in which this issue is occurring in our code. And if we click that link, it will highlight and yellow here the image element online 21. So let's go back over to our coat. And if we head over to the image element online 21 we can double check the path to this image. So here we're loading images slash that takes us into the images folder, and then we're looking for a splash that J. Peg and you can see, in fact, that this is spelled with an H on the end so we can determined that that was the issue, and we can go ahead and save our file and we can come back to the browser and refresh, and you can see the images appearing there now. Now, if we click back on the Elements panel, there's a couple other things we can do here. For example, if we inspect this level to heading, that's going to select it here in our element panel. And let's say we'd like to try this out as an H three instead of an H two just to see what it looks like to do. So you can right click on that element and select edit as HTML and then inside the editor box will just change these twos two threes to make it a proper age. Three. Now to apply this change, we just simply need to click outside of this editing box here. And you can see it, in fact, did make our text a bit smaller here when it changed it to an H three. Now it's important to note that this is just previewing the change in the browser. It's not actually changing our code, so this is nondestructive. There's no harm being done here. In fact, if we refresh the page, that element will go back to being in hte, too. So these are just a few of the things that you can do with the developer tools, and we'll be exploring it in more detail in future exercises. 24. CSS Syntax: This next set of slides is on CSS. Fundamentals here will discuss CSS syntax, CSS selectors and CSS authority and inheritance. CSS stands for a cascading style sheets cascading because it can apply across multiple Web pages and style because we're using it to actually style or HTML content, and she'd because it's in a single file. So we're able to style all of our HTML pages from a single location. CSS was originally created as a better solution to style HTML elements, and it has a unique syntax. It's separate from HTML, and we're going to move on to look at three distinct formats. Uh, that you can write CSS in. Let's take a look at the CSS syntax. First, we start off with a selector statement and here were using the letter Pete, select all paragraphs. Selectors allow us to pinpoint the particular content that we like to style. Then, following the selector in curly braces, we have the declaration or CSS rule. The declaration is made up of a property and a value which is separated by the colon symbol and ended with a semicolon 25. CSS Formats: the three distinct formats that you might see CSS and are in line internal and external in line. CSS is written in the starting tag of the HTML element, using these style attributes and then setting the value as a valid CSS declaration in line . CSS is typically only used in HTML emails, and it's not really appropriate to be used in Web sites. The reason is that it really only affects the element that you apply the style attribute into, and this is a lot of work. You can imagine that if you wanted to go back and change the color of many different paragraphs you'd after, then go into each individual style attribute of every paragraph in your website. Another format for CSS is called internal or sometimes called Embedded, and this is when we embed CSS directly into our HTML pages by using a style element made up of this opening and closing style tag and then writing CSS selectors and declarations within it. The main disadvantages are that it only applies the styles to the particular HTML page that you've included this style element into Leslie. We have external CSS. This is the preferred format for websites, the reason being that were able to put the CSS in a separate file here called style dot CSS . And then we're able to link that in as many HTML pages as we like inside of the head element. So you could imagine that you might have a website with 100 pages. And if each of those 100 pages has this link to this external style sheet than the styles within the style sheet are affecting all of those 100 pages. Next, let's talk about CSS selectors. We're going to explore Type I D class and compound selectors to start with. 26. CSS Type Selector: type selector, select elements with the matching selector name. So if we have a P element here, it's a simple Is typing the name of that element here as the selector, and then here were setting the color of all paragraphs text to black, So this is going to affect all paragraph site wide. 27. CSS ID Selector: I d selector select an element where the I d. Attributes has a matching selector name. So you may have situations where you have a unique element and you'd like to label that in style that a bit differently from the rest. So in this case, in our HTML, we have a div and we've given it this idee attributes and said its value equal toe box Here , the name box is something that we just made up and you can really label this anything you want. Then, in order to select that, we use the hashtag symbol. It's a clue the browser in that we're trying to select an I D of something, and then we follow that by the name of the I D, which is box. So here, hashtag box is going to give the blue background color to this particular div here 28. CSS Class Selector: class electors select all elements where a class attributes matches a selector name. So this is a great way to Sprinkle a style across certain elements to apply a class. We use the class attributes in our HTML file, and we said its value equal to a class name and this particular class name, weaken, name anything we like. This is a label that we come up with on our own. Then, in order to select that element, we used the dot symbol to indicate that we're trying to select a class followed by the name of the class so dot thick is applying a bold font weight to this particular span with the matching class of thick. Now, one difference between classes and ideas are that I ds air really only meant to be used once per page. So when you think of I d think of unique identity, in other words, on a individual HTML page, there should only be one element that has the idea of box in this case. However, with classes you can apply the same class name multiple times across the same HTML document , so I could actually have many different elements that have the class of thick applied to them. 29. CSS Compound Selector: compound. Selectors select all matching elements in the compound set. In order to make a compound set, you simply use a comma. Two separate, each particular selector. So here we're selecting H one's age twos and an element with the idea of box, and we're giving all three of those particular elements the font family of aerial. So here the H one will style this element. The H two will style this element, and the HASHTAG box will style this element. Using compound selectors is useful if you'd like to apply the same CSS rules to multiple elements at once. Now let's look at some descendant child, universal attributes and pseudo class selectors. 30. CSS Descendent Selector: a descendant selector. Select elements that are descendants of the matching selector name The way we indicate that one element is a descendant or in other words, nested inside of the other is by using a space. So because I have a space between hashtag nav an ally, what it's going to do is it's only going to select list items that are inside of an element that have the i d of knaves. So here, hashtag nav first goes in, select this UL and then again, the space separation here, the keyboard space. In other words, in between, these two tells it to then go inside of it and in this case, select list items. So this particular statement hashtag knave space ally is really only selecting list items if they happen to be Children inside of an element with the idea of knave. 31. CSS Child Selector: Now if we'd like to be more specific in Onley select elements that are nested one level in , in other words, Children Instead of grandchildren, we can use the child selector. Child selectors will select Onley elements that are direct Children of the matching selector name and not their grandchildren. Now similar to the descendant selector, we place a character here, but instead of a keyboard space, we're using the greater than symbol. So this selector statement will first go and find an element with the idea of list, which is this UL right here and then The greater than symbol means it will go in just one level and select any list items that are Children that are just one level in from this item with the idea of list. So here it goes, one level in, which means that it will select this ally. But it will not select this sub nested ally because this one is nested mawr elements in or further levels deep into the element. So again, descendant selector uses a space and it basically will select Children, grandchildren, great grandchildren. In this case, any loose items that happen to appear inside of this element with the idea of knave will be selected and changed their text color to black. However, with this child selector, it will make this child's text black, but it will not affect this grandchild. So again, the greater than simple muse to go in one level deep. 32. CSS Universal Selector: next we'll take a look at the Universal Selector. This will stall anything that has not previously been styled by anything else. To use the universal selector, we use the star symbol. And in this case, what we're saying is that any elements that I haven't previously set the color property four are now going to get the color black. 33. CSS Attribute Selector: next, let's look at the attributes selector. This will select any elements who haven't attributes with the matching value condition. Now the attributes selector is indicated by square brackets in this particular case were searching for an image that happens to have the altar attributes that matches the word cat . Now we can apply different value conditions to our attributes selector here, you can see if we use a care assemble it actually represents starts with. So this selector means we're searching for all links that have an H ref attributes that starts with http. So in this case, it would select this link here because it's a treff. Attributes starts with http if we used the dollar sign equals, that means ends with So here we're searching for a paragraph that has a class attributes that ends with dog. We also have star equals, which means that it contains that particular value anywhere within its attributes. So in this case, we're looking for an image that has an old attributes that contains somewhere within it the text L O V E. So here that matches this image. We also have tilde equals, Um, and this will match something that space separated. So here we're looking for a paragraph that has the class attributes with the word dog somewhere space separated inside of it. So here that will trigger in select this particular paragraph that has a class of shelter dog shots. We also have pipe equal symbol which will search and select anything with the dash separated matching value. So here we're searching for a paragraph that has a class where the value is matching dash dogs dash. So here we can see that will match this paragraph with the class of new dogs today. 34. CSS Pseudo Selector: pseudo class selectors are indicated by a colon symbol, followed by the particular event state or relationship, amongst other elements. Here you can see some examples of pseudo class selectors based on events state. So here we haven't a tag and colon link represents its default state. So these air links before they've been touched or interacted with colon visited means that a link has already been clicked on. So a user has been to our page in the past or recently and has clicked on a particular link on that page and then come back to that page. Colon hover is particularly when the mouse is over top of the link. Colon active is actually the moment where the user is clicking and holding down the mouse button over a particular link. So pseudo class selectors are allowing us then to style links based on the user interaction and what particular event state those links air in. At that given moment, we can also use pseudo class electors to select elements based on their relationship, amongst other elements. So here we're using Colon First Dash child to select the first paragraph amongst a group of paragraphs. So here you can see we have a development that's acting his apparent and then inside of it , this first paragraph, we're setting its color of the text here to blue. We also have P colon last child, which is selecting the last paragraph amongst other paragraphs. So here we're changing the color of the last paragraph here. It's a green, so you can see the middle paragraph is unaffected. However, first child is selecting only the first paragraph within a group of paragraphs, and here last child is selecting the last paragraph within a group of paragraphs. 35. CSS Inheritance: next. Let's talk about authority and inheritance now. It's quite common if you're writing a lot of CSS selectors at some point, it's possible that you'll write two different selectors that are targeting the same element . Well, what happens then? Well, if you use conflicting styles on the same element, Descendant selector overrules the I D selector, which overrules the class selector, which overrules types electors, which would overrule universal selectors. The more specific a selector is, the more authority it has. So that's really the important thing to remember. Is that the more specific your selectors being? It's going to override less specific selectors that may be written somewhere else in your coat. Now, when conflicts of equal authorities selectors arise, CSS will apply the last style that is closer to the bottom of the style sheet. This is known as the Last Man rule. It's also important to note that certain CSS properties will automatically be inherited from their parent elements. Let's take a look at a few of these different examples here. I'm using a really simple online editor called Js fiddle dot net. This is kind of like a scratch pad. It has these different frames here and in this frame you write HTML code in this frame. Over here, you write CSS code and down here in the bottom right frame, you'll actually see a preview of that result. What I've done so far is I've just created a div and inside of it, I've stock in H one and a paragraph. So here, let's show an example of inheritance. So both e h one and the paragraph are nested inside of this Div parent. So if I were to select the div using a type selector here and then if I give it the color property, the color property happens to be a property that is inherited by child elements. So if I type in blue for its value and I click the run button, I can see a preview of this code. So here you can see both the h one heading and the paragraph inherited the color blue from their Div parent. Next, let's take a look at an example of a CSS property that is not inherited. So here on the stiff, I'm going to set a border and I'll set it to be one pixels thick, a solid black line And then if I go ahead and click run, you'll see that I'm getting a border around my div. But I'm not seeing an additional border around the H one or the paragraph. In fact, if I wanted to apply a border to those elements individually, I would have to do so by selecting them directly. So here you can see that it's actually applying a separate border that's red toothy H one and a another border that's black to the Div. Now it's hard to keep track of which particular CSS properties are inherited and which are not. So your best bet is to look it up in the CSS reference. So let's open a new tab in the browser and let's type in CSS reference, and I'm going to go ahead and select this first link, which is the Mozilla Developers Network CSS reference. Now, if we scroll down under the keyword index, we can see a list of all the CSS properties from a dizzy now if we'd like to know if a particular property is inherited by its parent. So, for example, if we select font size, it will take us to a page specifically about that property. And if we scroll down to this box, it will tell us under inherited whether or not that particular style, it will be inherited. 36. CSS Authority: next, let's demonstrate CSS authority. So here I have two paragraphs with someplace filler text inserted into them. And currently the color of the text is black, which it's actually inheriting by default from the body element. Now what I'm going to do is I'm going to use the universal selector, and I'm going to essentially say that any element that I haven't previously set a color property on should now have the color yellow. And when I click run there, you can see that all the text changes to the color yellow Now this isn't very specific were basically saying any element. That doesn't happen to have the color property set now to be a little more specific. What if I use a type selector? So here I'll actually say P four paragraphs should have the color blue so you can see that the type selector overrode the universal selector because it's more specific. What if I add a class to some of these paragraphs? For example, what if we add a class of Latin and then we create a selector for latin dot Latin and we said its color two green. Instead, you can see them the first paragraph with a class of Latin has a green text, while the other paragraph that does not have a class applied is still the color blue. Let's see if we can be more specific than a class, so we could also apply an i D. Now. Whereas classes can be applied on multiple elements like this across a single page, we can only apply an i d once per page. So here, let's apply an i D to the first paragraph, and we're going to give it an idea of intro and then to select it will say hashtag intro. And here we're going to give it the color read so you can see that I D is more specific than class. And class is more specific than the type selector, and the type selector is more specific than the universal selector. So again, the way authority works is the more specific your selector statement, the more authority it will have, which means that it will overrule the other styles that are applied on the element. But you might be wondering what happens if we apply two selectors that have the same amount of specificity or, in other words, the same amount of authority. Let's create a class on this paragraph called Latin, just like we did before, and will give it a selector dot latin and set its color to green. Now I could also create another class called Dreamy, and we'll go ahead and set that to the color of fuchsia and to apply multiple classes to the same element. What you can do is you can simply click inside the value of the class attributes and put a space between each of the class name. So the space here indicates that I'm applying a class of dreamy and I'm applying a class of Latin and you can see that the class of dreamy actually one, because it's actually listed further down the page in our CSS file here. 37. CSS Comments: Lastly, we want to take a look at how to write comments and CSS just in the same way that we use comments in HTML to either disable portions of code or to write notes to ourself. We can use CSS comments by using the Ford Slash star symbol and ending with a star Ford slash. 38. CSS Color Values: in this next set of slides will cover CSS color and typography. We'll talk about the different CSS color values and CSS typography and font declarations as well is how to use your own special Web funds. First, let's talk about CSS color values in order to apply a color and CSS as a value, we can give a color name. Hexi Decimal value, an RGB or an RGB. A value. There are 147 color names, but only 16 of which are standard and work in all browsers. And those air aqua, black, blue, fuchsia, gray, lime, green, maroon, navy, olive, purple, red, silver, teal, white and yellow. Hexi Decimal gives us 16 million color possibilities. Hexi Decimal uses the hashtag symbol in the value, followed by six digits, which appear as characters from 0 to 9 and a through F zero being the least amount of a color and f being the highest amount of color. The values grouped into three pairs. The 1st 2 characters represents the color red. The 2nd 2 characters represents the color green, and the 3rd 2 characters represent the color blue. Here we have to efs in the first position, so that's the largest amount of red possible. And then we have zeros for green and blue. So hashtag ff 0000 is actually the Hexi decimal color for red. We also have RGB, an RGB a values. Now these give you millions of different color possibilities and the way it works is by using a value from the number 0 to 2 55 zero being the absence of light and 2 55 being the most saturated or the brightest amount of that particular color to set an RGB value. You type in RGB lower case, followed by parentheses and in the parentheses. You provide three separate values starting with red, then green and then blew. Now, using RGB A were also able to apply 1/4 value, which is opacity. And this is on a range from 0 to 10 being 0% opacity and one being 100% opacity. So here 0.5 is representing 50% transparency 39. CSS Typography: in CSS. It's good to know some common fund declarations that you can use the style your typography font family allows you to set the particular font family of the text, and the way it works is you provide the first fund that you would ideally like to use, and then that's followed by a comma and any other fonts that you'd like to use as a backup font. The way this works is if the user has the aerial font on their computer, it will use aerial as the font family. However, if they do not have aerial as a backup, it will use Helvetica as a secondary choice. And here, if they don't have aerial or Helvetica, it's going to use a generic san serif font. Font style allows us to set our text to be regular or italicized, and font size allows us to size the typography. So here we can use a value of percentage, EMS or pixels to size or type. We also have the font weight property, which allows us to set our font to normal, bold boulder or light or lighter. We can also set colors, as we saw in the previous slide and we can do that using color names, Hexi Decimal Values, or RGB or RGB. A values. Now there's also a shorthand property called font that allows you to set the values for many different properties. In a single declaration. The first value can be set to font style and or font wait, and that's followed by the font size and then after the slashes, followed by line height, which is the space in between two lines of text. And that's followed by the particular font family that you'd like to use. We also have some common text declarations, so text align is a property that allows you to set your text to a line to the left, the center or the right. You can also set it to justified. We can also set texts decoration to none underlined, which puts a line below your text overline, which places that line above the text and line through, which will score a line through the center of your text. We also have text in dent, which will in dent the first characters within a line of type, and that can be set to a value of either percent EMS or pixels. We also have text shadow, which allows us to offset a drop shadow onto our type. Here. The first value represents the horizontal offset. The second value here represents the vertical offset and the third value sets the spread, which is how far out from the type the drop shadow will go. The fourth value is the color, and this can be set to any valid color values such as color name, Hexi decimal or RGB. We also have text transformed property, which allows us to set to none capitalized, which will capitalize only the first letter of the sentence lower case, which will lower case all the characters and upper case which will upper case all of the characters in the line of text. Some other useful text declarations to know about our letter spacing, which is the spacing in between each letter in your type. We also have line height, which we discuss before is the space in between lines of text and a paragraph. We also have words spacing, which is the space in between individual words. We also have word wrap which will control if longer words are hyphenated so that they can be broken up across multiple lines of type. We also have white space which will control if longer lines of type within narrower elements are wrapped to multiple lines as opposed to remaining as a single line of text. 40. CSS Web Fonts: now. Previously, when we were looking at the font family property, you may have noticed that we're using common fonts there and providing a comma separated list of backup fonts in case the user doesn't have those particular fonts on their computer . Now it turns out, if we're interested in using a specialized font, we can actually rely on using Web fonts. To do this. We have to include that fund ourselves from our website, and we have to tell the CSS file to uniquely load our Web thought, as opposed to trying to load the font off of our viewers Computer. Now you can use online services like Google fonts to get free Web fonts that you can simply linked to and use. Or you can also convert fonts on your computer into Web fonts, and we'll see some examples of these coming up in the next few exercises. So in order to use that Web thought after placing your unique Web thought into your fonts folder within your parents site folder, then in your CSS you'll use the at font face command, followed by curly braces, and inside of it, we give a property of font dash family and we said its value as a string in either single or double quotes. That's going to represent the label for our particular unique Web fun. Now you can name this anything you like, since it's just ah, label that you're creating. But it's a common practice to actually name it the exact same name as the font itself. So my phone is called Scholar in this case, So we're actually naming our label for font family as scholar in single quotes. Then we provide a SRC or source property here that's pointing to a particular you earl. Where are font exists? So here I have to use the relative path. So if you're in your CSS folder, you'll have to use dot, dot, slash toe leave your CSS folder and then fonds slash two point into your fonts folder. And then you're gonna put the exact name of that particular Web fun. So make sure that you place your at font face at the top of your CSS file. And now, to use your Web font on any of your elements, you simply set the value of its font family property to that label that you had created in your at font face. So here, because I had set this label in my at font face to scholar in single quotes. I can then refer to it as scholar and single quotes down here in the value for my paragraphs font family. It's always a good idea, just in case there's any linking issues that you do provide some fall back solution. So here I'm falling back to Georgia and any generic Sarah Font if there's some sort of issue loading my custom Web fun. 41. Code Along - Part 2: This is code along exercise part too. And just like the previous code along exercise, you're going to download some starter code and then once you get it downloaded, you're gonna go ahead and double click on the zip file to extract it, and then you can move this folder anywhere you like on your computer to stay organized. You might want to place this where you place the previous code along exercise, and for me, that's in my development folder. So once you have the folder where you like it, you're going. Teoh dragged that folder to your Adam editor, and we're also going to bring up the index page here in our browser and you'll see I've added a few things. There's, Ah, second navigation this time, which is our social navigation for Instagram, Twitter and Facebook. We've also added some more products here, which you can see, and we actually linked the 1st 3 products. And now there's also a products to page. Ah, and there's also a products three page. Additionally, I also added a script tag into the head section and here we're linking to a JavaScript file called modernizer. Ah, Modernizer Js gives support for older browsers so that you can use the newest html five features and it will still work in those older browsers. Now, for this code along exercise, we'd like to style our pages using CSS. So I'm going to first create a CSS folder to house all of our CSS files. So let's go ahead and right click on our main parent folder there and select new folder, and we're gonna call this folder CSS. And then I'm going to right click on that folder in Select new File and we're gonna name this 1st 1 main dot CSS and we'll right click again and create another new file here. And we're gonna call this one typography dot CSS. Now, we'd like to link to our main dot CSS file on all of our HTML pages, so starting out here on index dot html So we're gonna go inside of our head section here, and I'm gonna create the link to our style sheet using a shortcut which is the type link and hit the tab key. And you can see that creates a link element for us with a r e l attributes which stands for relation and it's telling the browser that the relationship of this file were going toe link to your is a style sheet and then under each ref. That's where we actually point the browser to the relative path of our CSS file. So in our case right now, we're on the index page, so we have to point the browser into the CSS folder, so we'll say CSS slash and then we'll type in the name of the foul we're trying to link to , which is main dot CSS. Let's go ahead and copy this link and pasted onto the other pages will also place that in the head section here of the Contact Page and Save and will also plays it inside of the head section of the Products page and save Now. As I mentioned before, inside the Products folder, we actually created additional product pages. So let's go ahead and add the link there as well. So first we'll go to product slash one dot html and will pace that link into the head section. Now, this links gonna be slightly different because in order to provide the correct relative path, we have to tell the browser toe leave the products folder and then go into the CSS folder. So to do that, we're going to use dot, dot, slash in front of our file path here so we can go ahead and copy this particular link, and that's gonna be the same for the other product pages. So I can also place that on 22 dot html and also on three dot html. Okay, great. So now all of our HTML pages are linking to our main dot CSS style sheet now to do a quick test to make sure that they're all properly linked. One easy way to do it is simply add some style and to see if it appears so. Let's go ahead and type in body to select our body element, and I'm going to type backgrounds, and I'm going to set the background color to Aqua. Now it is important that you save all of your pages. Now let's jump back to the browser and refresh, and you can see our background color of our entire page changed from white to blue. There another way, we could have trouble shooted. This, of course, is to bring up the developer tools and click the network tab and refresh the page. Now here, you should be able to see that main dot CSS is showing that he status is successful. It should either say finished or 200. Okay, so let's go and remove this style. We don't really want a blueberry colored background. Next, I want to talk about reset files. The content of your Web page is actually going to display slightly differently in different browsers. So, for example, the default font for text in Safari might be slightly different from the default font that's used in Internet Explorer or Firefox, for that matter, To get around this issue, what we do is we linked to something called a reset file. What Reset files do are they remove all the default browser style, making everything look uniform across all the browsers and then allowing you to then go back in and add your own style, being confident that it will look the same everywhere. So let's go and start off by making a comment for ourselves, and we're gonna call this resets, and then underneath here, we're going to import in a common reset file. Now, the reset file. I'm going to use is called normalize, and you can get it by going over to your browser and opening up a new tab, and we're going to type in Cdn Js, and then we'll type in normalize, and you can go ahead and click the first result there. We'll just go ahead and grab this version of normalized here on the top so you can go over to the red copy button and you can click that, and this is copying a remote link. In fact, if you paste that link into a new browser tab, you can actually see the CSS code here that we're using. So instead of downloading this foul, we're simply going to link to it. And we're going to do that by using the at Import Command, followed by either single or double quotes. And then we're going to paste in that girl to normalize dot CSS, followed by a semicolon. That import command allows us to import other CSS style sheets into this particular one, which is main. So go ahead and save your file and then to make sure this work, let's jump back to the browser and you can close out those normalized tabs there and let's bring up the developer tools for our website and under the network tab, we're going to refresh the page. Great. So you can see here that normalized that CSS is successfully loading Now. You may have also noticed that our typography changed from a Serra font to a sand Sarah font another. We can be sure that all of our content is going to appear exactly the same in different browsers. We could move on to writing our own custom style sheets. So I'm going to make another comment here, and we're going to right custom style. And here we're going to import in our typography dot CSS file so we'll use another at import, and here we can just give it the relative path to the file. Since both main and typography are inside of the same CSS folder here, we can just simply provide the name of the file typography dot CSS. Then let's save main dot CSS and let's jump over to typography dot CSS. So here we'd like to set a font family across all of our text elements, since all of our text elements such as headings and paragraphs, etcetera, are all inside of the body element. In other words, they all share the body as a common parent. And because the font family property is inherited, that means that if we set a font family on the body element, it will be applied across all of our other text elements. So we're using a type selector here where we select the body element, which will be this one here. And then inside, the curly braces were going to use the font family property, and we're going to set it to Helvetica. So this is gonna check for Helvetica on the site visitors computer. And if they don't have Helvetica, we can put a comma and put a fallback fonts. So I'm gonna say San Serif, which will use any generic sans serif font, and we'll go ahead and save that. And if we come back to our browser, we can close out the developer tools and we can refresh the page so you can see the font actually changed. For example, if we control, click and inspect element on our heading Ah, here. This isn't each to on the index page. You can see over here in the right side of the developer Tools and the Elements panel. There's a little styles panel, and we can see all of the CSS styles that are being applied to this particular selected element here, which is the H two. So in this case, you can see inherited from the body. We're getting the font family of Helvetica now on the product's pages for an individual products. We have this bulleted list here that tells the futures about the product, and these lists are actually ul elements, which stands for Anno ordered list. So I'd like to write some CSS to style these list items now. So jumping back over to typography dot CSS. We're going to select all the one ordered list on our website by saying you l and then we're going. Teoh set its list style to square, and that's going to change these little circles here into squares instead, additionally, will set the font size to 0.9 m one. M represents the width of the letter M in that particular font. Now in the browser, one em is equal to 16 pixels. So in order to calculate the actual pixel size there, we can jump over to our calculator. We can take 16 pixels and multiply it by RM size, which is 0.9, and we can see that this is actually setting it to 14 pixels. Additionally, we'd like to adjust the letter spacing and we're going to set that to 0.5 m. So let's go in and save and refresh and you can see the text and the letter spacing changed a bit there on our futures list. Next, we'd like to style this address that's found here inside of the footer element. So to do that, we're gonna use another type selector and we'll say address. And what will set on this address is will change its font size. Ah, and this one will set to a percentage. So we'll say 80% and here will set its font style to a talic. Okay, that looks good. Next, let's go ahead and set the color for all of the links on our website. So select all the links. We're gonna use a as a type selector there to select all those a tags and we'll go ahead and set its color of property and here we're going to use RGB and we're going to paste in its value now. I happen to write these down ahead of time, so I know the numbers are 79 104 and 1 40 But you might be wondering, How did I come up with these particular numbers? Well, there's a couple of ways that you can find out an RGB value one way is to use the built in tools inside of your operating system. On Mac, you have something called digital Color meter, which you can actually search for under spotlight. And this will tell you the RGB values over any pixel that you hover your mouse pointer over . So, for example, if I hover my mouse pointer here over this lime colored bicycle, you can see that that's actually the RGB values to 18 to 46 94. In order to copy those values, Aiken do command shift see, and then I can simply pace those values into my CSS. Now, another way that you can plan out colors for your website are to use online tools. For example, if you go to color dot adobe dot com, this will give you a simple color wheel that you can use to play with different color values. For example, if we click on the central color here, which is kind of a mustard yellow, we can then change the color rule, and here you can change the relationship between these colors. Then, by dragging and moving the color around the color wheel, you can actually change the relationship of the other colors around it. We can also find tune using these RGB sliders here and you can see down here at the bottom . It's actually showing me the RGB values and also the Hexi decimal values that I can use for this particular color. Aside from setting the color on this fun, let's also set the text decoration to none. Additionally, we want to add a transition so that when we hover over our links, it will actually fade from one color to another. To do this, we're gonna use the CSS three transition property, and we're gonna tell it that we want to set a transition on our color changes, and we wanted to take one second now in order to control the color. When we actually hover the mouse over, we have to use a pseudo class selector. So in this case, we say a then colon and then the particular event state we're trying to select in this case hover now here under hover. The only thing we want to change is the color. So here will go ahead and say color and we're gonna set this one. Teoh rgb 1 28 1 69 and 1 59 Let's go ahead and save our typography dot CSS file, jump back to the browser and refresh. So now when we hover over our links, we can see that color fading in, and it's the same here for are heading at the top of the screen as well. Next, on our first link here, which is the name of our company Geo cycle, we want to actually style that one different now. The way we're going to do that is we're going to give it a unique identity. So here will go into our index dot html page and we'll go to that a tag and here we're going to give it an I D attributes and said its value equal to logo. And then we'll go ahead and save this page and then we'll come back to our typography dot CSS file. And in order to select the idea of logo, we have to use a hashtag symbol. So we say Hashtag logo, and we're going to set its font weight property to Boulder. We'll go ahead and save that, and we'll refresh on the index page there. Now you can see that the Link Geo cycle is in fact, thicker than products and contact and our instagram, Twitter and Facebook links. Now, to see both our HTML and CSS code side by side, we can make the editor take up the full browser. And if you go over to view pains and you say split right, it will actually split the screen into two and weaken drag our HTML page to the other side of the pain. And what you can see is that this a tag with the idea of logo was selected by this selector here that says, hashtag logo. I'll go ahead and move the other pages over to the other side. Since we have the same content in our navigation on all the other pages, I'm going to copy the I D attributes, and we're going to paste it onto each of the other pages. Next, let's jump over to our products page, and we're going to scroll down to the first paragraph that's just under her eye frame video . And that should be on approximately Line 36 in your coat. And here we'd like to give this particular paragraph a class of caption. Now we can go ahead and save that, and we'll jump back over to typography dot CSS and to select a class, we use the dot symbol so here will save dot caption and for captions will set the text alignment to write. We'll also said its color to a Hexi decimal value hashtag eight. Here, the Hexi Decimal Value 888 is actually standing in for the hacks. A decimal value with 6/8. The way this works is the 1st 8 stands for the 1st 2 values, and the 2nd 8 stands for the 2nd 2 values, and the 3rd 8 stands for the 3rd 2 values. The only time that you can do the shorthand method is if the 1st 2 second, two and 3rd 2 values are matching. For example, if I had the Hexi decimal value, F F a a 33 This could be shorthand to hash tag F a three, however, if I had a hexi decimal value that did not have matching digits across all three of the pairs. For example, if I had FF eight a. D. F. This is an example of a Hexi decimal value that does not have the same value for each of the three pairs, and thus I'm not able to shorthand it into three characters. Let's also set the font size, and here I'm going to set the font size to 0.9 m. Let's jump back to the browser and refresh, and here you can see the caption under the video has changed to a lighter grey and is now text aligning to the right side of the screen. So in our main section, starting with our featured section and continuing on, we have a Siris of age twos. Now each of these age twos, I want them to be stalled a little bit differently than other age twos on our website and because I want to apply this style to multiple H two's on the same page, and I d wouldn't really be appropriate. So here We're also going to use a class, and we're going to set the class here to headline And I'm going to copy this class attributes and value, and I'm going to pace it onto some of these other age twos here, such as catalogue and also under gear in apparel to sell. That class will go ahead and say dot headline and we'll set its color property to white using the color name Will also said its text stash shadow. And here the first value is a horizontal offset will say zero pixels so it doesn't shift off to the left or the right, and then, for the second value will say two pixels for the vertical offsets. So this shadows going to drop two pixels below the text and then, for the third value, will set the spread to four pixels so it will fade out across four pixels of space below the text and will set its color as the fourth value here to black. Next will set its text align to align to the right, and we'll also set. It's fun. Wait here to Boulder so it's good and save that and jump back to the browser and we'll click on the products page there and you can see our headings here are appearing. On the right hand side of the page for are featured picks, all bicycles and gear and apparel. Next will supply classes, too. Are quote here inside of the products dot html page. So here I have two spans inside of the same paragraph and actually want a style. This text. It's enclosing the first ban a little bit differently from the texts in the next ban here. So the first span isn't is a quote, so I'm gonna give this guy a class of quote and then the next ban in the opening span tag here. We're going to give this one a class of author. Then let's jump back over to typography dot CSS and let's right to new class selectors here . So the 1st 1 is going to be called dot quote here. We're going to set the font family to a particular Web fund, so let's jump over to a browser, and the way they were going to do at this time is we're going to use Google fonts, so let's go to google dot com slash fonts and here under the font family shown we're going to do a search for Libera L I R B R e and we're gonna choose the 1st 1 here, which is called Liberal Baskerville. Then we're going to click on this button here that looks like a square with an arrow that says quick use. Now, here you can choose the particular styles that you want. For this fun, I'm gonna select both normal normal metallic as well as bold. And then we're going to scroll down. We're gonna leave. Step two is a default, which is Latin. We're gonna scroll down to step three where we can add our code to our website. Now there's different ways that you can add this font to your particular site. You can either use a link tag in your head section or you can use JavaScript or in our case , we're going to click the center tab here and use the at import method. So we'll go ahead and highlight that coat and copy it, and we're going to jump back over two main dot CSS now, Whenever use Web fonts, it's important that you always load them at the very top of your style sheets before you load any other style sheets. So here will write a comment at the top of our page, and we're going to say fonts, and then we'll go ahead and paste in that code. So here we're using the at Import Command to remotely link to the Google Font Libera Baskerville so we can save our main dot CSS file there. And if we jump back to the browser and step for it shows us how we can integrate this into our CSS code. So on any element, we'd like to apply this to weaken. Simply copy this font family declaration. So let's go ahead and copy that. And let's jump back over to typography dot CSS. So here, for our quote class, we actually want to paste in this font family declaration, which is asking to use the font Libera Baskerville in single quotes and then as a fallback . If it has a trouble linking to this particular Google font, it's going to use any generic Serra font there. So let's go out and save our typography dot CSS. Make sure you also save your main dot CSS and then jump back to your browser We can close out the Google Fonts tab for now, and let's scroll up to the top of our products page and refresh the page so you can see there that now we're getting that special liberal Baskerville font here for our quote, jumping back to typography dot CSS. Let's also adjust the font size and here will set the font of our quotes to be 1.6 m. We'll make it a little bit larger there, and we'll also set its color to a great color here, using the Hexi Decimal Value hashtag 999 Now, before and after our quote, we actually want to use fancy looking quote marks. Now, if you jumped your browser and you open up a new tab there and you type in html, ask you characters and in this case we want to use it via a method called the CSS content property. So I'm gonna also type content there now, the second link that says glitch CSS tricks. We can go ahead and click on that and this is going to bring up a table of special characters. So I'm gonna hit command F to bring up a search that would be control f on Windows and I'm going Teoh type in double quotation. And here you can see the fancy curled double quotation marks that we want for the left opening quote and the closing quote there, and you can see that the way you can do that is by setting this content property to this particular code, which is back slash to a one C To do the left quote and to do the ending quote or the right quote. Here we do back slash to a one D, so we'll jump back over to typography dot CSS. And we're going to say dot quote colon before and we want to set before the content this special character, which is back slash 201 c and that's going to give me that fancy curled left quote now, Additionally, after are quote text, we also want to add in that character, which is back slash 201 d. So here we're using the colon before and colon after pseudo class selector and we're setting content to appear before our quote content and after are quote content. So if we go out and save this code and we jump back over to the browser and we can close out this last year from CSS tricks. And then if we refresh the page, you can see Now we're getting those special fancy quotes here on the left. And right now, the nice thing about using the special selectors here are that any time I want to make a quote on any of my pages, I don't have to worry about actually typing the quote marks. I can simply type the quote itself and enclose it in a span with the class of quote, and it will automatically make it The correct Web font will make it the correct color size . And also add the starting and ending fancy quotes on the beginning and ending of that content. Similarly, we'd like to style the author of The Quote Here, which is, in this case, James E. Stars. So let's go and write some class selectors for those as well. So here will say dot author And then we'll go ahead and set its color to hashtag 888 and will also set its font size to 0.8 a m. Now, before the content of the author, we'd actually like to create a special character, which is called an Em dash, which is kind of like a longer dash or longer hyphen, and I've already gone ahead and looked up that code, which is back slash 2014 So go ahead and save that. And if we come back to the page here and refresh, you can see that special character, which is an em dash appearing there and you can see the style taking hold of our author. Next. I'd like to add some icons into our website, For example, we'd like to change the word Instagram, Twitter and Facebook to their respective icons. We'd also like to place an icon of the gear in between the words geo and cycle for a logo at the top. We'd also like to add an icon of a telephone before are telephone number here in the Footer , and we'd like to add the icon of an envelope here before email address in the footer as well. There's a lot of different ways you can implement icons. For example, you could add a small image, but a preferred way of doing it, which I'm going to show you is using a font because this is going to be sharp on any size because we're actually using a text character as the icon, as opposed to an image which can pixelated. And we're also going to get really fast loading times because we're not having to load an image in whereas fonts load much faster. Now, the way we're going to do that is using a free library online called Font. Awesome. So to get fun, Awesome, you can open up a new tab in your browser and you can type find awesome, and we're going to select the first link in the search. And here, if you click the link under getting started, it gives you the instructions of how to use this particular font library. So here you can see you can load font awesome remotely from a cdn. You can also download it and linked to it directly within your HTML pages, and we're actually gonna use this first method which is linking to it from a cdn. So to do that, let's open up a new tab and we're going to type in Max Cdn space found awesome, and we're going to click the first result, which is font awesome Bootstrap Cdn by Max Cdn. And then here's the link to the unified CSS file. You're gonna go ahead and click on that link and copy it and then jump back over to Adam and here at the top of your main dot CSS file will go ahead and import in the font Awesome CSS style sheet. So here will type at import and then will you single quotes and will paste in the URL to the font awesome dot CSS file and end with a semi colon There. Now, you may have noticed that they're slightly different formatting between these two at imports. So when we copied in our Google funds at import, it included a your l and parentheses here, and all of our other at imports are just simply using single quotes surrounding that linked . You are all there. So both of these air completely valid. CSS. But if you'd like to keep things consistent here, what you can do is you can delete the URL, open Prentice E and replace that with a single quote, and then you can scroll to the end of the you are all there and remove the closing parentheses and replace that with unending single quote. So that makes all of our at imports uniform there, and we can go ahead and save the main dot CSS file. So the next thing we want to do is actually insert those icons into our HTML code. To do that, you can look up the particular code for each icon back at the font Awesome website to see a list of all the icons you can select, the icons link at the top, navigation at fun, awesome dot io and at the top here there's a search where you can actually search the icons . The first icon. We're going to search for its called Instagram, and you can see that brings up this icon here. And if you select, it shows you a preview of what that icon will look like. And it gives you the code that you can copy and paste. So let's go ahead and copy this code and let's jump back over to Adam and we're on the products. That html page here. I'm just going to go down to where it says Instagram, and I'm going to replace that with an icon element for the Instagram icon instead, so you can see that this icon is made up of this I element, which stands for icon. And it has a class of F A and then a space and f a dash instagram. Now, for all of the fun, awesome icons, the only difference between the icons is this class name here, which is F a dash and the name of the icon itself. So we can actually reuse this code for the other two icons here in our social navigation. And then we'll just change the class name 2.2 the particular icon were after. So in this case, we want to load F a dash, Twitter dash square and again, I've looked these up ahead of time over at the font awesome dot io website and then for Facebook. We can replace that with an icon that's pointing to the class F A dash Facebook dash square . Next we want to place an icon. You're in between the words geo and cycle so well paced in our icon code there and will change the class name for this particular icon to f a dash cog. And that's going to give me the gear icon. Additionally, in the footer at the bottom of the page here, we'd like to place a phone icon just before are telephone number here so we can paste in our icon code and change the class name to F A dash phone and then, before our email address will paste in that icon code and change the F A class name to F a dash envelope. So let's go ahead and save our products page and jump back to the browser and we can close out the tabs for bootstrap and fun. Awesome! And then we're going to go back here and refresh the products page. Great so we can see my cog or gear icon is appearing here inside of the logo in the main navigation we can see. Our Instagram, Twitter and Facebook icons are also appearing there, and if we scroll down to the footer, we can see that our phone icon an envelope baikonur also appearing there. Next, we just need to add this icon code to all of our other HTML pages. So an easy way to do that is simply just a copy and paste it. In the case of the footer. We can just replace this paragraph for each of the footers on every page, so I'll go ahead and copy this paragraph here with my two telephone and envelope icons inside of it, and we'll jump over to the contact page and replace that in the footer as well. I will also add it to our individual products pages. And don't forget to save each page as you go, all right. And then for the header at the top. We had actually changed the icon here inside of the first link in the first navigation, which is our main never. And then we changed. All of the links is icons here on our secondary navigation. Now, one easy way to correct this on all the other pages is simply just grabbed the entire header element with all of the code inside of it, and we'll go and copy that, and we'll just change it up on every page so I can jump over to contact and just replace the entire header there. And we'll also do that on the index page and then on the individual product pages as well. Now, one thing that will be different here are my relative path links. Since I'm replacing this header on the individual product pages that are inside of my product folder. I have to go back and add the dot, dot, slash on the beginning of each of my links here, and then Aiken re copy this header to use it on the other individual products pages. Now we'll just go ahead and paste that in to update it. And one last filed to do this in and we can save. So all my pages have been updated there. We can jump back over to the browser and refresh, and I contested. This works by just switching to my other pages and making sure that my icons air appearing there. Okay, so it's looking good. 42. CSS Validation: next, let's discuss CSS validation. We can jump back to our code, and I'm gonna head into my typography dot CSS file. And, let's say, for instance, that something wasn't working properly on my alignment of my text for my headline class. So let's say, for example, that the end in a line was spelled with an M, which is just one key over on the keyboard, a really simple mistake anyone could make. Uh, And then when we checked out our code in the browser on the products page, we noticed that our text align right was not working for our age two's with that class of headline. Now, if we weren't able to immediately spot the typo and our code, one thing you can do is you can validate your code eso. To do that, we can select all I'm using Command A on Mac, or you could do control a on Windows and then I'm going to copy all the code command, see on Mac or Control, see on Windows and will jump over to our browser, and we're going to do a search for CSS validator and we're going to choose the first link, which is the W three seed CSS validation service. And then we'll select the third tab by direct input. And here you can paste in your code. So I'll do command V on Mac or that's Control V on windows. And here you can see I pasted in the entirety of that CSS, and then you can go ahead and click the check button here at the bottom. So it looks like they did find an error in our code, and it's showing us online 39 of our file. It's saying that in the dot headline class, the property text a lime with an M does not exist. So now we know we need to head over to line 39 in our code. And if we come back here and scroll down to line 39 so here we can see that this isn't indeed the issue, we can put an end there and save our code. And if you want to re check to make sure there's no other errors, we can go back and repast in our code here and recheck it. And whenever you see congratulations, no errors found, you're in good standing. That means all of your code passed course, then this would also fix the issue in the browser where our tax will now line to the right properly, so CSS validation can be quite useful. 43. Developer Tools - Part 2: Additionally, let's also look at using the developer tools to help us debug issues with CSS. So I'm going to create another sort of arbitrary case here where you might run into a problem. And here will say that we want h twos to have the text color read and we'll go ahead and save this and come back to our browser and refresh. Now, this is indeed in each to which I can see by inspecting the element. So if I right click on it with the mouse and select inspect, that will bring up my developer tools and here we can see that this is indeed and each two element there. But I'm not seeing that color of red. So I should have been seeing this color red here on all age twos. Well, why isn't that working? Well, if I come over here to the style panel which is on the right hand side, we can see all the CSS. It's being applied to this h two. So here you can see that the color red is actually crossed out. So whenever you see a property crossed out like this, what it's telling you is that this particular CSS rule is being overridden somewhere else down this case, we could see that it's actually being overridden by the color of white here on this class selector. So remember classes more specific than a general type selector. So here the color is actually overriding it on the class. Now, here, inside of the style panel, you can do a number of things. You can actually change the colors of things. For example, if I click on the little color square here, I can preview different colors on my text to see how it looks. Um, I can also, you know, a just value. So, for example, I'm here under Tex shadow the 1st 2 values air setting, the horizontal and vertical offset of the shadow. And perhaps I want to see what it looks like if the shadow is dropping even further off the text. So to do that, I can just double click on the second value. Here is the vertical offset, and I can use the up arrow and the down arrow to actually increase or decrease that pixel amount. So here I'm increasing it, and you can see the shadows dropping even further away from the text or closer to the text if I hit the down arrow. In fact, I keep hitting the down there and we go into negative values. You can see the shadow actually moves above the text. We can also add additional CSS rules by clicking after the last CSS rule inside of the selector and weaken type in our own properties here. So, for example, if I wanted to set font style on this element, I can type in font style. And then after the colon, I can type in metallic to see how that will look on my tax. And you can see it's showing me a preview up here. So remember the developer tools or just giving us a visual preview of these changes? It's not actually altering the true CSS file. In order to a Justice CSS file. We have to go into that particular file and add these changes ourself. Eso. If I wanted to do that, the developer tools air showing me that this code here that I'm adjusting is in the typography dot CSS file online 40. And then again, if I don't like the changes, I could just refresh the page and will go back to normal 44. CSS Box Model: in this next set of slides will discuss the CSS box model will discuss sizing elements using CSS will talk about differently out types, content, overflow and also element display. The CIA says Box Model is a concept that defines each HTML element as its own box, and it gives us the properties patting margin and border to control the spacing inside outside of the element and to draw a line on the edge or the wall of each box element. Here we can see a diagram of the CSS box model, and you can see that here is the edge of the element, and inside of it we have padding, so patting is just invisible space that keeps the content of your element. For example, if you had text inside of this element, the padding would keep the content space away from the wall of the element Here. Now we also have a border, and the border creates a line or a stroke around the outside wall of the element. And then, outside of that, we have margin, which is spacing between the outside edge of the element and other elements that are in the page. So margin is this invisible spacing between elements or, in other words, spacing that's outside of the element. And then we have padding, which is spacing inside of the element. We have border and were able to set values independently on each side of our element for these properties, margin, border and padding. To better illustrate the box model I've created to developments here, and I've written I'm a box inside of them in order to see the invisible box that makes up in Element. One easy way is to simply give that element of background color. So if I use the CSS background property and here I'll go ahead and set this to Aqua, we can now see the box making up these two particular elements. Now we can size boxes using within height properties, and here I'm going to set thes dibs to have the width of 100 pixels and a height of 100 pixels as well. In order to see the edge or the outer wall of these boxes, we can use the border property so here will just say border and we'll set it to one pixel thick and next we can specify the style of the border. And here, I'll say, dashed to make a dash line around the outer edge of the box. And then we'll go ahead and set the border color to black. No, we can clearly see these two dibs defined as two different boxes. Now the box model also gives us the properties, padding and margin. So let's first add some padding. Patting is the spacing inside of the element. So if I said it's padding here to 20 pixels, it gives me 20 pixels of spacing between the content, which is the text. I'm a box and the edge of the border here now to add spacing outside of an element, we can use the margin property. So here, if we say margin 20 pixels, it will space these elements 20 pixels out from the edge of our frame here and also 20 pixels away from each other, so you can actually see that margins overlap. This box on the bottom has 20 pixels of margin above it, and this box on the top has 20 pixels of margin below it. And those two margins overlap so that the total distance between these two elements is still only 20 pixels So again, padding is the spacing inside of the element we can see here. Margin is a spacing outside of the element which we can see here and here, and border is the line that we create here on the edge of the element. Now, padding and margin give us multiple properties we can use to set the padding and margin for different sides of our element. For example, patting dash top will only set padding on the top edge of the element. We can also say padding, dash left or patting dash right to set the padding on the right edge of the element, and we also have patting dash bottom. Now all of these properties are also available for margin in that we have margin dash, top margin, dash, left margin, dash right and margin. Dash bottom. Now, if we use the shorthand property of just padding or margin, we can also provide multiple values to specify which side of the element that we're trying to apply that padding or margin to. For example, if we use a single value, it will apply that value on all four sides of our element. So here, when I set the padding to 20 pixels. It's giving me 20 pixels of padding on all four sides, the top left and right as well as the bottom. Now, if I give it to values, for example, if I set this to 20 pixels, 30 pixels, the first value is representing the top and bottom of the element, and the second value 30 pixels is representing the left and right padding of the element. Now, if I give it three values, the first value is representing the top of the element. The second value, 30 pixels, is now representing both the left and the right, and the third value 40 pixels in this case is representing the bottom of the element. Lastly, we can also provide four values to remember which side each value effects with four values . Remember the clock. We start at 12 o'clock and the first value represents the top spacing. The second value represents the right spacing, and the third value represents the bottom spacing, and the fourth value represents the left spacing. So these values go around clockwise top right bottom and left and again weaken. Set multiple values here for margin is well 45. CSS Box Sizing: now, what further complicates things is that there are actually two different box models. So the W three C box model, which is adopted by safari, Firefox and chrome, dictates that whenever we set a width or height to an element, were actually setting the width or height of the content area, and that any padding, border or margin that we add onto the element is considered additional with or additional height onto that particular element. Now Internet Explorer decided to go in a different direction with its box model whenever you set the width or height on an element that's loaded in Internet Explorer, that, with their height is automatically including border padding as well as the content area, and only margin is considered additional, adding on to the width or height of the element. As you could imagine, having two different box models can actually make your element appear to different sizes in different browsers. One thing that we can do to correct this issue is in CSS three. We have the box sizing property, and here we can actually tell all browsers to use either one or the other box model. So, in order to tell all browsers to use the I E box model. We can simply set the box sizing property on any particular element to border dash box. And this means that it will start measuring that with their height that we set on the element from the edge of the border. Or, conversely, we can actually tell all browsers to use the W three C box model by setting the box sizing property to the value of content dash box. That means that it will only measure the width or height of the element at the content area , and that padding border and margin will be additional extra value that we have to calculate onto the width or height to better illustrate the two different box models and their differences. Let's go ahead and give a separate box model to each of these dibs. So the first of here I'm going to give it a class equal to use content box and the second, if we're going to give it a class set to use border box now, the W three C box model will be demonstrated using our class use content box and here to set all browsers to use the W three c box model. We simply do that by setting the box dash sizing property to content Dash box. Now contrast ing that we can also set up the I E. Box model. And for that we're going to use the class we created called Used Border Box. Now to set the sizing for this particular element to use the i E box model, we simply said it's box sizing property two Border dash box. Now, when we apply these two classes to the elements here, you can see that the second box model that's using border box sizing or, in other words, the I E box model is actually peering a bit smaller than the div on top. That's using the content box or the W three c box model. The reason why is here on both dibs. We've set the width toe 100 pixels, but we also have a certain amount of border padding and margin. So on the top box when we set the width 2 100 pixels because it's using the W three C box model, the 100 pixels is only this content area here. Now we also have to add on to that 20 pixels of padding on the left and right, so that makes it 140 pixels wide. Here and then, we also have to add on the border as additional. So that's one pixel there in one pixel there. So now at 142 pixels and then we also have to include the margin that we've added on the outside edge of the element, which is another 20 pixels on each side. So that makes it 182 pixels wide. Now contrast ing that the I E box model that's 100 pixels from the edge of the border to the other edge of the border. So from here to here is 100 pixels now, including the margin onto that. That's only 20 pixels on each side, so this particular element is only 140 pixels wide. So the bottom element here, using the I E box model, is only taking up 140 pixels of space on the screen here, including its margin. Whereas the top box it's using the W three C box model is taking up 182 pixels of screen space. Now it's really up to you which box model you prefer to use. This is one of the rare cases where I actually side with Microsoft, and I actually enjoy using the Internet Explorer box model by setting my box sizing to border box. The reason why is one on building page layouts, which will see an upcoming lectures. It makes it a lot easier to do the math if you're measuring the width of the element from the edge of the borders. 46. CSS Layout Types: next, we'll talk about the different layout types that you can create by sizing your elements based off of pixels EMS percent or by using Min and Max sizing properties. Fixed layouts use pixels to size your elements. Some of the advantages of sizing or elements with pixels are that their wits air going to definitely be the same on all screens, large and small, so there's no surprises there. But one of the disadvantages of using pixels to size your elements is that it may create excessive white space for users with larger screens. If you've size your elements to a smaller with their height and also on smaller screen resolutions, the browser may require horizontal or vertical scroll bars, depending on the size of the elements. So if you have an element that's larger than the size of the screen and pixels, then you're actually going to get a scroll bar there in the browser. We also have elastic layouts that use EMS, which is the typographic unit sizing. One of the advantages to using EMS is that if you're building a responsive design whenever you upscale or downscale the text, it will keep the elements surrounding the tax in proportion. One of the disadvantages, however, is that it takes a lot of testing in order to build a layout that will work on many different size devices. Some of the things that can happen is that, unexpectedly, an element might start to overlap another element as it expands or shrinks in size. Now we can also size layouts using percents, which is a fluidly out. One of the advantages of a fluid layout is that it does make full use of the screen space and can eliminate horizontal scroll bars on smaller screens. However, one of the disadvantages is that designers have less control over what the user seeing with regards to text or media wrapping onto the next line whenever you're sizing or scaling an element larger or smaller at a fluid size, we also have men with and Max, with properties as well as men, height and max height properties thes will allow content to shrink or expand and then have stopping points where they won't go beyond a certain size. So here I've created a div. Ah, and here I've given it a class of fixed dash size, so this Dave is being affected by these two selectors here. It's being affected by this DIV because it's a development, and it's also being affected by this class here of fixed size. So all dibs here in my layout are going to have a background color of aqua so that we can see them easily. And they each have 20 pixels of padding, which is the spacing inside of the element. They also have 10 pixels of margin, which is the spacing outside of the element, and they also have their font size set to one M. Now the class of fixed size is setting a width on this div 2 200 pixels. So a fixed layout uses pixels as a measurement, and you'll see that when I change the size of the frame that this preview is in here. It's always staying the same size. Now, if I squish the frame so that it's even smaller than 200 pixels, which pushes this element off the screen, you can see we get a little scroll bar here at the bottom of the screen that we have Teoh scroll over to see the rest of the elements. So that's really the only disadvantage to sizing something with pixels. Let's take a look at another example, so underneath are fixed. Example. I have another example that has the class of elastic size, and you can see that the only difference, really, is that for the class of elastic size, I'm setting the within EMS. And remember, in M is the typographic unit. It's related to the size of the letter M and typography, and in the browser one M is equal to 16 pixels by default. So if we multiply 12.5 by 16 it actually turns out that this 12.5 m with is the equivalent of 200 pixels. So we just did some simple math there to figure that out. And I've wrote that in the comment here as a little guide for you on a first look, EMS appear to behave similarly. Two pixels in that If I set an element to 200 pixels or I set an element to 12.5 m, they appear to have the same with their and just as the same as before. If I squish the browser in, I still get a scroll bar or have to scroll over to see the element. Now where m start to differ from pixels is when we actually change the size of the typography across the entire site. So remember, certain properties and CSS are inherited by their parent elements, and in the case of fonts, font size is one of them. They can see here that for the body I have the font size set to 100% which is the default now. Interestingly enough, if I upscale this, for example, if I change it to 200% which is twice as large, you'll notice that the typography in both of the dibs got larger. And in addition to that, the pixel with state exactly the same size of 200 pixels. However, the elastic element here that I sized using EMS actually doubled in size. So you can see that this container that I've size with EMS is also scaling just the same as the typography here, which also a sized in EMS. So the advantage being that all of your containers air going to scale with the typography on a responsive site. However, this can cause issues, especially if you had, for example, column structure side by side that you were sizing with EMS. At some point, you might start to see these elements overlap each other. So it does take a lot more consideration and care when you're designing a layout with EMS. For me, particularly, I typically stick to using pixels or percents for sizing. And I like to reserve EMS for typography only. But I wanted to show you this just in case because you might see people using EMS toe actually size elements out in the wild. I'm gonna go and set that font size on the body back to 100%. So if I uncommon out there's third. If here you can see this one has a class of fluid size. So here, fluid sizes being sized using our percentage instead. So here we set the with 2 70%. Now, one difference you're going to notice is that when I resize this frame, it's always taking up 70% of the visible area inside of this frame. In fact, it can even get smaller and you'll notice that we never really get scroll bars for that fluid element were only getting scroll bars for the fixed element and the elastic element above so percents always take up ah, percentage of the parent element that that element is inside of. Or if there is no parent element, then they just take up a percentage of that browser screen. Next, let's move on to using Min and Max values. So here. Willen COMMENT The fourth day of here, and this one has a class of threshold dash size, which you can see I've given to actual with values. Here, here, we're using Min Dash with and Max Dash with, and there's also available to U Minh Dash Height and Max Dash height if you choose Now these you can give a value of pixels, ems of percent, whatever you like. But the main difference here is that this gives the element the ability to shrink and stop shrinking at the minimum with and gives it the ability also to expand and keep expanding until it reaches that maximum with. So let's take a look at that. So here, if we open the browser up wider, you can see it's no longer growing. Um, here it is, stopping at exactly 900 pixels and size, and then if we start to scale down the screen it's going to shrink and shrink and shrink until right here, where it starts to go off the screen when it becomes 500 pixels. And here we also get a scroll bar whenever the screen size is smaller than the men with value here. 47. CSS Overflow: now is research of size, the width and height of our elements. You may get to a situation where your content is actually larger than the size of the element. Now, fortunately, we have the CSS overflow property that allows us to control the way content overlaps or is contained within our element. So here, if we set overflow to visible, it will simply let the content overflow outside of the elements. So in this case, we have a paragraph here that has a yellow background color that's overflowing outside of a div that has a blue background color here. Now this is the default for most elements. You're going to get an overflow of visible. We can also have a value of hidden. So here you're seeing that the paragraph is getting truncated or chopped off the bottom of the element here. And we're not able to see the last two lines of the paragraph because it's hidden. Um, and this sort of troops, the parent element as like a window or a frame that sort of cropping the content that's inside of it. We can also set it to a value of scroll or auto auto will create a scroll bar if necessary . If the content is taller than the element and scroll will just simply always show a scroll bar appearing there. We have three dibs here. This def has a class of Hyde content. This dip has a class of scroll content, and this div has a class of visible content and they each identically have two paragraphs nested inside of them. So here you can see this first Div that has the class of Hyde content has its overflow property set to hidden. And here you can see that that content is being truncated here. Now, the second element here with the class of scroll content, has its overflow property. Set the scroll, and here you can see a scroll bars present and we can actually scroll up and down. Lastly, we have the default setting here for dibs, which is overflow visible. And here you can see, the content is actually sticking out beyond the confines of the element 48. CSS Display: next, we'll talk about the display property that controls the way elements will display in the browser. So by default in the browser, all elements particularly display a certain way. And there's different rules based off of the type of display that an element has things like headings and paragraphs and gives by default in the browser display block block level elements always stacked vertically. Block level elements can also have a width and the height applied to them, and they can also have margin set on all sides of the element. Additionally, other elements, such as links or images or spans, display in line in line level. Elements cannot have a wit set on them, meaning that if you give them a with property and set of value, it will simply ignore it. And the reason why is it in line level elements are only as wide as the content inside of them. Inland level elements also are not able to be given a top in a bottom margin. So again, inland level elements such as images, links and spans appear side by side and do not accept the width or top and bottom margins. Now, in contrast to that elements like headings, paragraphs and developments display block, which means that they display one on top of the other. They take up the entire line, so by default they get a width of 100%. They're also able to specify a width so you can actually apply or set a particular with onto a block level element, unlike an in line element, and they're also able tohave top and bottom margins, unlike in line elements. The reasoning for this is that we need block level elements to behave like Rose, that stack one on top of the other. And we need in line level elements so that we can have elements within our layout that do not disrupt a line of text. For example, if you wanted to have an image in the middle of a line of text, since images are an in line level element by default, you can simply stick an image element there in the middle of a paragraph, and it will not disrupt the space around it, whereas the paragraph itself displays block, meaning that if you have two paragraphs, they're going to stack vertically, giving the visual appearance that we expect now Additionally, we have elements that display in line block. Elements that display in line block are almost like the offspring of an in line in a block level element in that they carry some of the behavior of each. So for one, in line, block elements will display side by side, much like an in line element. But they also allow top and bottom margins and a with to be specified on them, much like a black level element. Now, as I mentioned, all elements display one way or the other. By default, however, we can actually change the way an element displays by explicitly setting its display property with these values in line, block or in line block. Now, in addition to these display values, you can also set things to display table, cell table, table row, etcetera. But for now, we're just going to talk about these three here we have created to dibs and two spans. So by default, are dibs display block. So they're naturally just stacking one on top of the other, and you can see that they're also by default when there's no wit set on them. They're also taking up just 100% of the screen there for a block level element, its height is determined by the height of its content. So here we have this text, as well as 25 pixels of padding inside, which is setting the height on this element. So when no height is specified there simply just going to be as tall as the content itself . Now, underneath the dibs, I created two spans here, and these ones you can see are displaying side by side automatically. That's because spans display in line by default, and additionally, you can see that there are only as wide as the content. So again, a difference there is that block level elements try to take up all of the horizontal space . They're very greedy with the horizontal space there, whereas the spans here, which are in line level elements, are going toe only be as wide as their content. So they're appearing very tight next to each other here. Now, additionally, you'll notice that here I have a margin of 10 pixels on the div and we can see that there's 10 pixels of space in between our two dips here vertically. However, you can see that the inland level elements are ignoring the margin and their standard ching themselves right up against the bottom of the second Div there. Additionally, if I try to set a margin or with on the span, it will ignore it. So here, if I set the margin to 10 pixels, you can see that it's giving me a margin on the left and right side of the element. But it's not giving me a margin on the top and bottom in line level. Elements will ignore margin on their top and bottom, whereas block level elements will happily accept margin on their top and bottom. Additionally, it's very easy for me to set a width on a block level elements. So here, if I set a width to the dibs at 200 pixels, you can see they immediately accept that value and snap to that exact size. Now, in contrast, when I try to set a with on the span, you'll notice that in line level elements are not able to hold a wit. They're ignoring this value and they're actually staying true to the size of the content, So their only as wide is the letter C in the letter D here Now, as I mentioned in CSS, you can also tell the browser that you wish an element to display differently than its default. So even though dibs by default display block, I can easily use the display property, and I can tell it to display in line if I wish, or if I'd like to tell the browser to change the behavior of a span to display block, Aiken said. It's display property here, and you can see now the spans air stacking much like the dibs were before, and they're listening to their margin. As I mentioned, we also have the property in line dash block, which is kind of a hybrid of the two. So if I said Thies elements to in line dash block, you'll notice that what's happening is as long as their space for them to all fit. They're going to fit side by side here, and they're going to have top and bottom margin, and they're going. Teoh also have this with accurately set on them as well 49. Code Along - Part 3: this is code along exercise part three and you'll start off by downloading the zip file for this code along exercise, and then you can double click on it to extract it. And then I'm gonna move this exercise folder here, um, onto the location where I've been placing the other ones, which in my case, is in my development folder. And then from there I'm gonna go ahead and drag it onto my Adam icon to bring it up. Now, in this code, along exercise will be using the CSS box model to add some spacing in and around our elements and also to set some sizing properties for them. Let's start off by adding some margin and patting toe are typography. So I'm gonna go into the CSS folder, and you should have an existing typography dot CSS file there, and you can go ahead and open that up. I'm gonna create a new line underneath my body selector here, and I'm gonna use a compound selector to select all of my headings. And in this case, we can actually skip H foreign H five. For now, we just want to select H one h two h three and H six is and what we're going to do is remove any margin that they have on top of them. Someone set margin, top 20 Here. Next, we're gonna use a compound selector to select H Fours and H fives. And here we want to set their margin. And we're going to use to values here so that the top and bottom margin is set to five pixels and the left and right margin is set to zero. Moving on to our own ordered list for a ordered list by default. The browser set some left padding inside of a nor did list elements in order to in den or shift over the bulleted list items. I've already gone ahead and played around with this value in the developer tools, and I came up with left padding of 17 pixels, which creates perfect alignment with it and the other elements around it. And then we'll also set some margin on the bottom of the UN ordered list elements on here. We're gonna set that to 20 pixels now, Additionally, I'd like to adjust h force that are inside of my footer section s Oh, these are the ones that are down here at the bottom inside of the footer, for example, the one that says customer service or get involved or correspondents. I want to change the margin on these a little bit differently from the previous margin I set here, which was five pixels. So in my compound selector online 11. I said H fours margin to be five pixels on the top. However, if they happen to appear inside of footers, I'd actually like to remove that margin. So here we're gonna set margin top 20 So here online, 23 I'm using a descendant selector by putting a space in between footer in h four. Remember, that's gonna go and find a footer element and then go inside of it and select the age fours on Lee If they appear inside of that footer element there. Next, let's scroll down to our class of caption. And here I'm gonna create a new property under font size and here will set the margin on the top of the element 25 pixels. So that's all the changes we need to do in terms of margin and padding inside of our typography elements, so we can go ahead and save this file and we can close out this tab. Now, if we jump over to the contact page, you can see I have a contact form here inside of the first section. And we'd like to write some CSS to stylized thes input fields as well as this text area field here. Now, I'm gonna go ahead and create a new CSS file to do this, so I'll go ahead and right click on the CSS folder, and I'm gonna select new file. And here we're gonna call this one form dot CSS and then we mustn't forget to import form dot CSS into our main dot CSS. So go ahead and double click to open up main dot CSS and here we'll use our at import commands. And here we're just going to link to form dot CSS and put a semicolon on the end. And that will make it available to all the HTML pages that are linking to main dot CSS. So jumping back over to form dot CSS The first thing we'd like to do is create a selector, far inputs as well as our text area elements. Somebody use a compound selector, their input comma text area. Now, if we bring up the contact at HTML page in the browser which you can do by right, clicking on the file and selecting show and finder and then you can right click on it and select open with chrome and you can see that all of our text fields here are displaying side by side. And the reason why is that input elements and text area elements are all set to display in line by default. Now, rather than display side by side, we'd actually like these two stacked vertically on top of each other. So what we're going to do is we're gonna jump back over to form dot CSS and here, inside of our selector, we're going to set its display property to display block instead. Next, we'd like to tell these elements to have a width of 100%. Next we'd like to set, they're padding to 10 pixels and by setting a single value, there is going to give us 10 pixels on all sides of that element. Next, we'd like to set some borders, so here we're going to set the border dash top property and we'll give this one pixel for its thickness. Will set its style to solid line, and we'll set its color value to see a C A C A. And this will create a nice gray color Will go ahead and copy the CSS Declaration here online five. And well, paced it two more times. And we'll set thesis on one here, two border dash left and will set the 3rd 1 here to border Dash right. And lastly, we want to set the border dash bottom simply to the value of zero. So there is no border on the bottom edge of these elements. Now, if we come back to the browser and refresh the page, it should look like this. The next thing we'd like to do is write some styles for our tables that are inside of our products pages. To do that, we're gonna create another CSS file. So let's go ahead and right click on the CSS folder and select new file, and we're gonna set this to table dot CSS And don't forget to jump back over two main dot CSS and we'll import this in and here we will link to table dot CSS don't forget to save main dot CSS and then we'll jump back over to table dot CSS here. We want to use a type selector to select the table element and will give it some margin. So here will say, five pixels of margin on the top of the table, zero on the left and right and zero on the bottom. So by using three values, there were doing five on the top zero on the left and right and zero on the bottom. Next will use a compound selector to select both TD's and th is these air the cells inside of the tables. TD is the division for each cell and th is the table header. So those are the header cells here we want add some padding inside of these elements, so we'll set it to five pixels and will also add a border on the left hand side of each of these elements and here will set it to one pixel dotted hashtag C c c. So we're using the hacks a decimal value for a medium grey. Their next will select the table headings again, and this time we wanna add a border bottom and here will do two pixels solid and will make the color a darker gray. They're using hashtag 333 Next will individually select the TDs and here will change the border bottom as well. This time, we'll make it one pixel solid, and we'll do that medium gray color again. So let's go ahead and save table dot CSS and let's jump back over to the browser and select the products link and then click on the first product here, which is the lime Schwinn 1968. And here you can see the table style filled in there. The next thing we'd like to do is we'd like to set display sizing, padding and margin to some of our common layout elements. So here we will, right click on the CSS folder once again, and we're going to select new file. And this time we're gonna call it layout dot CSS and, as always, go back to Maine and we'll import it in. And don't forget to save Main, and then we'll jump back over to layout. So the first thing we'd like to do is we would like to change the W three C box model on all of our elements. So I'm gonna use the universal selector by saying star and then in the curly braces here will set the box sizing property to border dash box. So from here on out, whenever we set a height or width to any of our elements in our layout, it's going to automatically include padding and border inside of those measurements. The next thing we'd like to do is we would like to add some padding at the top and bottom of our main sections container. So I'm gonna go ahead and say mean and then I'm gonna say dot container. So what I'm doing here is something we haven't seen before. This is a little bit different than just selecting the main element, and it's also a little bit different than just selecting the class of container. It's more specific, in fact, because what I'm doing is I'm telling the browser that I'd like to select main elements if they happen to also have a class of container. So I'm not selecting all main elements here, and I'm not selecting all container classes. I'm actually only selecting main elements that also have a class attributes set to container. So, in order to add padding on the top and bottom of the element, will use the padding property and set two values will set 30 pixels for the top and bottom padding and zero pixels for the left and right padding. We can go ahead and save that. Additionally, I'd like to add padding inside of all of our sections, so I'll use the section selector here, and then we'll go ahead and set padding to 20 pixels. Next, I'll create a footer dot container selector here, similar to the way I did the main container selector. And this is only going to select footers that have a class of container. So here I'd like to set margin on the top and bottom of our footer container. So in this case, all said it to 40 pixels on the top and bottom and zero on the left and right. Additionally, I want to select sections that are inside of the footer element. Now these ones are these sections. Here we have a section for correspondents. We have a section for customer service and a section for get involved as well as a section for Follow us. Now I'd like to set all of these to have the same height. So here I'm going to explicitly set a height on these sections and here will set it to 185 pixels, so make sure to save the layout dot CSS file. And then if you come back to the browser and refresh, you're starting to see that padding on the side of your elements here. So all of our sections have that 20 pixels of padding and you can see they jumped from the edge of the browser window There. We can also see a little more white space here between each of our sections inside of the Footer. Lastly, under layout dot CSS, we'd like to set some padding onto the product's pages for the details section about each product. If we jump over 21 dot html and we scroll down to the first section, which is on Line 29 in my code, you'll notice that there's an image, a table in each one, a paragraph and age three, and then a non ordered list. Isabella's a button, so I'd like to group the image in the table in tow. One box and I'd like to group the H one B paragraph, the H three and the one ordered lists, as well as the button here into another box. So to do that, let's go ahead and use a generic development and will start the opening of the Div just before the image here. And we'll put the closing of the deaf just after the table here to make it easy to see that the image and the table element are nested inside of the stiff, we're going to highlight them, and then I'm going to invent them by using the command key and the closing square bracket, which is just two keys to the right of the letter. P should be your closing square bracket, so that's command and closing square bracket, and that's going to in debt. It you can see if you wanted to indented back you can do command. And the open square bracket, which is the key just to the right of the letter Pete and using open square bracket or close square bracket will allow you to in debt an entire highlighted block of code. There. Next, we'd like to create another DIV that's going to wrap the H one, the paragraph the age three, the UN ordered list and this button here. Now, this div were actually going to give it a class of product details as well, and then make sure you put the closing death just after the button there. So inside of our section, we actually have divided it into two other dibs here, this one and this other one here, which has a class of product details. You're gonna wanna go ahead and repeat this on each of the other products pages, which I'll do very quickly. Let's jump back over to lay out dot CSS and here we're going to create another selector. So underneath my section selector here will go ahead and say dot product dash details to select that second. If they're on the product's pages and here we're just gonna give it some special padding. So we'll set this 20 pixels on the top zero pixels on the right, and we'll give it 20 pixels of padding on the bottom. Will also give it 20 pixels of padding on the left hand side so you can go ahead and save layout dot CSS next will move on to styling our sights. Navigation. We jump back over to the index page. You can see your inside of the header section. We have to navigations one. Navigation is sort of our main navigation for the website, and the second navigation year is a secondary navigation for our social media icons. Now let's say hypothetically that I might have different navigations throughout my website , and I want a way to style all of my main navigation separately and differently from my social navigations, wherever they may be on each page. Now good way to do that is to set a different class name on each knave element. So here, all set, this first never elements Class two main have, and then the second navigation here, we're going to change it instead to a class of social knave exits. Create a new CSS file to style my navigation. So let's jump over to the CSS folder and here we're going to control click and Select new file, and here will call this knave dot CSS. Then let's jump back over two main dot CSS and let's add in our import statement and here will set it to knave dot CSS and make sure to save your main dot CSS file. Next, let's jump over to nab dot CSS and the first thing I'd like to do is I would like to change the way that my links are displaying inside of my knave elements. So currently, my links are displaying side by side, which is great, but I'd also like to reserve the ability to set a width on them or top and bottom margin. And in order to do that, I'm going to have to change the way they display. So in order to select links inside of the knave elements, I can use a descendant selector by saying knave space A. And then I'm going to set their display property to in line dash block so here will select the class of Maine knave and we'll set text the line to left in all of our main knave elements. However, in our social knave, we instead wanna set our text the line to right. Next, I'd like to set the padding inside of the links inside of our main knave. So here will use a descendant selector by saying may knave space A and here will set the padding to 20 pixels on the top of the element. 20 pixels on the right of the element, 20 pixels on the bottom of the element and zero on the left of the element. Now we'll do the same thing for the links in the Social Nab. We're going to set the padding a little bit differently on these here will say, social knave, space a and here instead, we're going to set the padding, too. 20 pixels on the top of the element, zero on the right side of the element and 20 pixels on the bottom and 20 pixels on the left of the element. So we'll go ahead and save that. And now we can come back to the browser and refresh. And you can see we have some spacing here now, on our links that are inside of theme, a naff and because we use text align left, these elements are staying to the left side of the screen and here because we used text align right on the social knave. The social knave icons are appearing on the right side of the screen. You can also see because we set zero padding on the right side of the social knave elements . This allows the Facebook icon to be all the way up against the right edge of the browser window. And because we set the left padding on the May naff elements to zero, this allows the logo geo cycle to be right up against the left edge of the browser window. Now, one thing will notice if we highlight our links. Here are these highlighted bars here in between each of our links, Um, and these are sort of a undesired side effect of setting things to display in line block. And the reason this is happening is if we go to the index dot html page, you'll see that I've put a line return after each of my eight tags here. That way, I can have them each on a separate line now, although this makes it very visually easy to see that there are three links here because they're stacked one on top of each other. Whenever you do a full line return on elements that are displaying in line block, it actually sees that line return as a physical keyboard space. And that's why we're getting this extra space here now. In order to correct this issue. It's very simple. Also we have to do is go to our links and hit the delete key to subtract any space between them and put them all on one line. So I'm gonna go out and do this for both the main knave and also for my social knave here. Now we'll go ahead and save the index page. And if I come back and refresh the page, you can see now that when I highlight those links, I'm only seeing the text content there highlighted. Now that I've adjusted the HTML markup for my knave elements here on the index page, I'd like to copy this and paste thes onto my contact pages. Well, so here I'm just gonna replace the knave on the contact page with my new updated code that has my main knave class, my social knave class and all of my eight tags on one line. And I'm also going to update that on the products page as well. So don't forget to save those pages. We also have the individual product's pages here. For example, if I go to one dot html and I go to my knaves here. I can go ahead and paste that doing in now, Don't forget that the linking here was a little bit different. Remember that we had dot, dot, slash before all the links to get us out of the products folder. So if we simply replace that navigation with the other one we just copied from the index page, we're gonna have to go back in and add the dot, dot slash Before all of these. So here will add the dot, dot slash before index. We'll add the dot, dot slash before products. And if we scroll over here to contact, we can add the dot, dot slash before the contact link as well. And we can copy this navigation for use on the other products pages. So here will go to two dot html and will replace the knave here and also the same on the three dot html page. Great. So now that we've saved all our pages, if we come back to the browser and refresh, you can see that if you jump to any page here, we're seeing those new, updated styles 50. Developer Tools - Part 3: next, let's briefly look at the way we can use the developer tools to preview changes to box model on our elements. So let's say I'd like to adjust the padding on the right side of my links inside my main navigation. First, let's inspect one of our links here, so I'm gonna right click on the products link and I'm going to select Inspect to bring up the developer tools. Now, one thing you might notice right off the bat. If I hover over this element here in the Elements panel, you can see that up at the top of the screen. It's actually showing me the box model that surrounds the products linked by using different color coding. So it's using blue to indicate the content area, and here it's using green to indicate the padding area now. Previously, we looked at the Styles panel, and we noted how we could actually go into the different settings for padding and we could make adjustments on them. For example, if I double click on the second value here under padding for the A tags inside of the main knave element, I'm able to use the up arrow and down arrow keys on my keyboard to adjust to create more, using the up arrow or less using the down arrow. Additionally, inside of the Styles panel, if you scroll down to the very bottom you can see down here, at the bottom is a model representation of the box model for this selected element. So here, if we hover over the center, you can see that in blue. It's showing me the content size area. So here is showing me that this elements content area is 63 pixels by 18 pixels. It's also showing me that, and it's padding here indicated by this green, highlighting that it has 20 pixels of padding on the top 10 on the right and 20 on the bottom. Here, you can see there's no border set and no margin set on the element. We can see that when we hover over each color coded area, for example, on the constant area, it's also highlighting blue on our products link at the top of the screen, and when I hover over padding, it's also highlighting padding as a green color There. It'll indicate border as a light beige color, and it'll indicate margin as an orange color. It's also worth noting that we can also double click on these values and type and new values, or we also have the ability to use the up and down arrows. Justus we did previously toe add more or less padding in this case on the right hand side of the element, so you can use this to get a nice visual preview without being destructive to your code. You also noticed that when we hover over the element in the Elements panel, it's displaying a small flag that appears below the element. And that's showing us the true dimensions of the element, including any margin border and padding. So in this case, our products link is 83 pixels wide by 58 pixels tall. And that's in contrast to the content area, which is displayed down here as 63 pixels. So here the actual content area for the physical text products is only 63 pixels wide. But then, if I go back and hover over the a tag inside the Elements panel, we can see that it's actually taking up 83 pixels of screen real estate 51. CSS Float and Clear: in this next set of slides will talk about CSS layouts using floating grids will discuss floating elements centering using margin and building a simple grid system. Floating allows us to create column structure by pushing an element either to the left, using float left or all the way to the right using float right. In this example, we have a header and a footer, and in between are a sidebar and a main content section. By telling the sidebar to float left in the main section to float right, we're able to position them side by side horizontally. Here, you can see the code to accommodate that floating. So here the sidebar has an I. D. Of sidebar and is set to float left. So here we're using the CSS float property and setting its value toe left and then for the main content section. We've given that an idea of Maine, and we've set the float property to value of Right now, it's important to know that whenever you float something, it will affect all of the elements below it. So by default, any element that's below a floating element will try to pull up next to it. if there's room for it to fit. For example, if we float our main content to the left and our side bar to the right, let's say we have foot or below it. If there's room for that footer to fit next to the main content, it's going to jump up and try to sandwich itself just below the sidebar. Fortunately, we can tell an element that's misbehaving to clear past the height of any elements that are floating above it. And the way we do that is by using the CSS clear property. Clear can accept the value of left to clear past the height of anything floating to the left or a value of right to clear past the height of anything floating right. And you can also say both to cover all your bases, which will make sure that this element in this case, the footer clears past the height of anything floating to either the left or the right. You can see after we apply that code, the footer actually clears, then down below. Let's take a look at a practical example using floats. So here I have a paragraph and then below it. I have an image, and that's followed by four paragraphs. Now let's say, for example, that we would like to have these paragraphs wrap up around the side of this image. So any time you have an element in HTML that you'd like to act more like a column and you'd like the content below it to actually wrap up around it, you can set it to float. In order to do so, we can select the image, and then we can set its float property to either left or right, so here will set it afloat, left, and you can see when I float this image to the left. All of the paragraphs that are below the image are trying to pull up next to it and wrap up around it. This is really what floating was meant for. Now you can see that I can also set it to float right, and the difference there is. Then the image will jump over to the right side of the page, and the content will then pull up next to it on the left side. So again we'll go back to float left. So let's also set a margin around this image to give it a little bit of space on the right side in the bottom. So here will use theme Arjun property, and we'll set it with four values. So zero for the top, and then we'll say 20 pixels for the right 20 pixels for the bottom and zero margin for the left, and that will give us a little bit of a space here. Now let's say, for example, that we're happy that these two paragraphs here are actually appearing beside the image, so these would be the 1st 2 paragraphs here underneath the floating kitten image. However, we would like the third paragraph and the 4th 1 to actually fall below and appear below the floating element. In order to do so. We've created a class called Fall Below Here, which is just a generic class name we've invented. Um, and we're going to apply that to that third paragraph there below the image, and let's go ahead and write a selector for that. And then we're going to use the CSS Clear property and said it to clear both. And this is going to tell this particular paragraph here to clear past the height of anything floating above it, so you can see when we apply the clear. Both this third paragraph then behaves and falls below are floating element here, which is the kitty pick. One of the main things to note about float behavior is it floating doesn't affect elements above it. So this first paragraph here is completely unaffected by the floating image. However, any time you floated element, it always effects all of the elements below it to try to pull up next to it when there's room and again we can set elements to clear both. If we want to set an element to not pull up next to floating element and actually clear past the height of that floating element as we did so here. 52. CSS Clearfix: next, let's take a look at another unintended side effect of floating elements. So here we have a parent element. It's just a div with a gray background color, and then we have three dibs inside of it, and these are all set to float left. So I've given a green background color to all the elements that are floating left. And then I have one Did that. I set to float right so you can see that whenever you float an element, it's just going to pull as far as it can in the direction you've told it to float. And if there's room for other elements to appear, they're they're just going to stack next to it side by side. However, one unintended side effect is that whenever you float all of the Children inside of apparent elements such as this great box here, it will actually lose a reference for how tall to be so normally a block level element is by default as tall as its content. So the height of this gray box should actually be appearing all the way down here. However, when we set all of its Children to float, it actually collapses its height. In this case, it's on Leah's Tall is this text I've written inside of it now, in order to fix this and give that parent a reference for how tall to be we actually use a CSS hack that's been created by developers called Clear Fix. Clear Fix is a generic class name that we give you can really name it anything you like about clear fixes, a common thing that people call this class. And then we use the colon after pseudo class selector to insert some content after all of those floating Children. And then we tell that text content to display block, and we use the clear property to tell that text content in this case, the period symbol to actually clear past the height of all the floating Children above it. Now, we don't really want to see this little period symbol or any, you know, actual physical text content after all of our floating Children. So what we do to hide it then is we said its visibility to hidden and its height to zero and its line height, which is the spacing in between lines of text to zero as well. Now this is a lot of code to remember. Fortunately, if you ever want to grab a clear fix, you can always just open up a new tab in the browser, and you can type in CSS Clear fix, and this will come up with a lot of different results. And some of them are slightly different recipes for doing clear fix. But they should all work to accomplish the same thing. To show an example of how you would apply a clear fix, let's say, for example, that this Div here is floating to the left. Then this Div parent here with the class of container is actually collapsing because it has a floating child inside of it, and it's lost its reference for how tall to be. So, in order to fix its height, we can apply that class of clear fix to the parent that's collapsing, and then in our CSS, we can paste in this code for clear fix. Let's actually take a look at a live code example to illustrate this. So here I have two sections, one with the idea of jazz in another one with the idea of rock, and then inside each section we have two articles now. Currently, because sections and articles are block level elements, you can see that each section indicated with a great background color is appearing exactly as tall as the articles inside of it, plus a bit of padding and same thing here for these articles in the rock section. Now let's go ahead and set the articles inside of the jazz section to float left so you can see as soon as I float those articles inside of the jazz section. What happened was the section itself, with the idea of jazz actually collapsed its height. And now those articles inside the jazz section are even starting to overlap into the rock section so we can remedy this using the clear fix hack. So I'm going to create a class, and I'm going to call it clear fix. And then I'm going to use the colon after pseudo class selector and tell it that after all of the floating Children, I'd like to have some content appear there. So just toe illustrate this a little bit easier. We're gonna write the word hello inside of the content and I want to show you what just this part does by itself. So here, under the section, with the idea of jazz, we're gonna set that class equal to clear fix, to apply that class to the collapsing parents. So again, you always apply the class of clear fix to the parent that actually has the issue. This is the parent that's collapsing its height. So I'm gonna go ahead and click. Run and you can see what we did is so far we've just added content, which is the text content. Hello. And we've made it appear after all of the floating Children. The next thing we want to do is we want to set this content to display block. That's because block level elements try to stack vertically and they take up 100% of the horizontal space. The next thing I want to do is I'd like to tell this content to clear past the height of anything floating above it. So in this case, it's is if we're inserting the word hello here, and we'd like to tell this to clear past the height of those two articles so here will set the clear property to clear both. So at that point, our content is pushing below the floating articles above it. But the only thing is, we don't really want the word. Hello there. So then we said its visibility to hidden. That way we won't actually physically see the text, but it's still taking up some space on the screen. So what we can do is that its height to zero as well as its line dash height 20 Now, typically, what people do here is instead of writing the word how low they usually just put like a space or a period or some small character like that doesn't really make any difference, though now that we found a way to fix collapsing parents, let's see if we can remedy this on the next section. So here will set the articles inside of the rock section to float right. And here we're getting that collapsing parent issue again. And since we've already written in our code for the clear fix, we can simply apply that class to the collapsing section parent there, and that fixes are collapsing. Parent issue 53. CSS Simple Float Layout: Let's build a very simple layout. So first we're going to start off with a header and inside of it will add a level one heading. And for this particular website, we're going to make a website for a reggae supply company. So we're gonna call it Ragamuffin Supply and we'll have three sections here. So our first section is going to have an I. D. And this one is going to be for new products. So we're just going to give it an idea of new and inside of it will create in H two with the title of new items. Let's go and copy this and paste it two more times and make some other sections here. The second section will be for our music that sold on the website, so we'll give this one an idea of music and will change its heading to music. And then, lastly will have a section where we sell clothing. So we'll give this one an idea of clothing, and we're going to change the heading to say clothing there as well. Lastly, we'll add a footer at the bottom, and here are Footer would just hold some copyright information so I'm going to use the the HTML asking character of the copyright symbol. And to do that, you can just say and for sand symbol C o P. Why semi colon like that? I got the and symbol here by doing shift in the number seven, and that's gonna create our nice copyright symbol. And here we'll just say, 2016 ragamuffin supply. So to start off with, all of these elements are displaying block by default, so they're stacking vertically now. That's good for the header in the Footer. We'd like those to actually take up the entire width of the screen, but for new items, music and clothing, we'd like to make that into three columns. So to start off with, let's just go ahead and add some basic style to our layout, so here will go ahead and tell the header and footer to both have 10 pixels of padding and will set them to have the background color of black. Here I'm using the Hexi decimal number 000 for black and will set the color of the text toe white. So here I'll just use the hex of decimal value F F F for white. Next, let's create some selectors for each of our sections. So our first section is called hashtag new, and we're going to give that a background color of red and then will also create a selector for idea of music. And we'll go ahead and set this background color to yellow will also create a selector for our clothing section and this will get a background color of green in order to create columns. We're gonna set each of these to float left now by setting new to float left, it's gonna pull this red section here for new is far to the left. Is it? Can now let's go ahead and set the music and the clothing section to float left as well. So the first thing you might notice is that our footer is trying to pull up next to our floating sections here, and we'd prefer that the footer stays at the bottom. So, in order to tell the footer to stay at the bottom, we can set it to clear both, and you can see there that will push the photo below. Another thing you might have noticed before these block level elements were floating they actually had a width of 100% of the screen space here. However, as soon as we floated these particular sections, what happened was there only now as wide as the content inside of them. Now, if we'd like each of these to take up 1/3 of the space, we just have to do some simple math. You're so assuming I have 100% of space here on the screen. What I'd like to do is defy that space into equal thirds. So if we use a calculator and we take 100% of the space and divided by three, we come up with 33.333 repeating. So we'll set thes sections to have a width of 33.333%. So just copy and paste this onto my other sections for music and clothing. And then when we refresh, you can see that each one is now taking up 1/3 of that space because I'm sizing with a percent, you can see that they're expanding and scaling quite nicely there. Now, this site looks quite nice on a smaller screen, but on a very large screen I'm getting a lot of stretching here and I'm getting a lot of empty space inside of my columns here. One strategy for containing this into the center of the screen and adjusting it to a fixed with is to use a container. So to do that, what we do is we can in debt, all of our content here, and we can stick it inside of a common parent element. In this case, I'm gonna use a div, and I'm going to give it a class of container and then down here at the bottom will close out that container. You can even write a note to yourself if it's helpful to see where that container starts and ends. Now that we have this inside of a common container, what we can do is we can give that container with. So I'm going to select that class of container here, and I'm going to give it a fixed width of 600 pixels for now. So you can see this layout is now only taking up 600 pixels. Now, I'd like to center this container into the middle of the screen. So in order to do that, we can set its margin to zero auto. So again, that zero margin on the top and bottom and an automatic amount of margin on the left and right, and that's going to center our element. So now when I make this frame larger or smaller, you can see that it's always staying centred. No, my text is right up against the edge of my element, though what I'd like to do is add some padding inside of these sections. So here, let's just go ahead and type of selector to select the sections and let's give them each padding of 10 pixels now that caused an unintended result. So what happened? There is the clothing column there was over here on the end, no longer has room to fit their and has dropped below the new item section. The reason why is that currently I'm in chrome browser and chrome uses the W three C box model. The W three C box model starts measuring this 33.333% at the content area, so it's only this area here, not including this padding. So what I've done here is I've actually made the columns 33% wide, plus an additional 10 pixels of padding. Now you have the option of subtracting from the width of these sections in order to make them still fit side by side to accommodate the extra space of the padding. What's even easier is to set the box model so that it actually includes the padding automatically in this 33%. With to do that, I'm gonna use the universal selector, and that's going to select all elements. And I'm going to set the box sizing property here two border Dash box, which will use the Internet Explorer box model that includes padding inside of the width of the element so you can see that corrects the issue. Now I'm able to add as much padding as I like inside of my sections here, and it won't affect the overall width of the element. So this isn't a bad three column layout, but I would argue that this code here isn't very usable in other websites. This is assuming that I have ah section with the idea of clothing or music or new, and what would be really nice is if we could create a reusable CSS grid system that we could simply linked to in any website, and by using the proper class names, we could automatically create the different size floating columns that we need. 54. CSS Custom Grid System: next, let's talk about creating a reasonable floating grid system. Let's say we'd like to divide our Web page into many different size columns. The easiest way to do that is to rely on a simple grid. Here we're looking at a 12 unit grid system. For example, let's say you would like to have a single column that stretched across the entire screen, taking up 12 of the entire units on your grid. Or, for example, you might want to have a two column structure where each column takes up half of that 12 unit grid. Or, in other words, two columns with the size of six, meaning that there spanning six of the 12 units in our grid, you can really use any number of units in your grid. We're going to start off using 12 units because it's easy to do the math, and it's a common choice. Our grid will be broken down into three main parts. We'll have a container class. It will surround all of our content, allowing us to easily set a fixed with to it and also to center it in the middle of the screen. Inside, the container will have rose that will create vertical separation, and inside of the Rose will have columns that will divide up our space into different size units that will stack horizontally. To start. Our good will create two container classes, one called container and one called container. Fluid containers will have a fixed width, and the amount of pixels you said here is totally up to you. 9 60 is a common number for monitors that air 10 24 by 7 68 and size, and here we set the margin to zero auto when applying to values to margin. The first value represents the top and bottom spacing, and the second value represents the left and right spacing here. By setting the left and right to an automatic amount of margin, it will push our container element into the center of the screen. You can also create a container fluid if you'd like to set wits that are in percents. Having to container classes gives you the flexibility to have both fix wits and fluid wits . Within the same layout, Rose will reside inside of containers and act as parents to our columns. We'll make sure to set rose to clear both to ensure that they stacked vertically, even though they have floating columns inside of them, will also use the clear fix code that we learned about previously in order to prevent the rose from collapsing their height. Next will create column classes here. We're using an attributes selector with square brackets to search for any elements that have a class that starts with the letter c o l. Dash. This gives us the flexibility to accommodate many different size column classes and that uniformly will set all of the classes that start off with the letter c o l dash toe all flow left, giving them their horizontal side by side. Positioning, Additionally, will also set them to have 2% margin on the left side. This will always give a little bit of blank space in between each of our columns. However, we don't want our first column toe have margin on its left side because we would like the first column to fit snugly up against the road that it's in. We only really want tohave margin In between the first and second column and the second and third column to Pruitt margin on the first column, we can use that same attributes. Selector class starts with column dash and will penned onto it the first child pseudo class selector and said it's left margin to zero. For example, if I had three columns inside of a row, the first column to the left, which will be the first child inside of the row, will not have any margin. However, the second and third column will each have 2% of margin. Lastly, we need to set wits for all of the different size column possibilities. So assuming a 12 unit grid, we could do some simple math to calculate the width of each column. For example, if I wanted to have a column that spanned half of the 12 unit grid, I would name that column Dash 66 because it's half of our 12 unit grid to determine this with, we can use this simple formula. The column with should be equal to the row with minus any margin. So this formula is assuming that we're using the Internet Explorer box model. It's worth noting that if you were using the W three c box model, you would also have to subtract padding and border as well as margin here. And then we divide that amount by the number of columns, so determined the width for a column that spanned six of the 12 units we take the rule with , which is 100% subtract any margin in our case, 2% margin, and that gives us 98%. Then we divide that by the number of columns, which is, too, which gives us 49% so you can see the CSS code here for a call. Dash six should have its wits set to 49%. Or, for example, if we were trying to determine the width of a column that takes up four of the 12 units or , in other words, a spanning 1/3 of our 12 unit grid. We simply take the width of the road, which is 100%. And then we subtract the 2% margin that's in between the first and second column and the second and third column. So that's a total of four, so 100 minus four is 96%. Then we take that 96% and we divided by the desired number of columns. In this case, they're each taking up 1/3. So we divide by three, and that gives us 32% with for each column dash for now that we've written, all of our grid classes weaken. Simply apply them to our HTML elements to build our layout. Here we have a container as our parent element that's gonna hold all of our rose into the center of the screen and give it a fixed with and then inside of our row, we create our column. So here, if I'd like to have three columns inside of this row, we give them each A class of column. Dash four. Let's build our grid system again, and this time we'll put it to practical use. So first I'm gonna start off by using the Universal selector. And then we'll set the box sizing of all elements to border box. And that's gonna make our math a little bit easier for our column widths. Then we're going to create our container class now our container. We want to give it a width and done here. You can set the width anything you like. I'm gonna do 9 60 pixels and in order to center, are content inside of the container will set its margin to zero auto. Next, I'll create a row class which is going to ensure vertical separation between different groups of columns. So an easy way to do that is to set rose to clear both so they'll always clear past the height of anything floating above them. And in our case, we'll also set a margin on the bottom of our rows of 2%. Now, additionally, I want to make sure that Rose do not collapse their height. So I'm gonna use the clear fixed code, which is to create some content that will appear after all of our floating Children inside of our rose. We said that content to display block and we set that content to clear also, So it will clear past the height of all the floating columns above it. And this gives the row reference for how tall to be. And then we want to make it invisible. So we set its height. It's line heights, both to zero. And we said its visibility to hidden as well. Okay, so next we need to make our column classes. And here we're just gonna use an attributes selector to write all of the code. That's going to be the same for all of our column classes. And I'm going to use the carrot equal symbol to create a filter that's going to look for in this case, any class attributes that start with the letter c o L Dash. Well, float to the left, and we'll also said it to have a margin on the left hand side of 2% now. Typically, that's all we need to do for our column classes. But in this case, we also want to give them a background color of Aqua just so we can see them on the screen . And you can always go back and remove this when you're using this code inside of your website and additionally, for this example, will set 2% padding inside of our columns as well. Now it's very important that we subtract the margin off the left side of the very first column in a row of columns. So to do that, we used that same attributes selectors we did before, but this time we're using the first dash child pseudo class selector, so this will only select columns that air the first child with in a row, and there we want to set their margin left to zero. Next, we just need to do the math for all of our different column class numbers. We'll just start off doing a few of them for practice, and then I'll go ahead and copy and paste in the math from a pre written list. So if I wanted to create a column that spanned 12 of my 12 unit grid, that would be a width of 100%. That one's pretty easy to figure out. But what if I wanted a column that only spanned half of my 12 unit grid, so half of 12 of six? So we would call this column Dash six and then here will set the width. Now remember to calculate the width of a column. We simply take the size of the road, which is 100% of available space for our columns, and then we subtract any margin. So here we're going to have 2% margin in between. Our two column six is so I can subtract two from that. That gives me 98% of space left over. Now I can divide that by two, which is the number of columns I plan to have. And that gives me 49% for a column that spans six out of the 12 units of our grid. Or, for example, if I wanted to have a column that Onley spanned 1/3 of our 12 unit grid, we can take 12 divided by three, which gives us four. So we could name this class column dash for meaning that it spans four of the 12 units and then to calculate the width there we take 100% of available space and we subtract any margin. So here I'm gonna have three equal columns inside of my 12 unit grid. So there's gonna be 2% margin in between my first and second column and another 2% margin in between my second and third column. So I have to subtract a total of 4% margin in between the two. That leaves you with 96% left over and Aiken, divide that by the three columns to get there with, so that gives me a 32% with for each of my column. Dash fours now to test out these numbers here. We could simply apply this into the html markup and see what it looks like. So here. Now I'm ready to make my layout. So I'm gonna start off by making a div, and I'm gonna give it a class of container and then inside of it, I'm gonna make two rows now inside of the first row. I'd like to create a column that only span six of the 12 units. So here will create a div with the class of called Dash Six, and we'll just make two of those side by side And then in my bottom row here, let's say I'd like to make a three column structure, so these will all be dibs with the class of column Dash four. Now, if I a preview the code here, you can see the two classes of column Dash six taking up six of the 12 units. And here you can see the call Dash Force taking a four of the 12 units. Now, I've already pre done the math for all the other different column possibilities, which you can see here. So I'm just gonna copy and paste that in, and I've even pre built an example layout that shows all the different possibilities here in an index page, so I'll just copy and paste all of that code as well. Now you can see every different column possibility from called Dash one all the way to call Dash 12 and we can do any combination of these numbers as long as the numbers of the column add up to 12 of our 12 unit grid. 55. CSS Using Third Party Grids: it is worth noting that it's very easy to get free. CSS Grid Systems online. If you type in CSS grid system, you'll see it comes up with a lot of different possibilities. So here's a grid system called Materialize. Here's another popular grid called 9 60 Here's another one that comes with the bootstrap framework. So most of these grids are actually built very similarly to ours. Most of them have a container class and row classes, and the only difference between the one we built and this one is that they have a class of C O. L. In a separate class s and then the number of how many units of the grid it should span. So in order to use this particular grid system materialized, you simply download the CSS code and linked to it in your HTML pages. And then you just have to use their class naming conventions in order to create the column structure that you desire 56. Code Along - Part 4: this is code along exercise for in this code. Along exercise will be adding a CSS floating grid system so that we can create layout in each of our site pages to start off with your going to download the code along exercise for a ZIP file, and then I'm going to double click it to extract it. And then you're going to drag this folder to the location where you are keeping your other code along exercises. In this case, that's in my development folder. Then I'm going to go ahead in drag that folder to my code editor, which is Adam. Then we'll go ahead and double click to bring up the index page. And if you right click on the index file here, you can select show and Finder, and then you can right click on the file to select open with Google Chrome to get started. We'd like to link to a CSS grid system. Now there's a lot of third party grid systems that we could use online. In this case. I'm going to use one that I've pre built myself to get to the code. I'm going to open up a new tab in the browser, and I'm going to go to get hub dot com slash john Grover slash CSS dash light grid. Next, I'm going to click on the CSS folder that's linked here in the center of the page. And then I'm going to click on the file name, light, dash grid dot CSS to reveal the code. Here, you can click and drag to copy all of the code, and this will be from lines one tow line 45 in the code. And then I'm going to copy it onto my clipboard. I'm using command, see on Mac or that would be control see on Windows. And then I'm going to jump back to Adam. And here we'd like to create a new CSS file to paste this code into. So I'm going to right click on the CSS folder and select new file. And here I'm going to call this grid dot CSS here you can paste in your code. I'm using Command V on Mac, or you can use control V on windows to paste. Now, this gives us a pretty good start, but we'd like to modify this a little bit. Now, the first thing we'd like to change is we're going to remove this box sizing declaration that's on line three. And the reason why is you might remember that before. Previously in layout dot CSS, we've already applied that code, so there's no need to repeat ourself here in grid dot CSS. So we'll go ahead and delete that. And another thing we'd like to change is that in the light grid that we copy and pasted from get Hub the width here is sets in 9 60 we'd actually like our containers to be a little bit wider. So let's change the 9 62 9 80 instead, additionally, were also going to create another container class here and this one. We're going to call container dash fluid, and we're going to set its with 2 100% now. This is going to give us the flexibility to have containers in a website that have a fixed pixel amount, as well as fluid containers that are going to stretch across the entirety of the screen Now . One other subtle difference is that in this grid they were setting the margin below each row. Now, instead of setting the margin below each row. We're going to delete that there and we'll add the bottom margin onto the column class itself. So here I'll change this margin. Dash left property to the margin property and we'll set zero for the top margin. Zero for the right margin, 2% for the bottom and 2% for the left. Now, normally, we wouldn't put any background colors or foreground colors onto any of our grid classes because we don't really want our grid to show up most of the time, our greatest acting as an invisible skeleton of our page layout. However, in this exercise, in order for us to temporarily see these elements were going to give them background colors for now. So here I'm gonna set my container class to have a background of hashtag e f e f e f. This is a hexi decimal color for light gray. And then I'm going to go down to my row class here, and I'm gonna give this a background color of hashtag C C C, which is a medium gray color. And then lastly, we're going to go down to our column class selector here, and we're going to set this with a background of the color aqua. So here we're just using the color named Aqua. So let's go ahead and save grid dot CSS. And then we can close out this file now. We always have to remember that on our HTML pages were only linking to the main dot CSS file. So if we want to make use of that grid dot CSS file, we're going to have to import that in here into our main dot CSS and here will set it to import grid dot CSS. So make sure you save the main dot CSS file as well. Next, let's open up the index dot html page. Now there's no one single strategy for creating page layout, but what I like to do to keep things organized is I usually start from the top of the page and work my way down, going from outer to inner on the elements. So starting at the very top of the page, I know that I want to visually have a bar that stretches 100% across the entirety of the screen. In a future exercise, we're going to add a background texture to this container, but for now, we're just going to create a box as a placeholder for it. So I'm going to create a diff here with a class of container fluid. And then we're going to move the closing def here, down below the header and you can see that I've already properly indented the code for you . We can even put a comment to ourselves that this particular div is closing our container fluid class. So this bar is going to stretch 100% of the screen and then inside of it are Header is going to stay centered and only 980 pixels wide. To do that, we're gonna give our header a class of container so we can go ahead and save that there and let's go back to the browser and refresh and see what it looks like. So if I refresh the page there, we're now seeing our header is getting that gray background color because we've given that great background to our class of container, and we can see that it's also now 980 pixels wide, and it's centering in the middle of the screen. Next, we'd like to create a row element here too. Contain each of these two knaves, which will act as columns. So here will create a div with a class of Roe and we'll move the closing def. Here just below are to have elements. And here we can give another comment that this is the closing of the row class. Now, for each of these knaves, we'd like to have them span exactly half of our 12 unit grid. So we're gonna give each of these a class of column Dash six. Let's go ahead and save our index page and come back to the browser and refresh. Perfect. So since we've given the columns a background color of aqua, we can see each of those columns there that's spanning six of the 12 unit grid, and they have 2% margin space in between them. Next, let's move on to our main element here now, everything inside of our main element here We would like to be centered in the middle of the screen justice. Why does the header element that's above them? So in order to accomplish this, we're going to give main a class of container as well. And if we save that and come back and refresh. You can see that it's now holding all of our content there into the center of the screen, Justus wide as the header above. Next, we'll create a couple of rows, so I'm going to start off with Divya with the class of Roe, and I'm going to end this active here just below the first section. So this is the splash image, and I want the splash image to be by itself in its own roe. Now, below that, we're going to create another row for the next two sections. So we want the vintage bicycle safety film and the charity rides to be sharing the same row . So here Online, 30 will create another opening for a div with a class of Roe, and we'll move the closing Div here for the row down the line 46 just after the two sections for the safety film and charity rides. And once again we can give a little comment here in the code that we are closing off that road class now. In the first row, we have a section here that's holding our splash image, and this one we would like to give it the class of column Dash 12 because it's spanning 12 of the 12 units of our grid in the second row. However, here we have two sections, and for the safety film, we would like this one to take up 2/3 of the of the 12 unit grid. So we're gonna give this one a class of column Dash eight and then the second section here . We would like it to take up the other 1/3 of the 12 unit grid, so this one's going to get a class of column Dash four. So again, the first section gets a class of column Dash eight. The second section here is getting a class of column dash four. So let's go ahead and come back to the browser and refresh, and here you can see the first section and below it, you can see the vintage bicycle safety film is taking up 2/3 with the column Dash eight, and next to that, our charity Rides is taking up 1/3 using a column Dash four. Next, we'll move on to the footer section now, just the same as the header at the top of the screen. I want the footer to also have a bar that travels 100% of the screen. And again, in the future exercise, we're going to be adding a nice ingredient fade to this particular bar across the screen. But for now, it's just going to be an empty element and will create that bar by creating a div with the class of container dash fluid. And we'll move the closing of the container fluid if to the very bottom, just before the closing body element. And just after the closing footer Element. And here will give a comment that this is the closing of the container dash fluid class. So Seamus, the header element above, we want the footer to get a class of container so that it will be 980 pixels wide, and it will center itself in the middle of this other element. So if we go ahead and save the page and refresh, you can see now the footer is behaving and is centering inside of the container. Now we only want a single row in our footer, so here will just create a div with a class of roe, and we'll close this Div here just before the closing of the footer and I'll write a comment letting us know that this is the closing of the road class. Now for the sections here I have four sections which you can see here correspondents, customer service, get involved and follow us. Now. I'd like each of these to take up 1/4 of my 12 unit. Grid 12 divided by four is three. So that lets me know that each of these sections here should get a class of column Dash three so we can go ahead and copy this and we can paste it onto the other sections here. So I'm taking extra care to make sure I'm pasting these into the opening section tag and not accidentally put them in the closing section Tag. So it's good and save the page and we'll come back to the browser and refresh. And here you can see those column dash threes are giving us the four columns here in our footer at the bottom of the page. Now, one thing you might have noticed is that sometimes content if it's wider than the column is actually going to stick out outside of that element. Now a nice way to fix this that also lends itself to creating responsive websites is to tell your content inside of the columns to only be 100% of the column with. So we're gonna make this image, in other words, become fluid and shrink its with to match whatever size column it's in. Ah, in order to do that, let's bring up the layout dot CSS file that we were working on previously and underneath our universal selector here that says Box sizing. We're going to go down to Line five and create a new selector, and here I'm going to use a compound selector that will include images. I'm also going to include forms, tables and I frames, and I'm going to set them all to be with 100%. We're also going to give them a max dash with of 100%. This will ensure that all of these elements will always stay within the confines of the column that they occupy. So go ahead and save layout dot CSS and then you can close out that file. And if we come back to the browser and refresh, you can see now that our image is staying within the confines of our column. Dash 12 there. Next, let's jump back to Adam and let's bring up our contact page. Now. The header and footer is going to be the same for the contact page as it is for the index page, so we can go ahead and copy and paste that information over So we'll start off with the container dash fluid element here, and we'll stop highlighting just before the main element. And then I'll go ahead and copy that and well paced it here onto the Contact page to save some time. And we'll go and save That will also change that on the products page as well. And lastly will also change that on the individual products pages, which are in the products folder. And remember, these pages will have to update the links here with dot, dot, slash in front of them again. So we'll just add dot, dot, slash in front of index dot, dot, slash in front of products and dot, dot, slash in front of contact at HTML as well. And then we'll highlight this code for the individual products pages to make it a bit easier, and we'll copy that, and we'll update that on two dot html as well as on three dot html. Now the footer is a mentioned will also be the same on all of the other pages so we can grab the footer here, starting with container dash fluid and ending down just before the closing body tag. So I'm copying that off the index page, and then we'll go ahead and go over to the contact page. And just after the main element there and before the closing body tag, we can paste in our new footer and we'll do the same here for the products page again, just below the main element. And just before the closing body element and well paced in that new footer there. And this will be exactly the same on the individual products pages as well. Okay, now that we've updated the header in the footer for all of our pages, I'm going to go back to the contact page and we'll start working on the main element now. Just the same is on the index page. We want the main element on the contact page to have a class of container to pull it into the center of the page and give it a fixed width. Inside of that, we're just gonna have a single row here for the first section here. We're going to give it a class of column Dash five. And for the second section here, which is the map, we're going to give it a class of column. Dash seven. Let's go ahead and save this page and we'll come back to the browser and we'll click the contact link. So here you can see the column Dash five for our form and the column Dash seven here for a map. Next, we'll move on to the products page, starting with the main section here. It will also get a class of container, and here will have a row that is going to surround the vintage bicycle section, as well as the quote section just before our H two here that says our featured picks. So we'll go ahead and close out that row just before each to their now. This first section here is going to get a class of column Dash eight, and the second section here is going to get a class of column Dash four. Instead, let's go ahead and save the products page and will come back to the browser and click the products link. And here you can see the column, Dash eight and the column Dash four for our quote underneath the H two with the class of headline that says Our featured picks were going to create another row, and this road is going to encompass thes two sections here for our featured picks. So we'll create another DIV with the class of Roe, and we'll end it here just before the next age, too. And here this first section will get a class of column Dash six, and the other section will also get a class of column Dash six. We can go ahead and save our products page and come back to the browser and refresh. And there you can see for our future picks the lime. Schwinn is taking up half of our layout and the Italian Army. Schwinn is taking up the other half of our layout now for the next section, which says, All bicycles. We have quite a few products here, and what we'd like to do is we'd like to show about four products per row. So what I'm going to do is I'm gonna start grouping each four sections into their own roe. So here will create a div with a class of Roe. And we'll close the row right after the 1st 4 sections, then will group the next four into their Ellen row and we'll go ahead and close that road class out just before the age to that says gear and apparel. So we should have two rows with four sections inside each and all of these sections here, in order to take up 1/4 of our 12 unit grid, will all get the class of column Dash three. Now, I'll show you a neat trick you can do with Adam, code editor. And if you'd like to type the same code on multiple lines at the same time, I'm just going to left mouse, click after the letter end in the opening section element, and in order to create multiple cursors here, I'm gonna hold the command key and I'm going to click into the next section after the letter end and the next and the next and the next and the next and the next So here I've highlighted just after the letter end in all of the sections, and because I was holding the command key, it allowed me to click and create a cursor after all of these locations here. Now, if I hit the space bar, I'm making keyboard space after the letter end in all of these locations and hear when I type class, I'm actually writing the text class on each of those cursor lines, and here will type column, Dash three End quote and we were able to apply that class of column Dash three to all of the sections at once. So we'll go ahead and save the page, and then we'll come back to the browser and refresh. And now you can see for all bicycles. We have two rows here with four products in each row. Lastly, for gear and apparel, we also have four remaining products, so we're gonna do the same thing to those ones under the age. To hear. That says, gear and apparel will create another row, and we'll close this row out just before the closing main element. And again for each of these sections. Here we can click and hold the command key to click into the opening tag here of each section element. And here we're gonna use the class of column Dash three and we'll go ahead and save this page and we'll come back to the browser and refresh and they're under gear and apparel. We can see those four products. So that concludes the layout for our products page. So now we have the homepage, the products page and the contact page done. Next, we just need to work on the pages for the individual products. So let's jump over 21 dot html. Now, here are main element will get the class of container. Now inside of that, we have a section element, and this one we're gonna treat a little bit differently. In this case, I want my section to actually be the row itself. We're gonna give this section a class of roe, and inside of it, we have created to dibs as boxes that are going to divide this into two columns where one will contain the image in table and the other one will contain the product details. So here this first div that we created previously it is going to get a class of column Dash four. So it takes up 1/3 of the 12 unit grid, and then the next class here for the product details did, is going to get a column Dash eight to take up the remaining 2/3 of that 12 unit grid. So let's go ahead and save this page, and then we'll come back to the browser and refresh, and here you can see the column, Dash four and the column Dash eight. Next, we just need to apply this same class naming to the other individual product pages. So if we go to two dot html will go to the opening main element and we'll give this one a class of container. And remember, we're giving the section the class of rope. And the first, if year, is getting a class of column dash for and the second def here for product details is getting a class of column Dash eight. Then we'll go over to three dot html and will do the same. So here the main element gets the class of container. The section is getting a class of rope, and this first it is getting a class of column, Dash four and the second, if there is getting the class of column dash eight. So if we save and then we can come back to our main products page, and if we click the first product the second product and the third products year, you can see that they all are appearing with the correct layout. 57. CSS Position: in this next set of slides will discuss positioning elements will discuss the position, property and various techniques for positioning elements using CSS. And we'll also talk about the Z Index property, which will allow us to create depth by layering elements and overlapping them one on top of the other. In CSS, the position property can be sets a relative absolute or fixed. For example, if we have a div and we give it the class of box by changing its position to relative, were able to then specify top bottom left or right properties where we can give it a value of the number of pixels. We would like to push it or move it relative to its initial position. Here you can see a grey box indicating apparent element, and inside of it, we've created a element with the class of box that has a purple background. Now here we've set its top position to 25 pixels, and it's left position to 200 pixels. So what that's doing is it's pushing down on the top of the element 25 pixels, and it's pushing on the left of the element 200 pixels. So when using relative positioning. If you specify top of bottom left or right properties, you're able to push on the edge of that element and reposition it relative to where it was initially on the page. We can also set the position property to absolute Now. The difference here is that one setting the top bottom left or right properties were now giving it values that are in relationship to the entire browser window. So here, if we set the positioning of this box to top zero right zero, it's going to move that box into the top right corner of the browser window. We can also set the position property to fixed Now fix behaves the same as absolute positioning. However, it will stay fixed in place even when the user scrolls the browser window. Next, let's take a look at a simple code example that's demonstrating different positioning. So here I've created four sections, and inside of them they each have a div. And here in the CSS, I've given some default styling to all dibs in sections. Let's first take a look at this turtle element that's positioned inside of the sewer section. Next will uncommon this code here within the idea of turtle, you can see that we've said its position property to relative. This allows us to then specify top bottom left or right properties to position this element now the top bottom left or right properties except values as pixels percents. EMS points, among others here were setting the top positioning of turtle to 20 pixels in the left, positioning to 50 pixels. Let's click run to see this change so you can see what happened. Here is when we set top positioning to 20 pixels. It's a Ziff. An imaginary finger is pushing down on the top of this element, and it's moving it down 20 pixels. And when we set left to 50 pixels, it's a Ziff were pushing on the left hand side of this element and moving it over 50 pixels . So relative positioning is moving this turtle div in relationship to where it was before. Next. Let's move on to the Daily Planet section with a div. With the idea of Clark inside, you were going to set Clark to position absolute, and we're going to give it a top zero and a right zero command. Now you'll see what happened was when we set this element to position Absolute top zero and right zero is referring to the top right corner of the browser window. In fact, if we said it to top 20 pixels, it's going to move Superman 20 pixels down from the top of the screen. Or, if we say right, 30 pixels, it's going to move Superman here, 30 pixels from the edge of this frame here or, in other words, the entire browser window. So when you said something to position relative, top left, bottom or right, properties are then referring to the elements position relative to where it was initially. Whereas position absolute top Right Bottom and Left properties are referring to the position of the element within the entire browser, window will just set thes back to zero. Next, let's see what happens if we have an absolutely positioned element that's inside of a relative parent. So in this case, Lex Luther is set to position relative. So here's Lex Luther, And then, as we remember, Clark is set to position absolute. So previously here, Superman was inside of the daily planet, which is statically positioned right. We didn't set any special positioning for the daily planet. So here Clark is positioned absolute, and he's able to break out of that element and fly to the upper right corner of the screen . However, when we play Superman inside of an element like Lex Luther, that is actually still positioned relative, what happens is the top right positioning now is now referring to the top right positioning of the relative parent. So what we're seeing is if an absolutely positioned element is not inside of a specially position parent. For example, if it's just regular parent, that's position static by default, it's going to break free from that element and its top right bottom and left properties air going to refer to the top right and bottom left edges of the browser window. However, if that same absolutely positioned element is inside of especially position parent, for example, position relative than those same top right bottom and Left properties are referring to the edges of that parent element. Lastly, in the section Daily Bugle, we have another div inside of it with the idea of Peter. Now here we've set Peter to position fixed top zero and write 120 pixels now fixed positioning behaves just the same as absolute positioning. And we can see then that Spider Man here jumps to the top zero, which means zero pixels from the top of this frame or, in other words, browser window and write. 120 pixels means 120 pixels from the right edge of this frame or this browser window. Now, one subtle difference between fixed positioning and absolute positioning is that when we scroll down in the browser to see the rest of the continent, you'll notice that Spider Man stays fixed in place, whereas Superman, whose only absolutely positioned is going to scroll off the screen there. 58. CSS Z-index: next let's talk about the Z Index property, which allows us to set elements toe overlap one another, and we can control which one is in front in which one is behind. Now, when we start to position elements, it's quite common that they might begin to overlap on top of each other. And if we want to control which one is closest to us in which one is further away from us in other words, which one is visibly on top of or behind the other one? We can use the Z index property, and the higher numbers we set for Z index will appear closer to us or in front. And the lower numbers we set will appear behind. So here in the front, we have an element with the Z index of three. And that's appearing on top of this other element that has these the index of two, which is appearing on top of this other element, which has is the index of one Here we can see a simple code example that illustrates this. So here we have the three dibs with the idea of A B and C, and here we've said all dibs to position relative. We've given them a width and height of 50 pixels, padding of 10 pixels inside of them and a border of one pixel solid. Now, the first of with the idea of a, said the Z Index toe one and given it a red background color. Next, we have a DIV with the idea of B now be has its top property here set to negative 25. Now, negative values are kind of like pulling on the top of the elements. So here, a positive value such as 25 pixels, is actually pushing down from the top of the Element 25 pixels, whereas a negative value is moving in the opposite direction. It's a Ziff. We're pulling on the top of the element 25 pixels from where it was before. Now, because we've given it a Z index of two, we can see that it's appearing on top of the DIV with the idea of A If we were to set a lowers the index number than a for example, a Z index is one. So if we set B 20 which is less than one, we can see that B will then go behind a. So again, the higher the number moves, the element to the front and the lower the number moved the element to the back. So here will bring its the index back to two, which is higher than one, and we'll see that B will pop out in front. Lastly, we have the DIV with the idea of see and hear this, the index's three, which pushes it out in front of the previous element, which only had is the index of two. 59. CSS Backgrounds: in this set of slides will talk about using CSS to style the boxes of your page Elements will discuss the background property for adding color and images. We'll talk about styling borders as well as rounding the corners of your boxes using border radius. We'll also talk about adding drop shadows using box shadow and how to change the opacity of your elements as well as adding color Grady INTs into the background. First, let's look at the background properties available to us. We have background color, which allows us to set a color, and here we can accept values such as color names, Hexi Decimal, RGB, an RGB A. We also have the background dash image property, which allows us to set a background image that will appear behind the content inside of our element. We also have background position, which allows us to reposition background images. We also have background repeat, which allows us to specify whether or not an image inside of the background of an element will repeat horizontally, vertically or not at all. We also have background attachment, which will allow us to keep our backgrounds fixed in place when we scroll in the browser or whether they'll move with the scroll. We also have background size, which lets us set the size of our background image in relationship to the element it's in. And here we consent values such as percent pixels, EMS, or we can even use keywords like contain and cover. We also have the background shorthand property, which allows us to set color images, repeating and positioning all in a single declaration. 60. CSS Borders: next let's talk about styling borders. We have the border size property, which allows us to control the thickness of our borders, and it accepts a value of percent pixels, or EMS. We also have border color, which can be set to color names. Hexi Decimal values RGB an RGB a values and we also have border style, which can be set to solid, dashed, dotted double, which is a double line groove ridge inset and outset. We can also use the border shorthand property, which allows us to combine a value for border size, border style and border color all inside. One declaration here you can see the various border style solid, dash dotted, double groove ridge inset and outset. 61. CSS Border Radius: now if we liked around the corners of our element, we can also set border dash radius. Border radius allows us to set a single value. They will it affect all sides. Or we can also use the properties border dash, top, dash, left radius, border, dash top, dash, right dash, radius, border dash, bottom dash, left dash, radius and border dash, bottom dash, right dash radius. If we'd like to assign values to a specific corner of our box, the first value represents the curve of the X axis. And the second value represents a curve of the Y axis. And here you can see a few different examples demonstrated with different values here for border radius. 62. CSS Box Shadow: Additionally, if we'd like to create a drop shadow, we can use the box Shadow property. The box Shadow property accepts four values. The first value is the horizontal offset. The second value is the vertical offset. The third value is the blur radius and the fourth value is the color that you like the shadow to be. 63. CSS Opacity: Additionally, we can also set opacity if we'd like to adjust the transparency of our element as well as the content inside of it. To do this, we use the opacity property. And here we give it a value between zero and 10 representing completely, see through or transparent and one representing completely opaque. So a value of 0.5 sets it to 50% opacity. Now, for Internet Explorer, the opacity property is not compatible. So instead you have to use the filter property. Here you pass it a value of Alfa and in parentheses you set opacity equal to the percentage , and here the percentage number is on a scale of 0 to 100. 64. CSS Gradients: in CSS. We also have the ability to set Grady INTs if we'd like to fade in transition from one color to another color in Internet Explorer 6 to 8, we use the filter property, whereas an Internet Explorer eight and nine we used the dash M s, dash filter property and all of their browsers. It's perfectly acceptable to use the background property and give it the linear dash, radiant value and here in parentheses. In this example, we're giving it a comma, separated list of colors we'd like to fade Teoh. So here were fading from the Hexi decimal color red to the Hexi decimal color orange. In addition to linear Grady INTs, there's also radio Grady INTs that you can use with just two colors. The code for ingredient is pretty straightforward, but the more colors you have and the more specifics of angle and direction of the feed ingredient code starts to get complicated very quickly. Fortunately, there's a lot of great online tools for creating CSS Radiance, and you search for CSS ingredient here. I'm going to select the first link, which is ultimate CSS, Grady and Generator. But you can see there's many other different ones. You can try. And this gives us a nice interface where we can actually find, tune and adjust the colors here on this Grady int. So the first thing to do is select the orientation of your Grady in here. So we have horizontal vertical diagonal as well as radio, so I'll just do the standard vertical. And if you'd like to get rid of a color, you can click and drag and pull down on the color stops. Clicking and dragging on a color stop allows you to slide them left and right to adjust the overall appearance of the Grady Int and double clicking on the color stop allows you to select a different value. Now, if you hover the mouse under this Grady int window and you click, you can actually create additional color stops and double click to give those colors as well up at the top of this Grady in bar, we have the opacity stops, so here the color black represents 100% filled in. Whereas if we drag this little slider here to the left, we can actually make Argh radiant fadeout to transparency. If we like. Once you get this great looking the way you like. You can see you can copy the CSS code over here in this little window. In fact, there's even a small copy button you can click on, and this will allow you to copy and paste the radiant code directly into your CSS file. 65. CSS Box Styles: next, we'll take a look at adding some box style into a live code example. So here I've created five dibs, and I've given them each and idea of Box one through Box five. And here I've set some default style for all of my dibs, such as setting the width and height, floating them to the left, and here I've given them a border of 10 pixels Groove aqua as well. It's adding a bit of margin and padding. First, let's write a selector for Box one here. I'm going to use the CSS background property here. Well said its value using RGB A to make the color yellow Aiken due to 55 red 2 55 blue and zero green. Now for RGB A. We also apply 1/4 value. That's the Alfa or the opacity. So, for example, if I do, 0.5 will be 50% transparent. Or if I'd like that to be 100% opaque, I can do one for the last number. Now for box number two, this time for the background property, I would like to set not only color but also an image so here will set the RGB value again to yellow. And then if I put a space after the color value, I can use Earl in parentheses to point to the location of an image I would like to place inside of the background. So here will just use a place filler graphic from the web. So I'm gonna open up a new tab, and I'm gonna go to place kitten dot com. And here you can see in order to create a cat of various size, the only thing you need to do is put in the name of the girl and then that size of the image. So, for example, if I do place kitten dot com slash 100 for the width and 100 pixels for the height, it will come up with this cat here, so we'll go ahead and copy this euro for the U. R L. You can either place a relative path to one of your images, or, in this case, we're using the full absolute path by putting an http colon slash, slash and then the domain name, as well as the location of our image. Some other values weaken set for the background property are also, whether or not this image should repeat now by default, all images repeat meaning that if the background image is smaller than the width and height of your element, it's going to simply tile that image. This can be very ideal if, for example, you're using a repeating pattern. Another value weaken set is the positioning. So here I can say top left bottom right or center. So here you can see that the image of the kitty is in fact centered. But it's also tiling because we have it set to repeat, which is the default. If instead we say no dash repeat, it will not tile, and they're only appear a single instance of the image. Some of the other things you consent for. Repeat our repeat Dash X, which will repeat the image only horizontally, as well as repeat Dash y, which will repeat the image vertically. So I'll go ahead and set this back to no repeat. Next, let's move on to Box three. Now for Box three. We're gonna use the same background color with no repeat and center specified, but I'd like to change the dimensions of the image here, so here I'll go to place kittens slash 300 to make it 300 pixels wide by only 90 tall. So in this case, the dimensions of our image our wider and shorter than the dimensions of our element. So if I set the background dash size property, we can adjust the size of the image in relationship to the element it's in. For example, if I said background dash size to cover, it's going to ensure that the top and bottom dimensions of the image are stretched to cover the entire amount of the element. And here it's actually cropping some of the left and right of the image now for box for Let's Change the background size to contain instead. So here we can see the two differences side by side. So when we set background size to contain its making sure to contain the entirety of the image within the dimensions of the element versus cover where were cropping the image on the left and right to make sure that it covers all of the available space for Box five will borrow our code from box for. And we'll just change the four to a five and here for the euro of the image itself. We're going to set it to place. Kitten dot com slash 300 slash 300 also set background size to cover. So here, if we'd like to give some transparency to our cat image, we can use Theo opacity property. And here we give the value between zero and 10 being completely see through and one being completely opaque. Eso if you'd like to do 50% opacity, weaken do 0.5 and that fades our cat out there 50%. Now, additionally, we can set the box dash shadow and this is going to allow us to add a drop shadow onto our element. So the first value here is the horizontal offset. So it's going to offset the shadow five pixels to the right of our element. The second value is the vertical offsets. So here we're going to offset the shadow five pixels below our image. And the third value here is the blur radius. So here will set this the 15 pixels. So it's going to soften and feather the edge of the shadow up to 15 pixels out from the edge of the element. And lastly, the fourth value here is the color of our shadow. So I'll just do the hacks of decimal color 000 which is black. So there you can see our drop shadow appearing on the edge of our element here now. Additionally, if we'd like to around the edges of our box, we can set the border dash radius property and here we'll just give it a single value, which will give it a 10 pixel radius on all corners so you can see it's rounded off 10 pixels of the corners here on each side of our element. 66. Code Along - Part 5: in this next code along exercise, we're going to be adding style to our boxes and backgrounds of our site. Pages were also going to use some special positioning to create a fixed navigation bar at the top of our screen, as well as a way to create an indication of which Page were on by adding active classes to particular links for each page to get started, you'll download the Zip File CEO Dash O five Dash, Navin backgrounds. Dash start dot zip. Then you're going to double click on the ZIP file to extract it. That will spit out the folder for code along Exercise five. And I'm going to move this to the location on my computer where I placed my other coat along exercises, which in my case, is in my development folder. Next, you can drag that folder to your code editor. In this case, I'm using Adam now, additionally will bring up the index page in the browser. So to do that, all right, click on index dot html. We can select show and finder. Then we can right click on it and select open with chrome. Now, the last time we left off we had added some column structure to our pages, and previously we had some background colors filled in so we could see where each column and row was, and I've gone ahead and remove those. So it's all plain white, and we're going to go back in now and add our own textures, radiance and background styles. Now the first thing we'd like to do is I would like to add a new CSS style sheet called Box Style. So I'm gonna right click on the CSS folder and select new file, and we'll call this one box a dash style dot CSS and before we forget, will also jump over two main dot CSS and we'll link to our box style by importing it. And make sure to save mean dot CSS after you've imported inbox style. And then you can close out Maine and jump back over to box style. Here will add a comment at the top of the page, and we're going to divide up the code in this page into a few different sections. One area will be for our backgrounds. Another section will be four hour edge effects, and that will be for things such as drop shadows and rounding the edges. And then we also have an area for styling our borders, which I'm going to call a rules now, under backgrounds here, we're going to have one background that's going to go in between the header which is at the top, and the footer that's at the bottom. And we're gonna fill in a repeating pattern throughout this entire area here behind the rest of our content. Now, to do that, we're going to create a class, and you could name this class anything you want. I'm just gonna generically call it pattern background. And in order to place an image into the background, will use the background property. You are l And here we're going to link to this image in the images folder called Pattern Background. Dodge a pick. So in order to leave the CSS folder will say dot, dot, slash and then, in order to go into the images folder will say images slash and then the name of the file there, which is pattern dash backgrounds, and that is a dot jpeg. Do you click on the image here? You can see what our pattern looks like and you can see that this pattern is automatically set up so that it will nicely. Repeat said the left half is a mirror of the right half, and the top half is a mirror of the bottom half. Now, because background images repeat by default, this is gonna tile for us automatically. One of the nice things about this is the browser is only gonna have to load that JPEG image one time, and it's gonna be able to repeat it an infinite number of times without using up any additional memory or affecting the performance. Next, we'd like to make a background that's going to be ingredient feed inside of our header section and our footer section. And I'm going to name this class gray fade. Now, here I've already generated ingredient using an online CSS radiant generator. And to save time, I've actually copied and pasted the code into this file here called Grady int dot text. So if you double click on Grady int dot text, you can copy the code from that file and that will be copying from lines 1 to 7, and we're gonna paste it here inside of our gray fade class So here we have the background property set with a linear ingredient that should work in any browser old and new. Next, we're going to create a generic class called White Phil that's going to simply set the background color of white certain elements. And we're going to have kind of a transparent version of this, using the RGB a value. And here will also do the color white by selecting 2 55 which is the highest number for red , green and Blue. But here we're gonna do 0.85 which is an 85% opacity. Next, let's move on to the edge effects section. So again, I'm just going to arm myself with a group of class names that I can apply to any elements that I'd like to effect our style in a certain way. So, for example, if I want around the edges of an element, I'm just going to create a class called round edges and this one I'm going to said, the border dash top dash left radius to round the top left corner of elements that have this class, and I'm going to round that corner by five pixels now. Additionally, I also wants around the border dash bottom, dash, right corner radius, five pixels as well. Additionally, I wanna have some drop shadows on certain elements. So I'll just create a generic class called Shadow for that. And here we'll use the box stash shadow property and here will set it to be zero pixels for the horizontal offset and two pixels for the vertical offset and four pixels for the blur radius. And the color of our shadow here will be black. Next will create some styles for our line rules or, in other words, the border edges. So at the very bottom of the screen, where are footer is remember inside the foot or we're gonna have that that Grady int that's fading here and at the very top edge of it. I'm gonna make a highlighted edge. So we're gonna create a class to do that called highlights edge, and this is going to get a border dash top and here will set it to one pixels solid white. Next, we're gonna create a class called Left to Rule, and this is going to get a border dash left, which will be one pixel dotted medium grey additionally, will create a light blue cap rule as well as a regular blue cap rules. And both of these classes here are going to get a border dash top property and there will be five pixels solid. And we'll give these each of different RGB color so I can copy this code. And the only difference between these will be the RGB value. I've gone ahead and already figured out the values for this, which are 1 28 1 69 and 1 59 for our light blue color. And our regular blue color is going to be 79 104 and 1 40 so we can go ahead and save that now. There were armed with all of these classes. Weaken, jump back into our HTML pages and apply them. So first I'm going to go ahead and go over to my index dot html. Page will go into the first Div, which is acting as a fluid container at the top of the screen. Remember, that's making a stretch 100% across the screen, and we want to add that gray fade background color to it. Remember, Gray Fade is creating that background color Grady Int and additionally, we would also like it to have a shadow underneath. It will say gray fade shadow. So if we save the index page, we jump back to the browser and we refresh there. Now you can see that Grady in color with our drop shadow appearing. Next, let's go down to our main section here and just above that main section, I've created a div to wrap it that's going to have a background pattern. So here we can give this div a class pattern dash background and remember that is going to link to our pattern background JPEG image here. So if we saved the page and come back and refresh, you can see that pattern repeating there. So one thing you might have noticed is that once we added this background pattern, it's a little bit harder to read the text inside of each of our sections now. So in order to correct that, we're gonna actually add a white filter each of our sections. So here, under this first section, with the splash image inside of it, let's go ahead and add the class of white Phil and remember that is the class here that's just adding a background color of white now. Additionally, besides White Phil, we'd also like to around the edges of this element. So we'll say round edges to add that class, which adds the border radius styles to it. And we'd also like to add a shadow here so its good and save the index page and jump back to the browser and refresh, and you can see here around our splash image. We've rounded the top left in the bottom right corner of the element, and we've put a nice drop shadow there. Let's go ahead and add these styles of white Phil round edges and shadow to our other sections. So here this is our column Dash eight for the vintage bicycle safety film. We'll just go out and paste in the white Phil round edges and shadow classes to that as well. Now, additionally, I'd also like to give this one the light blue cap, a rule class which will add a light blue line to the top edge now for the column. Dash four will also paste in the white Phil round edges and shadow class, as well as the light blue capital class. Now, if we come back to the browser and refresh here, you can see that light blue cap color at the top of our elements. You can see the white background fill that we've added as well as the rounded edges. Next, let's work on this footer. So if we scroll down to the footer here, you can see just below the closing of our pattern background. We have a container dash fluid, which is stretching a bar 100% across the screen. That's surrounding our footer there, which is centered in the middle using container. So this container dash fluid. If here we're gonna also give it a class of gray fade, just like we did the header at the top of the screen and additionally were also going to give it highlight edge. So we'll go ahead and save and come back and refresh. And there you can see this little white line. On the edge of there is the highlight edge, and you can see the gray fade from a light grade to a whiter color here, down at the bottom of the footer. Now, one more thing we'd like to do for the footer is in order to make thes sections inside of the foot or pop a little bit more, we're gonna add the white feel class to them. We're also gonna add the left rule to make a little light grade dotted line on the left edge of each card. So to do that, we're gonna go into each section inside of the footer and we're gonna add White Phil and left rule so you can actually copy those two classes and well paced those into each column Dash three here inside of the footer. So go ahead and save the index page and will come back to the browser and refresh. And there you can see that white background appearing as little cards on each of our different column. Dash three sections and it's subtle. But there's actually also a little dotted gray line using left role here. So since the header and footer are going to be the same on each page, we can go ahead and transplant that code then on each page. So I'll start by copying from the container fluid if all the way down to pattern background , and this is also going to be the same on each page. And then I'm going to jump over to my contact page and will highlight everything from the container fluid all the way down to the opening differ pattern backgrounds. And we'll just paste that in and we'll do the same on the products page as well. And then for the individual products pages. We just have to remember that when we paste this in will have to reinsert the dot, dot slash before each of the links here and now we can copy that block of code for use on all the other individual products pages. So we'll go to dot html and will replace that as well and also on three dot html. Great. So now we just need to grab the footer off of the index page. So just start copying from the container fluid div all the way down to the bottom of the container fluid there just before the closing body tag, and we'll update that on all the other pages. So we'll go to contact and we'll also do it on the individual products pages. - Okay , so for all that copying and pasting, mostly we were just adding these additional classes for white Phil and left role there. Now we can go back in and add some classes to the individual pages, so back to the contacts page there. Now, if we scroll down to the main section under the first section that is holding our form, it has the class of column Dash five. We also want to add a white Phil here as well as a shadow as well as the round edges class . And we'll go ahead and add the white Phil shadow and round edges to the next section as well, Which is the column Dash seven section that is holding the map. So we'll go ahead and save the contact page and let's jump back over to the browser and click the link to contact. Here, you can see the greedy int on the header the footer, the white Phil on the cards, the white fill the shadows and the rounded edges here on my two sections inside the contact page. Next will move on to the products page, which is a little bit more complicated now on the products page, inside of the main element with the class of container below that we have a div with the class of Roe now inside of this first row, I'd like to give it a shadow, and I'd also like to set it to round edges, and I'd also like to set it to transparent. So instead of a white background color, it will have a faded or semi transparent. In our case, it's actually 85% opaque, so we'll go ahead and save that, and then we'll go over to the products page. So this is looking pretty good. We have some see through transparency here so that we can see the pattern here behind this row. Now. One thing that's bothering me a bit is that Theis headings here with the thes air Age two's with the class of headline. As you can see here, this has its margin top set to zero. So what's happening is it's getting stuck right up against the edge of this row. We're going to go into box style, and just below are transparent class. Let's go ahead and add another selector that says dot ro dot transparent, which essentially says that if an element happens to have a class of Roe and a class of transparent, we actually want to set its margin. Dash bottom 2 20 pixels. Who hadn't saved that? And then if I come back and refresh, you can see it adds 20 pixels there. Next, let's add some styling toe are sections here for each of the products below. So here, inside of our future picks for each of these sections that air column, dash sixes, we're gonna add the same classes to each of these. So I'm just gonna click and hold the command key and click again to create multiple cursors . And then I'll type in that they should both have a white Phil. They should both have shadow, and they should both have round edges. Additionally, I'd like these guys toe have the light blue cap rule. Let's go ahead and see how this looks for our 1st 2 products in our future picks. Or you can see the styles are appearing. Next will work on the all bicycles section. Now these will get similar style to the featured picks above with one difference. So we could actually copy all of those classes from white Phil shadow around edges and light blue capital, and we can copy it and paste them onto each of these column dash threes here, However, instead of a light blue capital, these air gonna have the darker blue color. So it's just called Blue Cap Rule for that class so we can copy this and here I'll just do multiple cursors again. And that's gonna be the same case for the next row of products as well. And that's actually also going to be the case for the gear in apparel section. So here we can hold command and click for all of those columns as well, and we'll just scan back up to make sure we didn't miss any looks good. And then we'll just hit space bar and paste and to paste in all of those classes. So all of these sections here are getting white Phil shadow around edges and blue cap rule . So if we go in and save the products page and refresh, we now have a little white card for each of our products there. That's standing out from the background and that's looking pretty good. Next will work on the style for the individual products pages here, so I'm gonna go ahead and bring up one dot html inside of the products folder, and we've already copied and pasted in the code for the header and Footer. So we just need to scroll down into the main section here to style this. So firstly, we have a section with a class of Roe and we want to make this guy filled in white. So we're gonna use White Phil. We're also going to give it a shadow as well as round edges. Now, inside of the section, we have the two dibs the column for in the column eight on the column native that has the class of product details. We'd also like to add a class of left rule to make a great dotted line on the left hand side of this element so we can go ahead and save the page and we can come back to the browser and refresh. And here you can see that left rule is drawing a little thin line in between our picture and the product details. Next, we'd like to add a background color to the headings on these tables here. To do that, we've already created a table dot CSS file so we can bring that up, and then here for the table header after border dash bottom, we can create a background style, and here we're gonna set it to a hexi decimal color that I've already looked up ahead of time. And this one is F F D B 58 which is kind of a mustard color. So if we save that and come back and refresh here, you can see that mustard color appearing for the headings on the table. Next, we'd like to add a style toe our buttons throughout the site. So one place we'd like to add it is this. Add to cart button here on the individual products pages as well as on the contact page. We also have a submit button there. In order to do that, we're going to go into our form dot CSS file that we had written previously. And here we're going to create a class of B TN that we can apply to all buttons and here will give it padding of 10 pixels inside of the button and here will give it a border of zero. Next, we're going to create a class to accommodate a specific style of button. So here we'll call this one BT N. Dash primary, which is going to take care of most of our buttons. And here we're gonna give it a background color and here will set it to RGB 79 104 and 1 40 Next, we'd like to create a hover state to our buttons. So any button that has a class of primary that were hovering on we'll have a backgrounds of RGB 1 28 1 69 1 59 So here we're changing the but in color on hover. And here we're using the colon hover pseudo class selector just after our dot primary button class. So the nice thing about breaking this up into two different classes dot b TN for all buttons and dot BCN primary is that if in the future we want of additional buttons that air styled slightly differently, for example, let's say we had cancel buttons. We could then create a class called like button cancel, and we could set it to have a different background color, for example. Now the nice thing about this is that all buttons will have padding and no border, but primary buttons will have this background color and cancel buttons would have, you know, a different background color. In our case, we're just going to do the button primary for now. And in order to ah, apply this to a But now we need to apply both the class of BT n and the class of BT and Dash Primary so we can start by going over to our contact page. And then we're gonna go down to our submit button here, and we're going to give it a class of BT n and also a class of BT N Dash primary. And we can copy that class attributes there, and we're gonna jump over to the product's pages. So here at one dot html, we can go down to our button here that says, add to cart and we can paste in that class of both button and button primary. So it's good and save one dot html and we'll come back to the products page and click on the first product there. And now you can see that on the first Products page as well as on the contact page, we can see the natural state and the hover state for a button. Now let's said like this to be more of a subtle transition, where instead of immediately switching colors, it actually faded in order to create a subtle fade from one color to another. In CSS, we can simply go to the class of button primary and use the CSS transition property. The transition property accepts two values. The first value is the specific CSS property that you plan to have the transition on. In this case, I want the background property to transition. So here you can set the name of the property that's going to change, and then the second value is the duration of how long it will take to change between the two background colors. In this case, one s stands for one second. Now, if I wanted to transition on more than just one property, for example, if I was changing background color and maybe like the width or height of the element, then you can also specify all by saying transition on all property changes. In our case, since we're only changing the background, we can just leave it at background and one s. So let's go ahead and save and come back and refresh. And here you can see that now. The buttons getting a nice fade that takes one second, and it's also working there on the products page. Now we just need to transplant these styles over to our other products pages. So here will copy the classes of White Phil shadow and round edges. We'll jump over 22 dot html and will give that first row. The class of white feel shadow and round edges will also add the class of left rule to the product. Details. Div there and then, lastly, down here on the button, we'll add the classes of BT N and Bt N Dash Primary. Same thing on three dot html Here will go down into the first row on that section inside of the main container and will add the white Phil shadow and round edges classes inside the product Details column eight There will add the left rule and then down here on this button , we'll add the class of BT n and B T N Dash primary. So if we go ahead and save and refresh, we should be able to go to each of the product's pages and see the styles next. We'd like to create a visual indication to the user of which page they're on. For example, if I click from the home page to the products page, I'd like some visual indication that we're now on this products page here. Or if I click the contact link, I'd like them to know that they're now on this contact page. So in order to do that, we're gonna use a thick colored line here at the bottom of each link that lets the user know that that particular link is active. To do that, let's jump over to the knave dot CSS file that we created previously. And here we're going to create a class of active and we're gonna use the colon after pseudo class selector to say that we're going to create some content here in this case will just put a blank keyboard space that's going to appear after all of the content inside of the link that has the class of active and will set that content to display block. And we're going to give it the background color of yellow and we'll set. It's with to be 100% wide, and we're gonna set its height to three pixels. So it'll be as white is the link text and three pixels tall. Let's go over and take a look at it in the browser. Now to see this appear, let's go to the index page and scroll up to the main navigation. And now let's apply a class of active to this first link Yer. So when we're on the index page, we wanna have this active class applied to the link. It says Geo cycle. So here, inside of the opening tag of the first link, we're gonna go after the I D and put a space in here will say class equals active and we can go and copy this, and we can apply this class of active onto the other links on the other pages. So, for example, on the contact page, if we go into the main navigation here, it's actually the contact link here that should have the class of active so well paced the class of active under the opening a tag for the contact link on the contact page and on the products page. We will pace that class onto the opening tag for the link that surrounding the word products and we can do the same thing for the individual products pages. So here on the one dot html page will also keep that class of active on the products link, and we'll do the same thing for two dot html. So I'll scroll over and we're going to apply that class there as well. And lastly, we'll move it on to three. So we'll make sure to save all those HTML pages and we'll come back to the browser and refresh. And now we can see that there is a yellow line underlining the page that were on. So on the home page, I gave this geo cycle length the class of active on the products page. I gave the products link a class of active and on the contact page. I gave the contact link the class of active. So now we can see a good visual indication of which Page Ron. Now, one thing we'd like to do is add some spacing in between the link and this yellow line. So in order to do that, I'm gonna come back to Adam and click on knave dot CSS And here I'd like to change it its position to relative by using relative positioning. I can now refer to the top left bottom or right positioning of this element, and I can move it relative to where it used to be located. So if I say top 20 pixels left zero, what I'm doing is I'm leaving the left side alone, but I'm pushing down on the top edge 20 pixels. So let's go ahead and save this and come back to the browser and refresh. And now you can see a nice amount of space here between this highlight line and the link. The next thing you might notice is that when the user scrolls down into our content, they lose access to those links at the top of the screen, and I'd like my user to always be able to switch pages easily. In order to do that, we're gonna set this knave bar at the top of the screen. Two position fixed. So let's actually jump back over to our layout dot CSS file and at the bottom of leo dot CSS. Let's create a new I D called menu bar, and we're going to set its height explicitly to 58 pixels and we'll tell it's with to be 100% wide will set its positioning here to position fixed. That way it will stay fixed in pla