Video instructions and help with filling out and completing Form 5495 Sites

Instructions and Help about Form 5495 Sites

Welcome to part five of the dharma yoga website series in this video we're going to start the main website CSS style so this will be one of two for the full width CSS and then the last video will be our CSS for the responsiveness in the media queries so let's go and open up the style dot CSS document that you downloaded in the starter files I'm gonna keep index.html open so I can go back and forth and show you exactly what we're styling from the HTML and referencing in the CSS so the first style that will give is for the HTML document itself this is going to be called a reset style so when you make a website and if you've seen the source code of some websites you're gonna see a giant block of Styles at the very top and what that is is a reset so ours is going to be pretty simple a reset tells the web browser to do away with margin and padding and just start from zero in case there's anything that the web browser wants to push on the website like inherent styles so let's give our first style the reset margin zero border zero and padding zero okay so this we won't see any real effect on the document right now but let's move down to the body section so we started with just the HTML document itself and now let's style the body so you just want to write body and then in our swirly brackets we're going to give it a background color so if you remember the background color here is it's like an off-white sort of yellow color so we'll give it a background color of f e F BEF so if you're unfamiliar with this type of color value these are called hex colors so it's it's really good to have something in your web browser I use a hex color tool in Google Chrome here or you could just do hex color chart Google search and you'll find something where you can select your colors okay so next let's give it its font family and we're going to use the quicksand font from the google fonts so just write quicksand and this is a sans serif font so if the web browser doesn't recognize quicksand the next-best font will tell it to use is sans serif and then we'll give the font its size so if we go ahead and refresh we'll already see a little bit of effect and there goes our font into this nice little rounded font here that I selected okay and by the way we won't see that background color in effect yet because we haven't styled the rapper so everything is displaying at 100% of the width because we haven't given its wrapper yet so we'll give it a font size of 18 pixels and then if you refresh the fonts a little larger here so with font you can use pixels percentage m and point if you like I typically will use pixels for fonts and then for page elements I'll use percentages for Responsive which is really good for responsive websites so you can use percentage if you want for fonts but when you use percentage you want to add an inherent pixel font size to base the percentage off of so if it's an 18 pixel font size that you add in the reset for example and you make it 200% it's gonna be a 36 pixel font size okay so now let's style the heading one and we'll give it its font family so it's going to be that shadow shadows into light to Google font okay and then we'll just tell it to use a cursive style after that and if we refresh our heading ones up here we'll turn into this cool looking shadows into light two font style now as you remember the heading ones are in the center of the page so we'll just tell them to text-align:center and if we refresh they'll move over to the center of the page so there's our four heading one tags we use and see even that one is centered in the left call section so now let's drop down and give that a font size so I'm going to use percentage in this case so this will be 175 percent just to show you and then let's do a text transform or color first rather and we're going to give this a hex value of seven eight c 0a eight and now the text transform so if you remember I said don't worry about the upper case this is how you make all the characters uppercase with the text transform so let's refresh and now we have the color and the uppercase letter so it's looking very similar to the finished product next let's add a little spacing between the letters so we want to write letter spacing and I'm gonna give it a spacing of 3 pixels so here you could also probably do 2 or 3% if you want to go that route but I'm just gonna stick with the pixel and now let's give it some padding so we'll want to tell it that we want padding top 3% padding right zero padding bottom 3% and padding left zero so it goes top right bottom left it's clockwise and let's go ahead and refresh our page and we'll see the padding taking place so now we have a little bit of space at the top and bottom of the heading one tags okay so let's drop down and style the rest of the headings so we'll want to give our h2 h3 and h4 tags their style so write h2 comma H to our sorry h2 h3 h4 and then let's give it the same font family it's gonna be that shadows into light two