Global CSS in Elementor

### 1. Using the Elementor Custom CSS Feature (Pro Version)
If you are using **Elementor Pro**, you can add custom CSS to the whole site through the global settings or individual widgets.

#### Steps:
1. **Open Elementor Editor**:
– Go to **Pages > Edit with Elementor** on any page.

2. **Global Settings**:
– On the Elementor editor screen, click the **hamburger menu** (top left corner).
– Select **Site Settings** from the menu.
– Under **Typography**, you can adjust the global fonts for headings, body text, buttons, and more.

3. **Adding Custom CSS**:
– In the same **Site Settings** menu, scroll down to **Custom CSS**.
– Here, you can add your global custom CSS code, which will apply to your entire site.

#### Example of Global CSS for Buttons, Links, Headings, and Body Text:

/* Global Button Styles */
.elementor-button {
    background-color: #0073e6;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.elementor-button:hover {
    background-color: #005bb5;
}

/* Global Link Styles */
a {
    color: #0073e6;
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #005bb5;
    text-decoration: underline;
}

/* Global Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.4;
}

/* Global Body Text Styles */
body, p {
    font-family: 'Helvetica', sans-serif;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

### 2. Adding Custom CSS via Theme Customizer (Works for Free Version)

#### Steps:
1. **Go to WordPress Dashboard**:
– Go to **Appearance > Customize**.

2. **Add Additional CSS**:
– Scroll down to **Additional CSS**.
– Add your global CSS code here.

The same CSS code provided above can be used here.

### 3. Adding CSS in the Theme’s `style.css` (Optional)

If you're comfortable editing theme files, you can add your custom CSS directly to the `style.css` file of your child theme.

#### Steps:
1. Go to **Appearance > Theme Editor**.
2. Open the `style.css` file of your child theme.
3. Add the same CSS code for global styling.

This method will apply the styles globally across your website without needing Elementor Pro. Just ensure you're using a child theme so your changes aren’t lost during updates.

Let me know if you need more help with specific styling!

However, you can follow these steps to use SCSS variables in your styles:

### Steps to Use SCSS Variables:

1. **Set Up SCSS Variables**:
You can declare your variables at the top of your SCSS file.

/* SCSS Variables */
$primary-color: #0073e6;
$secondary-color: #005bb5;
$body-font: 'Helvetica', sans-serif;
$heading-font: 'Arial', sans-serif;
$button-padding: 10px 20px;

/* Global Button Styles */
.elementor-button {
    background-color: $primary-color;
    color: white;
    border-radius: 5px;
    padding: $button-padding;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: $secondary-color;
    }
}

/* Global Link Styles */
a {
    color: $primary-color;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
        color: $secondary-color;
        text-decoration: underline;
    }
}

/* Global Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: $heading-font;
    color: #333;
    line-height: 1.4;
}

/* Global Body Text Styles */
body, p {
    font-family: $body-font;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

2. **Compile SCSS to CSS**:
– You need to compile SCSS to CSS using a tool like **Sass**. You can do this locally on your machine or use an online SCSS compiler.
– If you are using a local environment, run the Sass compiler like this:

sass input.scss output.css

This will generate a standard CSS file (`output.css`) from your SCSS file.

3. **Add Compiled CSS to Elementor**:
– Once the SCSS is compiled to CSS, copy the generated CSS code.
– Paste the CSS into the **Elementor Custom CSS** section (if using Elementor Pro) or the **Additional CSS** section in the WordPress Customizer.

### Example of the Compiled CSS:

Once compiled, your SCSS code would look like this in CSS:

/* Global Button Styles */
.elementor-button {
    background-color: #0073e6;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.elementor-button:hover {
    background-color: #005bb5;
}

/* Global Link Styles */
a {
    color: #0073e6;
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #005bb5;
    text-decoration: underline;
}

/* Global Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.4;
}

/* Global Body Text Styles */
body, p {
    font-family: 'Helvetica', sans-serif;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

### Tools to Compile SCSS:
– **Online SCSS Compilers**: You can use [SassMeister](https://www.sassmeister.com/) or similar online tools to quickly compile SCSS into CSS.
– **Local Tools**: Install [Sass](https://sass-lang.com/install) locally on your machine and compile your `.scss` files.
– **Build Tools**: If you have a build process in place (like Gulp, Grunt, or Webpack), you can integrate Sass compilation into that process.

This approach lets you take advantage of SCSS variables for better-organized and more maintainable styles, but you'll need to compile them before adding to your WordPress site.