How to Replace CSS Color Schemes
One of the benefits of using cascading style sheets, or CSS, code on your website or blog is that a single page of CSS code controls the main design elements and color schemes for every page on the site. This makes tweaking the design and color of your website, and implementing those changes across the whole site, quick and easy. To change the CSS color scheme on your website or blog, open the CSS file with a text editor or Web design program and edit the hexadecimal color code for the design elements that you want to modify.
Other People Are Reading
Instructions
-
-
1
Launch the Notepad text editor application or your usual Web design program.
-
2
Click "File," "Open" to open the CSS code file for your website. You'll usually find this either in the root folder that contains your homepage or in a separate CSS folder.
-
-
3
Read through the CSS code on the page to identify the color design elements. For example, CSS code to control a Web page's background color looks like this: "background-color: #CCCCCC;." The six-digit code after the "#" character is the hexadecimal color code. In this example, the page background color is light grey.
-
4
Open your Web browser, then navigate to a Web design resource with a list of hexadecimal color codes, such as ColorPicker, Computer Hope or ColorSchemer.
-
5
Copy the hexadecimal codes for your preferred design colors. After you've chosen your colors, return to the CSS file that's open in your text editor or Web design program.
-
6
Delete the six-digit code for each color element that you want to change. Type the new color code after the "#" character, taking care to leave the "#" in place.
-
7
Save the file and upload it to your Web server through your host's content management system or with a File Transfer Protocol tool. Uploading the new CSS file overwrites the existing file and implements the new color scheme across the website.
-
1
Tips & Warnings
Try to limit yourself to just a few complementary colors -- using too many colors on a website can give it an amateurish look. Check your website online to ensure the color scheme works well. You can tweak the CSS file and upload it again if you need to make changes.
References
Resources
- Photo Credit Ryan McVay/Photodisc/Getty Images
