Hi there. In this video we're gonna look at exporting some  of the code from Illustrator. Ooh, code. Okay. If you've never used code before,  and this is something that'll be really helpful  for the person building your site. If you are going to be building your site,  this is gonna be super helpful for you.

Okay? So what we'll do is  we'll look at the different elements. We'll do a couple of them, but the, the rules are the same  for Yeah, for lots of it. So what we're gonna do is we'll start this  heading 'cause it's the biggest and easiest. So with it selected, go to window  and let's go to CSS properties. Okay.

And the cool thing about this is  that it's gonna tell us lots of the CSS characters. So I'm gonna drag this property panel out by just,  you can see here, I kind of just grab the top of the tab,  the word there so I can see it all. Okay. And what it's gonna tell me is it's gonna tell  me interesting stuff about the font. It's gonna tell me what font family it is, uh,  whether it's bolds, uh, what size it is, the color it is. This is the kind of stuff  that a web designer will love, okay?

Because instead of you just giving them that PDF  that we made earlier and saying, guess the font,  guess the size, guess the color. And they'll come back to, you know, say they build your site  for you and you are like, geez, what font is that? Who used Comic sands? Okay. And they've used regular instead of bold  and all that stuff that you've spent  at age trying to work out. And, you know, so it'll be 80 pixels or 81 pixels.

You can actually tell them. So  what you can do is you can grab them, copy them,  and start building up a kind of a spec sheet. So you can say Desktop. Desktop. And this one here is going to be my, okay,  this is gonna be my, I know it's called an H one,  but you might just call it something like a heading. Okay.

And delete anything you don't like in there Okay. Or adjust it. But this is gonna be my main heading. Okay? If you're a web designer, you'll know a few. You'll be able to give it things like class names okay.

Or tag names. Okay? But it's up to you really. And the cool thing about it is I'll have a  desktop version, okay? And what I'll do is I'll have a mobile version as well Okay. Of the exact same thing.

Okay? But over here when I select it, okay,  can you see it is the different font sizes. It's got everything here. Great. Okay. Mobile is gonna be this.

Okay? So it's the exact same. So he knows that this is my heading one,  my main heading, okay? And the difference is still, uh, play fair,  still bold, but it's this size. Now, one thing to be aware of is that great,  it's given me lots of the information,  but an illustrator here, you can see it's not given me the,  uh, text the line center. So there's bits and pieces that it just doesn't give you.

So it's great, it's awesome. It's missing a couple little things. Annoying, but that's okay. Okay. It saves the day for lots of having to kind  of pass things over to your developer or just for yourself. I use this all the time myself.

Okay? I'll pick, I'll fiddle around with the fonts in here  and then just kind of come in and check. Okay? So I won't probably build a  document like this for myself. Okay? I'll probably just work step by step  as I'm building the site to come into  Illustrator and just pull it out.

Okay? But if you are sending it to somebody else, um, one  of the things are like, say this box down here,  you wouldn't export that as a graphic. Okay? This, um, this kind of ready peachy box here,  you wouldn't export it as like a PNG graphic. It would be designed in code, okay? In CSSN would give it its heightened width and color.

So you can see when you select though,  it says there's no CSS generated. You gotta give 'em names for some reason. Okay? So you could do the long version  and go into your layers panel, uh, twirl down your layers. And what happens is we've only got two layers, right? But within those layers, all those objects are listed out.

And what you can do with it selected over here,  can you see this little search icon? It jumps down to this thing called a rectangle. Okay? And basic him a name instead of rectangle. We can call him, I don't know, call  to action, try not to use spaces. Call to action.

I'm making it with hyphens. Okay? And now it will give me a class name called Call to action  and the actual, um, color for it. So, uh, I don't like doing it that way. I like doing it. Um, 'cause naming your classes in here is cool if you kind  of know what you're doing, but I,  I don't find it super helpful.

Um, let's say it's, uh, this box here, okay? And again, it's not gonna give me my name until I go off  and find it and give it a name. It's easier actually just  to go into your settings at the bottom of generate CSS. Oh, no, that one, one of them says Export options. That's it. The first icon.

And there's this one here says Generate CSS  for unnamed objects. Okay? And it just gives it called ST one or ST zero. And I'm gonna copy this  and I'm gonna pop this into my document. And on desktop, this is gonna be my, I don't know  what I'm gonna call it 'cause it's nothing black box. Okay.

And I'm gonna name it in here. Yeah. Awesome. So that's, it's missing a few things though. Like I quite often need the heightened width  that I've decided in here. So there's a few options in this first kind  of export options again that I like to include.

There's one that says include  dimensions, so I'm gonna do that. Cool. And it's included pixel dimensions there as well. Okay. Just give it a heightened width. I find that's quite helpful.

All right. And now you just work around your document  and here tell people how big things are. Okay. You can grab this green box in the background,  give them the height and width. Okay. And pixels, uh, I'd have to unlock this lay here.

There he goes. So I know that this guy is, um,  a background width. Okay? It's mainly the height that I wanna deal with. Okay. I wanna make sure he's got it  or she's got it the right height.

Um, same with these buttons at the top, the right colors. Okay. And the height  and the width that I'm using this logo,  I could tell them the height and the width that I want it. Okay. And yeah, just really quite helpful  to pull the CSS out  for yourself if you're gonna go build it next. And that's what we'll do in, uh, one of my next tutorials.

After this one. We'll go and build this in Dreamweaver,  but if you're working with a web developer  or web designer, uh, you can just hand them off a kind  of a spec sheet to give them a rough kind of gauge. You don't have to list out every single thing  and every single bit of margin. Okay? But yeah, it could be really helpful. All right.

That's how to export the CSS from Illustrator to work  with your website.