Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Export Artboard Dialog

Artboard Stylesheet template

The artboard stylesheet contents

PreviousStylesheet NameNextExpected Stylesheet output

Last updated 3 years ago

Was this helpful?

The Stylesheet template value is one place you can use to define additional styles for your artboard.

The template is empty by default but if you add your own styles be sure to include the styles_content token before or after your content to make sure the page contents are included.

There is a special token called styles_content that is used to place the write the page styles.

If you exclude this token your CSS will be written but the page CSS will not be written.

You can move the page CSS to an external file using the External Stylesheet option.

Example Project

You can learn more about CSS styles by reading more in the references below.

If you choose to use an external stylesheet and view your page in a browser from the file system the styles may not load.

You can also add styles to the page using or in an elements .

There is a token of the same name defined in the that defines where the styles or the link to an external stylesheet are placed.

You can view the exported CSS by clicking on the button.

For adding CSS to elements see the field.

See setting up .

Code Blocks
CSS Template
page template
Show CSS
CSS Template
local server
Logoxd-examples/web-export/examples/external-stylesheets at master · velara3/xd-examplesGitHub
External Stylesheet
LogoCSS: Cascading Style Sheets | MDN
LogoCSS reference - CSS: Cascading Style Sheets | MDN
Example stylesheet content