---
title: Web CSS Genel Bakış
title_en: Web CSS Overview
description_tr: CMS üzerinden özel web CSS ekleme, kaydetme, publish etme ve toggle ile açma veya kapatma akışı.
description_en: Add custom web CSS, save it from the CMS editor, and publish or disable the stylesheet from the current Web CSS panel.
order: 10
product: cms
section_tr: CSS ve Tasarım
section_en: CSS
owner: CMS Operations Team
lastReviewed: 2026-03-30
productVersion: v1
status: live
cardImage: /img/cms/design/web-css/cms-web-css-poster.webp
---
# Web CSS Overview

The Web CSS section lets you manage site-wide frontend CSS directly from CMS. The current interface includes a CSS editor, an enable or disable toggle, and separate `Save` and `Publish` actions.

## Video Walkthrough

<video src="/video/cms-custom-web-css.mp4"></video>

## Current Web CSS Interface

The current screen contains:

- `Enable Web CSS` or `Disable Web CSS` toggle
- Full code editor with line numbers
- `Save` button
- `Publish` button
- Success toast after publish: `Css published successfully.`

## Main Actions in This Page

- Add or edit CSS rules
- Save in-progress CSS changes
- Publish CSS to apply it
- Disable Web CSS when you want to stop using custom styling

## Step-by-Step: Add or Update Web CSS

1. Open **CSS > Web CSS**.
2. Review whether the toggle currently shows `Enable Web CSS` or `Disable Web CSS`.
3. Paste or write the required CSS rules in the editor.
4. Click `Save`.
5. Click `Publish`.
6. Wait for the success message.
7. Validate the frontend pages affected by the CSS.

Typical use cases:

- Theme color overrides
- Header/footer style adjustments
- Minor UI spacing/visibility tweaks

## Step-by-Step: Enable Web CSS

1. Open `Web CSS`.
2. Make sure your CSS is present in the editor.
3. Turn the toggle on so the panel shows the enabled state.
4. Click `Save`.
5. Click `Publish`.
6. Confirm the success toast appears.

## Step-by-Step: Disable Web CSS

If custom CSS causes unwanted UI behavior, use the same panel as a rollback point:

1. Open **Web CSS**.
2. Turn the toggle off so the panel shows `Enable Web CSS` again.
3. Click `Save`.
4. Publish again if your flow requires the disabled state to go live.

This stops the custom stylesheet from controlling the frontend appearance.

## Save vs Publish

The current UI separates draft saving from live publishing:

- `Save` stores the CSS changes in the editor workflow
- `Publish` applies the CSS as the active site styling

Recommended order:

1. Edit CSS
2. Save
3. Publish
4. Verify the frontend

## Recommended Safe Workflow

1. Keep CSS changes small and test in steps.
2. Prefer scoped selectors to avoid global breakage.
3. Save and publish only after reviewing the selector impact.
3. Validate in both desktop and mobile layouts.
4. Keep a backup/version of previous CSS before major changes.
5. Use the disable toggle as a quick rollback if needed.

## Notes

- Web CSS affects broad UI areas, so avoid unnecessary `!important` usage.
- Review dark/light mode impact when changing colors.
- A publish success message is shown after the CSS goes live.