`, `
`. Do not use the Site Studio style builder that you access by navigating to ****Site Studio**** > ****Styles**** > ****Base styles**** to create base styles. These styles override the theme base styles and affect the appearance of other pages. For additional information, visit [Creating base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles"). Important Enable the **Acquia Site Studio base styles** module even if you do not use the base styles features. Custom CSS classes ------------------ To create custom CSS classes, navigate to ****Site Studio**** > ****Styles**** > ****Custom styles****. Site Studio prefixes styles with `.coh-style` to prevent clashes with the theme style sheet. To apply classes defined in the existing website theme to Site Studio elements, apply them in the ****markup**** tab of the element. For additional information, visit [Adding markup to an element](/drupal-starter-kits/add-ons/site-studio/adding-markup-element "Adding markup to an element"). Add the layout canvas to your content entities ---------------------------------------------- To use the layout canvas on existing content entities, add the ****Layout canvas**** field. To add this field, navigate to ****Structure**** > ****(Entity type)**** > ****(Bundle)**** > ****Manage fields****. The layout canvas renders in the content region of the website. For additional information, visit [Adding the layout canvas field to content entities](/drupal-starter-kits/add-ons/site-studio/adding-layout-canvas-field-content-entities "Adding the layout canvas field to content entities"). Important Site Studio uses render placeholders for inline CSS. Since these cannot be naturally injected into the HTML template, the site theme must contain `` and ` ` in the `` tag. Create and use page components ------------------------------ Site Studio components provide a flexible layout system for editors and site builders. Components act as mini templates that you can combine on the ****Layout canvas**** to create layouts. To create components, navigate to ****Site Studio**** > ****Elements**** > ****Components****. For additional information, visit [Components](/drupal-starter-kits/add-ons/site-studio/components "Components"). Content templates for view modes -------------------------------- Site Studio includes a system for building content templates for view modes. Use Site Studio templates only if the website theme does not include them. To create templates, navigate to ****Site Studio**** > ****Templates**** > ****Content templates****. Templates created here override less specific templates in the website theme. For example, full view mode templates render within the content region of your website, and other view mode templates render where specified. For additional information, visit [Creating templates](/drupal-starter-kits/add-ons/site-studio/creating-templates "Creating templates"). Deployment ---------- Site Studio stores styles, templates, and components as configuration. This means you can deploy these to a production environment without affecting content. Site Studio allows you to create configuration with file dependencies. For example, you can create a component that includes a default image. Use the **Site Studio sync sub** module to deploy configuration that includes file dependencies. For additional information, visit [Deploying your website](/drupal-starter-kits/add-ons/site-studio/deploying-your-website "Deploying your website"). Next steps ---------- After you understand the aspects explained in the earlier sections, follow these steps to install and use Site Studio on an existing website: S.No Task 1 Do one of the following: * [Install the Site Studio modules on your website with composer](/drupal-starter-kits/add-ons/site-studio/install-site-studio-modules-your-website-composer "Install the Site Studio modules on your website with composer") * [Install the Site Studio modules on your website manually](/drupal-starter-kits/add-ons/site-studio/install-site-studio-modules-your-website-manually "Install the Site Studio modules on your website manually") 2 [Connect your existing website to the Site Studio API](/drupal-starter-kits/add-ons/site-studio/connect-your-existing-website-site-studio-api "Connect your existing website to the Site Studio API") 3 [Modify your website theme](/drupal-starter-kits/add-ons/site-studio/modify-your-website-theme "Modify your website theme") 4 [Configure image and media browsers for an existing website](/drupal-starter-kits/add-ons/site-studio/configure-image-and-media-browsers-existing-website "Configure image and media browsers for an existing website") 5 [Using Site Studio on an existing website](/drupal-starter-kits/add-ons/site-studio/using-site-studio-existing-website-0 "Using Site Studio on an existing website")