How to Add CSS in Weebly Site?

CSS stands for Cascading Style Sheets and used to define the style of an element. Each HTML element on a Weebly theme is controlled with the defined parameter on how it will look on a published site and all these parameters are stored under “main_style.css” file which can be accessed through the path “Design > Edit HTML / CSS > Assets”. It is always not necessary to modify the main style sheet, you can also control the style of an element either at page level or at an individual element level. In our previous article, we had explained about how to use scripts on a Weebly site and in this article we will discuss in detail about various ways to add CSS in Weebly site.

Using Inline Styles in Weebly

Inline styles are used at element level without affecting other elements on the same page. For example, if you want to change the particular paragraph to red color with font size 18px while keeping other paragraphs as per default color then paste the below code inside “Embed Code” element.

<p style="font-size:18px; color:green;">
Here is the paragraph content….
</p>

Embedded styles are generally applied at page level affecting all similar elements within a page. For example, you can paste the below code under “Pages > Select a page > Advanced Settings > Header Code” to make all paragraph text on a page to red color.

<style type="text/css">
p {color: red;}
</style>

You can also embed the style inside “Embed Code” element using < style >…< / style > tags to make it effective only for that element.

Using External Stylesheets in Weebly

This is the highly effective and recommended way of using CSS since the styles are separated from HTML it is easy maintenance and modification. Below are some basic points on using default external stylesheet in Weebly:

• Each Weebly theme uses only one external stylesheet which will be available under “Design > Edit HTML / CSS > Assets” with the name “main_style.css”.
• Any change on this main stylesheet will be effective throughout the site.
• Modifying the stylesheet needs you to save as the theme with different name and the modified theme will be available under “Design > Change Theme > Custom Theme”.
• When a theme is changed, all changes inside the main stylesheet will be lost since new theme will use the default stylesheet for that theme.

For example, if you want to change the style of block quote element throughout the site then modify the code within blockquote {……} in “main_style.css” file. This will change the style of all existing block quotes as well as any new block quotes.

If you have a new stylesheet then upload it by clicking on the + icon next to “Assets” and choose the “Upload File(s)…” option. Ensure the file is with .css extension and link the stylesheet to required pages under “Pages > Select a page > Advanced Settings > Header Code” section using the below code:

The file path for the uploaded files will be like “http://yoursite.weebly.com/files/theme/your-style-sheet.css”. When you are linking the stylesheet to a page, you can either use the absolute link “http://yoursite.weebly.com/files/theme/your-stylesheet.css” or use relative link like “/files/theme/your-stylesheet.css”.

For font size, weight and color change, you should use the default feature available under “Design > Change Fonts” and there is no need to change the CSS.