PSD to HTML 3.1) Creating a Style sheet

Previous: PSD to HTML 2.5) Structuring the Footer

Next: PSD to HTML 3.2) Typekit and Google Fonts

PSD to HTML Complete Course

Transcription of PSD to HTML 3.1) Creating a Style sheet

hello and welcome back to the PSD to HTML responsive portfolio build now that we finished up our HTML as you can see we’ve got a lot of work to do to makethis site look goodwe’ve got our content out of the way but now we need to work on the design soagain we’re going to refer a lot to our Photoshop file as we start building thesouth will you need this to determine what thoughts were going to use forcertain areas what colors were going to use what sizes were going to use whatimages were going to use and we’re also gonna be cutting up certain parts ofthis file in order to get the images that we need but in this video I want tostart by getting our style sheet up and running so it’s jumping back into textme here and I’ve moved everything into a new folder so all the changes we make inthis lesson will be saved in the site and 06 folder but are starting fileshere are the files that we ended up within the site 05 folder so that’swhere we’re starting but again all the changes we make will be saved in sight06 so we’ve created our index HTML file now we’re going to create our CSS fileso if you’re using text me like I and we can just come over here to our sidepanel right-click on our site folder and a folder this ways we can create a newfolder and I’m gonna call this styles and then we can right click on thatfolder and create a new file and we’ll just call it how I don’t leave it thereand call it styles . CSS actually might call itsite CSS and Lucy that in these styles folder so in our site that CSS file filewe can start creating some some basic CSS resets we can create a recent forthe HTML element body UL’s allies of our H tags each one through age sixas well as image tags and paragraph text just to get rid of some of thedefaulting borders and padding so that we can customise that how we want to soconsider margins for all of those 20 and her padding 20 also appear above themargins and paintings and I’m an asset or font color and we use kind of amedium dark gray color for our fund of pound 777 and if we go to our Photoshopfile and let’s take this header text for example we can zoom in on that and thentab to get our toolbar is back and we’re gonna come over to this toolbar on theleft and grabbed the color picker there and then just however our color pickeror eye dropper tool over some of that text and there we see that value of 777777 if we go back to our CSS we can write that in shorthand just using 37 sothat’s our text color there and what’s goin center font family as well andwe’re using aerial for Army in paragraph on Soyuz aerial and then we’ll put acouple of backup funds in here Helvetica and sans serif I also wanna set thedefault font size but we don’t want to set that default size for all of theseif for example we want to set our fun size 240 pixels and we do it here thenall of our age once in each twos and threes etcetera will all be fourteenpixels and that’s not what we want we want those to be large so we’re justgonna skip down skip a couple lines and for the bodywe’re going to set our fun size 240 pixels that way some of these itemsinside the body will still have some relatively larger font sizesso do that and let’s take a look at this but before we can get this working infact if we were to view this now in a browser refresh your page you’ll seethat nothing changes at all our texts still black and the reason for that iswe haven’t linked up to that style she lets go back to our code and we’re gonnago over to our index HTML file in the head of our document we need to link tothat style she tank using a link element so just after that I’ll hit enter to goto the next line I’m gonna cheat a little bit because I can’t in inTextMate if you just grab that site that CSS file here and we need to make surethat we keep index HTML select and we just grabbed site’s css in drag it overhere you’ll see that it drops in our link tags for us so we have linkedrelations stylesheet href equals and then the location of that file typevehicles Texas as media screen etcetera etcetera etcetera and so we just droppedout in there I’m gonna actually get rid of all of this media title and characterset and just leave it as is so there’s our link tags for style sheet so now wesee that and jump back into chrome refresh your page now we can see a fewthings have happened first of all the margins and padding have been taken offthe page and our texts now right up against the edge of the of the browserwindow and a text is now that light gray color also our text is now aerialinstead of the default serif font that we saw beforeso we’ve gotten a good start we know that our style she is hooked up andworking properly so now as we move forward we can start stealing our siteto make it match our Photoshop file so we’ll get started with that in the nextvideo thank you for watching