# TUTORIAL – Add Global Styles in CSS

**URL:** <https://community.weweb.io/t/tutorial-add-global-styles-in-css/198>\
**Category:** Tutorials\
**Tags:** design, css, global-styles\
**Created:** [January 27, 2022, 11:58am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198 "2022-01-27T11:58:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [January 27, 2022, 11:58am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/1 "2022-01-27T11:58:17Z")

</div>

In WeWeb, you can add global styles in CSS. Here’s how:

## Upload your CSS stylesheet to WeWeb

Go to your project Settings \> File \> Upload new file and uploading your CSS stylesheet

## Link your CSS stylesheet in the head of your WeWeb project

First, copy the file’s URL by clicking on the top left green icon of your CSS file once it’s been uploaded to open it in a new tab

Then, go back to your project Settings \> Custom code and link to your CSS stylesheet in the head

```auto
<link rel="stylesheet" href="url-you-copied-above">

```

## Publish the website

⚠ Changes you make in the custom code will NOT show in the editor. You will only be able to see the changes on the published website. ⚠

 ![link-stylesheet-in-weweb](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/c5bfba1b3c95b263983b9fecae3f79b1c1788a0c.jpeg)

---

<div class="post-metadata">

**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\
**Post date:** [October 14, 2022, 1:44am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/2 "2022-10-14T01:44:53Z")

</div>

Can you share your global CSS parameters, so we can edit them effectively?  
Otherwise it is a cat and mouse game to identify all elements you point and reset their values. (ie blockquote gets a 24px margin from your global CSS by default)

---

<div class="post-metadata">

**Author:** ![Mael](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mael/32/13246_2.png) [@Mael](https://community.weweb.io/u/Mael)\
**Post date:** [October 14, 2022, 7:50am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/3 "2022-10-14T07:50:11Z")

</div>

Hi @yunus, all our code is public, you can see what you want here: [weweb-assets · GitHub](https://github.com/weweb-assets)

---

<div class="post-metadata">

**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\
**Post date:** [October 14, 2022, 8:10am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/4 "2022-10-14T08:10:20Z")

</div>

Not the list I was looking for, finding in inspect element and resetting them probably will be faster but thanks…

I am an old school front-end dev and the JS based CSS and object oriented nature of the styling is killing me, least efficient way to control the overall system styling.

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 14, 2022, 9:13am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/5 "2022-10-14T09:13:45Z")

</div>

Hi @yunus ,  
there is no global style, as each component and each component are fully customizable, every style is dynamically generated.  
We have a notion of design system for color and typography, but its up to you to use them.  
There is also the custom css property, but this may interact incorrectly with all the properties already managed by the component (this is more to add advanced behavior not covered by the existing settings).

---

<div class="post-metadata">

**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\
**Post date:** [October 14, 2022, 10:01am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/6 "2022-10-14T10:01:50Z")

</div>

Seems like putting classes to everything and then managing them directly via custom Css or external CSS will be logical way to manage as there is not efficient class management or style management yet (like Webflow).

Thanks

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 14, 2022, 10:57am UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/7 "2022-10-14T10:57:46Z")

</div>

This is one of the big feature on our roadmap, to have something similar to Webflow class, to have component inherit some common style.

---

<div class="post-metadata">

**Author:** ![tekcorps](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tekcorps](https://community.weweb.io/u/tekcorps)\
**Post date:** [October 25, 2022, 4:14pm UTC](https://community.weweb.io/t/tutorial-add-global-styles-in-css/198/8 "2022-10-25T16:14:13Z")

</div>

With a proper solution on the road map, I’m not sure how long it will be a problem. But here is a janky solution.

I created a “design” folder and added some variables such as border-radius, entered it in as text, and then I could bind the components to it.

 ![Screenshot 2022-10-25 at 17.07.40](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7fcb44ea499d83ddebb33212df4eb26688142e0d.jpeg)  
 ![Screenshot 2022-10-25 at 17.08.04](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/83b9f48673f3cb7bbc64517dba61915bb1a64c7f.png)
