When using page builders like Breakdance you get access to tons of pre-built page elements, allowing you to customize and style your site. However, sometimes the only way to apply a particular style to them is using Cascading Style Sheets (CSS). CSS gives you complete control over the look and feel of your site, and in this article, we'll show you how to add custom CSS to Breakdance Builder in 3 different ways.
What is CSS
CSS stands for cascading style sheets. It is a language used to style the look and feel of a web page. CSS can be used to control the font, color, size, and layout of text, as well as the background color, images, and borders of a web page.
CSS can be written in three different ways:
Inline CSS - Styles are applied directly to the HTML element using the style attribute.
Internal CSS - Styles are applied to the whole document, but only within the <style> element located in the <head> section.
External CSS - Styles are applied to the whole document, but only from an external CSS file.
The most common way to add CSS to a web page is by using an external CSS file. This is because it separates the content (HTML) from the presentation (CSS). It also makes it easier to reuse styles across multiple pages and makes your code easier to read and maintain.
How To Add Custom CSS Using Breakdance
Using Breakdance we have 2 ways we can add custom CSS to our site. We can either use a code block or add a global stylesheet. Since we're using WordPress, we can also use the theme customizer.
Method 1: Code Block
Adding a code block is the quickest way to add CSS to your page, but comes with limitations. To do this, click on the "Add Element" button and select the "Code Block" element. Then, paste your custom CSS and save. The biggest drawback to this method is that your CSS will only be applied to the element inside the code block. If you want to apply your CSS to multiple pages, you'll need to add the code block to each one individually. Luckily, our second method fixes this.
Method 2: Global CSS Styles
Breakdance has Global CSS styles, which allows you to add CSS that will be applied across your entire site. To do this, click on the Settings (...) tab when using the visual editor and select the "Global Settings" option. Then, create a CSS stylesheet and paste your custom CSS into the code area and save. Your CSS will now be applied to every page on your site. If you don't need your settings to be applied on every page, the first method will probably suffice.
Method 3: WordPress Theme Customizer
Since you're using WordPress, you can also add custom CSS to your site using the theme customizer. To do this, go to Appearance > Customize and click on the "Additional CSS" tab. Then, paste your custom CSS into the code area and save. Your CSS will now be applied to your entire site.
This is the easiest way to add CSS to your WordPress site but will be on every single page, so it's generally discouraged. Since you're using Breakdance, you should try to keep all your global styling within the breakdance builder.
Adding CSS to your site is a great way to customize and control the look and feel of your web page. In this article, we showed you three different ways to add custom CSS to Breakdance Builder. Using these methods, you'll be able to apply your CSS to only the elements you want and keep your website clean and organized. Do you have any questions about adding custom CSS to Breakdance Builder? Let us know in the comments below!