---
title: Editing CSS
description: Recommended Template Usage
image: http://cdn2.hubspot.net/hub/0/file-0-png/example.png
---

[![GiantFocal](https://demo.giantfocal.com/hubfs/Giantfocal_2020/logos/giantfocal.svg "GiantFocal")](https://www.giantfocal.com)

[![Schedule Free Consultation](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/48ec8c37-0656-4599-a246-b83d683ac343.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/48ec8c37-0656-4599-a246-b83d683ac343)

![template_documentation.jpg](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/backgrounds/template_documentation.jpg?width=1600&name=template_documentation.jpg "template_documentation.jpg")

# TEMPLATE DOCUMENTATION

[Back to Tutorial Listing](http://giantfocal.com/documentation)

# Editing CSS

All stylings are coded inside a CSS file, and we provide several options that will help you to change the basic stylings of your website fast.

Let's get started!

---

## In this article

- [How to edit css file](https://demo.giantfocal.com/documentation/editing-css#)

---

## How to edit css file

1. Open the template's CSS file. The CSS file is named after the template pack you purchased or downloaded.   
**Exquisite** template pack uses **Exquisite.css**, **Attract** template uses **Attract.css**, and so on. 

2. Scroll to a section calles 'variables', it will look similar to the screenshot below:

![css_editing.jpg](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal_Documentation/editing_CSS/css_editing.jpg?width=650&name=css_editing.jpg "css_editing.jpg")

You can edit the basic styles of the websites by editing the variables listed. Some examples include: baseColor, accent/primary color, background colors, font family for both base and header, basic font size, line height, page center/container, and also buttons.

 

**Note:** Change the value inside the double quote, and if you have any issue/do not understand, please feel free to contact us anytime! Cheers!

[![template_Doc_Sidebar.png](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/images/documentation/template_Doc_Sidebar.png?width=300&name=template_Doc_Sidebar.png "template_Doc_Sidebar.png")

](mailto:support@giantfocal.com)

#### Get this pack while it's hot!

[![attract-pack.jpg](https://demo.giantfocal.com/hubfs/Template_Packs/002.Free_Attract/screenshots/attract-pack.jpg "attract-pack.jpg")](https://demo.giantfocal.com/attract)

[Get me a copy](https://demo.giantfocal.com/attract)

![Schedule a call](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_schedule-meeting.png?width=75&name=icon_schedule-meeting.png "Schedule a call")

### Questions?

Schedule a free consultation and get all of your questions answered by one of our experts. 

[![Schedule](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/cbf6cf5f-03eb-4d0e-8650-6a97a4dda4be.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/cbf6cf5f-03eb-4d0e-8650-6a97a4dda4be)

![HubSpot COS Templates](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_templates.png?width=75&name=icon_templates.png "HubSpot COS Templates")

### Browse Templates

Check out our collection of HubSpot-approved templates. All templates are HubSpot-quality.

[![View Templates](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/63441d10-c907-4bb1-b6f1-14c5f4978d2e.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/63441d10-c907-4bb1-b6f1-14c5f4978d2e)

![HubSpot Modules](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_modules.png?width=75&name=icon_modules.png "HubSpot Modules")

### See Our Services

So you are starting to know who we are now. Are you ready to check out more about our services?

[![Yes, Please](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/ac07ef93-bbc8-46b6-b1b5-52e9dc918312.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/ac07ef93-bbc8-46b6-b1b5-52e9dc918312)

GiantFocal

GiantFocal is a digital media agency with more than 15 years of combined experience in the industry.

- [**](https://facebook.com/giantfocal)
- [**](https://www.twitter.com/giantfocal)
- [**](https://www.linkedin.com/company/giantfocal)
- [**](https://pinterest.com/giantfocal/)

The Navigator

Yes, I would love GiantFocal to help me to grow my website!

[![Schedule Free Consultation](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/bad561a5-5d12-415c-9258-e4686d5a2478.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/bad561a5-5d12-415c-9258-e4686d5a2478)