CSS stands for Cascading Style Sheets and used to define the style of an element in HTML. Each HTML element in a Weebly theme is controlled with defined set of CSS styles which decide the appearance of the elements on the published site. You can find all CSS styles under “main.less” file (earlier it was main_style.css) available under “Theme > Edit HTML / CSS > Styles” section. It is always not necessary to modify this main stylesheet, 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.
Different Ways to Add CSS in Weebly
You can add CSS in Weebly site using one of the following methods:
- Inline style – Inline style is directly defined in a HTML element inside a web page affecting only that element.
- Internal style – Internal style is defined within <head> section of a HTML document affecting all similar elements on that page.
- External stylesheet – External style are defined in an external text file with an extension .css and linked to the HTML document using <link> tag within <head> section.
1. 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>2. Insert CSS with Internal Style
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 > SEO Settings > Header Code” to make all paragraph text in that page to red color.
<style type="text/css">
p {color: red;}
</style>
Note: You can also insert the style inside an Embed Code element using < style >…< / style > tags to make it effective only for that element.
3. Using External Stylesheets in Weebly
This is the highly effective and recommended way of using CSS since the styles are separated from HTML which is easy for maintenance and modifications. Below are some basic points on using default external stylesheet in Weebly:
- Each Weebly theme uses only one external stylesheet which is available under “Theme > Edit HTML / CSS > Styles” section with the name “main_style.css” or “main.less”. New Weebly themes have .less file while old themes use .css file.
- Modifying the stylesheet needs you to save the theme with different name and you can find the modified themes under “Theme > Change Theme > Custom” section.
- When you change the theme of your site, all changes previously made in the main stylesheet will be lost since new theme will use the new default stylesheet for that theme.
- Any change you make on this main stylesheet will be effective throughout the site.
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” or “main.less” 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 > SEO Settings > Header Code” section using the below code:
<link rel="stylesheet" href="custom_style.css">The file path for the uploaded CSS files will be like “https://yoursite.weebly.com/files/theme/custom_stylesheet.css”. When you are linking the stylesheet to a page, you can either use the absolute link “https://yoursite.weebly.com/files/theme/custom_stylesheet.css” or use relative link like “/files/theme/custom_stylesheet.css”. For font size, weight and color change, you should use the default feature available under “Theme > Change Fonts” and there is no need to change the CSS.
4. Inserting Internal CSS Code or Third-Party External CSS Files
As mentioned, editing or uploading stylesheet needs you to save your theme as a new custom theme. This is a unnecessary task if you just want to insert few lines of CSS code in the site’s header section. For this purpose, go to “Settings > SEO > Header Code” and paste your CSS here. You can either use this option for internal CSS by inserting your CSS code with <style>…</style> tags or add external CSS files from third-party websites using <link> tag.
After adding the code or file, click “Save” button and then click “Publish”. The code or file added here will be inserted between <head>……</head> tags in each page of your site. When you change the theme, you should copy the code and paste it in a new theme manually so that you will not lose the changes.
4 Comments
Leave your reply.