Generating CSS code in Illustrator

  • 6
css1

Generating CSS code in Illustrator

Category : Illustrator

You can easily create the design for an HTML page in Illustrator. This serves as a good visual guide for a web developer, who can then code the layout, styles, and objects into a page in an HTML editor. However, replicating the exact appearance and position of components and objects is a time-consuming and tedious process.
With Illustrator, you create the layout for an HTML page and then also generate and export the underlying CSS code that determines the appearance of the components and objects on the page. CSS allows you to control the appearance of text and objects (similar to character and graphic styles). You can choose to export the CSS code for individual objects or for the entire layout designed in Illustrator.
In the CSS Properties panel , you can do the following:
• View the CSS code for selected objects.
• Copy the CSS code for selected objects.
• Export one or more, or all selected Illustrator elements to a CSS file.
• Export rasterizable images used.
• Generate browser-specific CSS code.

css1

CSS Properties panel
How to view and extract CSS code:
1. To generate CSS code, ensure that objects in your
Illustrator document are named in the Layers panel
css2
2. Select Window > CSS Properties.
3. In an open Illustrator document, do one of the following:
• Select one object (Figure 15). The CSS code for the
object is displayed in the CSS Properties panel
(Figure 16).

css3
• Hold Shift, select multiple objects, and then click the Generate CSS button in the CSS Properties panel.
• Press Ctrl/Cmd + A to selectall the objects, and then  click the Generate CSS button in the CSS Properties  panel.
The generated CSS code is displayed.
4. To obtain the CSS code that has been generated, do one of the following:
To copy selected code, select specific code, and then:
• To copy to the clipboard, click Copy Selected Style.
• To export to a file, click the flyout menu, and then click Export Selected CSS.
To copy all the code, make no selection in the CSS code, and then:
• To copy to the clipboard, click Copy Selected Style.
• To export to a file, click the flyout menu, and then click Export All.
5. While saving CSS code to a file, set the CSS options in
the CSS Export Options dialog box (Figure 17).

css4
The exported CSS is ready tobe placed within another
application, such as Dreamweaver .

css5


6 Comments

dara

December 2, 2016 at 4:30 pm

Good tip

    naisim

    December 9, 2016 at 3:45 am

    Thanks

      Amberlee

      December 23, 2016 at 11:33 am

      You really found a way to make this whole presocs easier.

    Lyzbeth

    December 23, 2016 at 11:57 am

    Knocked my socks off with knowdelge!

Caelii

December 23, 2016 at 12:33 pm

Ppl like you get all the brnsia. I just get to say thanks for he answer.

    naisim

    January 5, 2017 at 4:33 am

    Thanks

Leave a Reply

Read previous post:
c1
15 Tips on How to become a more Creative Graphic Designer?

Designing is already a creative art, so if you are...

hqdefault
Photoshop CC (2017)

In-app search Quickly search Photoshop tools, panels, menus, Adobe Stock...

Close