How to put CSS templates in Weebly

Written by adrian grahams Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to put CSS templates in Weebly
Give your Weebly website a fresh new look with CSS. (John Foxx/Stockbyte/Getty Images)

Cascading Style Sheets (CSS) is a type of website design code language that defines the appearance of the many different elements that make up your Weebly website, including fonts, colors, links, borders and even navigation menus and background images. One of the benefits of using a CSS template for your site is that it can apply a common style across all website pages so that you don't have to add or edit the code on each separate web page. You can add a CSS stylesheet template to your Weebly website from the Design tab on the settings page.

Skill level:


  1. 1

    Sign in to your Weebly website to open the site's main dashboard page. Enter the same login credentials that you use when you publish a post or add a content page to the site.

  2. 2

    Click the "Design" button in the menu bar at the top of the page, and then select the "Edit HTML/CSS" tab under the horizontal Design pane. Weebly displays your site's Theme Editor page in a new screen.

  3. 3

    Click to select the "CSS" button at the top of the left sidebar menu, just below the website theme name. Weebly displays the site's existing CSS code in an editor window on the right of the screen. If your existing Weebly template doesn't use CSS, then this window will be blank.

  4. 4

    Highlight and copy the CSS template code that you want to use for the site in the source template file with the CSS file extension. You can open this in a text editor, like Notepad, or in a more advanced web design program. Highlight and delete any existing CSS code in the Weebly code editor window. Paste the copied code into the window. Click the orange "Save" button on the right of the top menu bar to save and publish the changes to your site.

Tips and warnings

  • After adding the CSS template, visit your Weebly site and check that all content displays correctly. If you don't like the changes or if certain design elements don't display correctly, you can reload the original template to restore the site to its previous appearance.
  • If you just want to add CSS code for one site design element, such as a background image, you can edit just this section in the Weebly code editor rather than overwriting the complete template.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.