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

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Jonathan Grover, Developer / Designer / Creative Technologist

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

75 Lessons (6h 29m)
    • 1. Computer Setup

    • 2. How The Web Works

    • 3. Web Terminology

    • 4. Site Organization

    • 5. HTML Syntax

    • 6. HTML Document Structure

    • 7. HTML Text Formatting

    • 8. HTML Lists

    • 9. HTML Tables

    • 10. HTML Forms

    • 11. HTML Images

    • 12. HTML Links

    • 13. HTML Iframes

    • 14. HTML Grouping Elements

    • 15. HTML Semantic Elements

    • 16. HTML Comments

    • 17. HTML Depricated Elements

    • 18. HTML Validation

    • 19. HTML Reference

    • 20. Code Along - Introduction

    • 21. Code Along - Part 1

    • 22. HTML Validation

    • 23. Developer Tools - Part 1

    • 24. CSS Syntax

    • 25. CSS Formats

    • 26. CSS Type Selector

    • 27. CSS ID Selector

    • 28. CSS Class Selector

    • 29. CSS Compound Selector

    • 30. CSS Descendent Selector

    • 31. CSS Child Selector

    • 32. CSS Universal Selector

    • 33. CSS Attribute Selector

    • 34. CSS Pseudo Selector

    • 35. CSS Inheritance

    • 36. CSS Authority

    • 37. CSS Comments

    • 38. CSS Color Values

    • 39. CSS Typography

    • 40. CSS Web Fonts

    • 41. Code Along - Part 2

    • 42. CSS Validation

    • 43. Developer Tools - Part 2

    • 44. CSS Box Model

    • 45. CSS Box Sizing

    • 46. CSS Layout Types

    • 47. CSS Overflow

    • 48. CSS Display

    • 49. Code Along - Part 3

    • 50. Developer Tools - Part 3

    • 51. CSS Float and Clear

    • 52. CSS Clearfix

    • 53. CSS Simple Float Layout

    • 54. CSS Custom Grid System

    • 55. CSS Using Third Party Grids

    • 56. Code Along - Part 4

    • 57. CSS Position

    • 58. CSS Z-index

    • 59. CSS Backgrounds

    • 60. CSS Borders

    • 61. CSS Border Radius

    • 62. CSS Box Shadow

    • 63. CSS Opacity

    • 64. CSS Gradients

    • 65. CSS Box Styles

    • 66. Code Along - Part 5

    • 67. Responsive Design

    • 68. CSS Media Queries

    • 69. Responsive Media

    • 70. Responsive Type

    • 71. Responsive Layout

    • 72. HTML Meta Viewport

    • 73. Responsive Support

    • 74. Code Along - Part 6

    • 75. Site Publishing Using FTP

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


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!


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.


Jonathan is the Founder of 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, teaching, creating tech-art, and working as a freelance web developer.


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


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

Meet Your Teacher

Teacher Profile Image

Jonathan Grover

Developer / Designer / Creative Technologist


I'm a web designer & nationally recognized digital artist with over five years of teaching experience in creative programming, interactivity, web development, circuitry & DIY electronics. I received a BFA in Graphic Design from the University of Akron and an MFA in Design & Technology from the San Francisco Art Institute. I've held instructing positions at the San Francisco Art Institute, Pittsburgh Art Institute, 3rd Ward, and General Assembly. Currently, I serve as a faculty member at Flatiron School, a NYC based immersive style web development program. My interests include creating interactive artwork, programming, building things, animals, travel, and scuba diving.


See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


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