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.
CSS can be added to a site in the following three manners: 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. 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. You can also embed the style inside “Embed Code” element using < style >…< / style > tags to make it effective only for that element. 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: 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.
Using Inline Styles in Weebly
<p style="font-size:18px; color:green;">
Here is the paragraph content….
</p>
Using Internal Styles in Weebly
<style type="text/css">
p {color: red;}
</style>
Using External Stylesheets in Weebly
Hi, what if this doesn’t work? I did exactly how it says but it doesn’t work.
It should work unless you have added wrong CSS code. Also, the changes will not reflect in the editor in most cases. You should publish the site and check, if not working check the page has the CSS in the source code.