Alright. In this video we're gonna look at how  to get something called the CSS out of your document. The web developer is gonna say, what color is this? What size is this? What font is it? What's the spacing between the lines?

And you could go through with your type tool  and write them all out and explain what they all are. A nice little helpful thing you can do  to make it a little easier for them is to export the CSS. Now, let's say that they wanna know what font this is  and what font size it is. So what we can do with my cursor, I can find it in my,  there is who we are  and with it selected is one in here that says Copy CSS. If I copy CSS, nothing seems to happen. Okay?

What it's done is it's copied it, um, to your clipboard. Like you've gone to edit copy. Now you can open up any text editor word  or chuck it in an email and hit paste. Okay? And what it's done is that it's set, it's got,  it's created this class along the top there,  which we probably don't need. And it's got a lot of the important stuff like font size,  font, family font color, the font weight,  the line heights, okay?

Whether it's centered and this type of thing. Okay? Position left top centered to developer. Anyway, they're probably gonna ignore all this. And if you are a web designer, you'll just know what  to pick out of this and what you don't need. Now, I could explain to my web developer  that the hero heading text is this  and they'll be able to use their magic web design skills  to style their text  to make it match exactly like your Photoshop mockup.

Okay? So let's look at doing it for some  of the structured parts, uh,  like this navigation box at the top. 'cause what we need is maybe the height  and we need what color it is  and what the alpha transparency is or the opacity is. So I'm gonna select them. Here's my nav bar. I'm gonna go up to layer.

I'm gonna go to copy CSS  and I'm gonna jump into Notepad. And this is gonna be my nav bar. Nav bar, okay. I'm gonna hit paste. There's bits they're  gonna be able to use in bits. That's not, if you are not a web designer  and you have no idea what this junk is,  just send them the whole lot and they can pick through it.

I know that we don't need the class  and we'll use the background color. We'll use the opacity, but we don't need any of this,  but we do need the height. Okay? So those are the things I'm probably looking for  as a web designer that I need to go in style  to make sure it's the same. And it just takes a lot of the guesswork out of me  as a web developer to say, Ooh, it's about that high,  and it's, Ooh, it's about that transparency. And to send it back to you as the designer for you  to come back and say, Hey, it's not the right one.

And lots of toing and froing. This'll help remove a lot of that. And that's one of the nice new features. And Photoshop cc, if you're using CS six  or CS five, unfortunately it's not a feature for you. You're gonna have to do a lot more of the toing and froing  and typing out  and explaining what the font is, what the font size is,  what color it is, what a passi it is,  and labeling that out for them. Or if they have some Photoshop skill themselves,  they can go into it and do it.

All right? That's exporting Cs S from P.