PSD to HTML 3.7) Styling the Body Text

Previous: PSD to HTML 3.6) Arranging the Social Media Icons

Next: PSD to HTML 3.8)  Preparing the Featured Icons

PSD to HTML Complete Course

Transcription of PSD to HTML 3.7) Styling the Body Text

hello and welcome back to the PSD to HTML responsive portfolio built we’vemoved everything into a new folder so all the changes we make in this lessonwill be saved in these tight 12 folder and I want to tackle some of the textsyear women take care of our HeaderText up here at the top and then this designservices section because those are both pretty simple sections that we need totake care of so we’ll start with our header at the top so let’s take a lookat that near Photoshop file we always need to compare our work to herPhotoshop file to make sure that we’re on the right choice and even thoughwe’ve chosen different fun to use on the website we still want to try to get itto look somewhat similar as far as the font styles go and we can see that thisfox I’ll here is much lighter are much thinner than the Fox I’ll here andthat’s because by default and h1 tag orange 3 tag is going to be bold solet’s take the bold off of those and see how that works let’s jump back into textme here or whatever text editor you’re using and we have our main navigationsection here let scroll down to the bottoma couple lines and create a new comment section called header just so that wecan easily find a different sections in our CSS file and I was like to do thatand enter header first of all I want to style the h1 and h3 tags so we’re goingto point to the header element because remember if we go back to our each teamwill file and scroll down to our header were using a header element here so wehave our opening and closing header tags and then inside that we have her h1 andh3 and her header has been given a class of container which will give it thatsame width as the rest of our content so now I want to go into the h1 and h3 forthe header element and figure out what styles we need to play some of those sogo back to style that CSS and so we’re going to point to the header elementdon’t accidentally put a dot in front of that this is not a class named this isan element so I’m gonna points in the header element in the h1 tag within theheaderlet’s go to the each Freitag within the header element as well so we have thiscomma-separated list were going to apply the following styles to the each onetags inside the header element and the h3 tags inside the element so what we’regonna do for both of these is simply set the font wait if you can’t spell itright to normal save that and refresher page and that already like the textquite a bit and I really like the way that looks so then we need to adjust thecolor so if we go back to our Photoshop file here we can see that the text hereas kind of a like red color to it so many hit in Photoshop to switch to thetext tool in the just click anywhere inside the text field and we can come uphere to the top and we have our hexadecimal value hereefore 6965 so I’m gonna copy that and we’re going to use that in a few placesso what I’m gonna do just for now is gonna come up to the very top and I’mgonna create a comment here that says read texts and we’re gonna set that readtext color were just gonna paste that hex value that we use for that read textcolor so that easy to find in fact I might just to make the solute clearlymeant to say read texts and in this value that way we don’t have to jumpback and forth into a Photoshop file every time we want to grab that coloragain and we don’t have to search up and down all throughout our CSS document tofind it we could just find it up here that topped to read text here to do thesame thing for the a great color that we’re using for the rest of our textswhich is right here 777 so we come down here and we can say great text equalspound 777 and that’ll be a good way to keep track of all the colors are usingso let’s grab this color sheer copy it and we’ll go back down to our headersection in this red color for headers just going to apply to the h3 tags onscreen a new rule herethat applies just to the h3 tag within a header and let’s get that color so colorspace and then we’ll pace that value we just copiedjumped back into chrome and refresh and their ego so now when it just this sizeis a little bit what this text to be a lot larger so let’s jump back into ourcode and let’s make that happen so for each one time we’ll put it before theeach three since it comes before the each three Tek so far h1 tag inside herhead I won’t be fun size here to be 44 pixels and then for h3 it’s gonna bequite a bit smaller let’s give it a fun size 20 pixels and let’s see how thoselocal save that jump back into our file and refresh your page and their ego thatlooks a lot better so now let’s center align text and we should be good to gothere so for both of these the h1 and h3 we’re going to align the texts of thecenter so will set the text have an online property to center save itrefresh your page and their ego much the only issue if we go back to ourPhotoshop file is we have a little bit of spacing in between the text field andour navigation bar so let’s make that happen right here so let’s go into ourCSS here and for the each one let’s try adding a margin top property to its amargin hyphen top let’s set it to 10 pixels from now say bad refresher pageand manages it down a little bit let’s bring that up to 20 pixels and their egothat looks a lot better so let’s also do 20 pixels bottom padding or bottommargin excuse me on the h3 tag move all the content below it down a little bitso we’ll come down to the beach three rules and said margin hyphen top topbottom 220 pixels say that refresh and we see that in just this content heredown a little bit it’s kinda hard to tell them but when we expand thatfeatured content out and pulling her imageswill see that spacing it should look pretty good so then I want to go aheadand tackle our design services here over at it and our Design Services section isa good representation of what most of the Texas on our website will look likeif we have a bunch of text on a website or so in that section if we go to textme jump into our HTML file and scroll down past the feature section here isthat article with the class of body text and it’s all contained in this sectionhere so we can do one of two things if this text is going to represent thedefaults text from this server website didn’t we don’t need to target this bodytext class instead we can just target the h2 element and the P element now isthere something we wanted to specifically apply to this particulararticle at this particular section then we would need to target that body textclass but for all intents and purposes this text is really going to representwhat the Texas supposed to look like on most of our site so let’s just get therules for the each to tag and the paragraph tanks so we’ll jump into sightthat CSS and since we’re doing these this particular rule for the full textfor entire site we don’t want to include it in the section like header ornavigation and said we’ll include it up here at the very top so maybe just belowcontainer or actually a suit just above containers so good to create a rule forh2 element and here we’re going to set our color to that same red color we usedbefore appear so we can just copy that and he said don’t hear what’s also setour fun sides for these for these h2 tags 240 pixels will set our fund waitto normal because the bold for this text is a little bit thicker than I wanted tobe and put some top and bottom margin on it because remember up herewe collapsed all the margins for all of our heading tags or paragraph tags arelist items etc so we need to apply some top and bottom margin here to give it alittle bit of spacing above and below those each Tues so it’s set our marginproperty here to see fifteen pixels space0 that will set the top and bottom margins 215 pixels and the left andright margins 202 and see how that looks will save that jump back into our Designrefresher peach in there we go now are each Tues or nice and bold and looksgood so now that we’ve gotten some of the text items out of the way we canmove on to the next video where we’ll start putting together our featuredsection so thank you for watching you know CNN