How to Change the Color of Light Gray Text in HTML
Although Cascading Style Sheet, or CSS, code makes it easier to control the styles of an entire website with a single file, you cannot set the color to a variable once in the file and re-use it wherever you need the color. This leads to CSS containing many lines of code that repeat the use of the same color, and to change it, you need to change every instance of that color. Use the "Replace" tool in your code or plain-text editor to find your light gray color code and change it without needing to dig in the code line by line.
Other People Are Reading
Instructions
-
-
1
Open the HTML file for your Web page in a code editor or a plain-text editor such as Notepad. Locate the "<link>" tags and find the name of a CSS file embedded in your Web page. This is what a "<link>" tag looks like when used for embedding CSS:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
Open the CSS file in your code or text editor. If you do not find an embedded CSS file, then look for "<style>" tags between the "<head>" tags.
-
2
Look for the CSS code that sets the gray text. If you know what type of tags or the class name of tags set to light gray text, you can find them by their names. Hexadecimal codes for gray text usually have three pairs of identical numbers like "#cecece" or "#bbbbbb." Light grays use high values with at least one letter in each pair, so a code like "#545454" is not a light shade of gray. Highlight and copy the gray color code.
-
-
3
Use the "Replace" tool under "Edit" in your tool bar. Find this tool in the same spot in almost every code or plain-text editor, including Notepad. Paste the gray color code in the "Find" field and then type the color code for your new text color in the "Replace" field. Click "Find Next" and examine the code before making the change. Change only where the "color" property is set to gray. Click "Find Next" to skip to the next instance of your gray color and click "Replace" where you want to replace with a new color.
-
1
Tips & Warnings
Try not to use plain black text against a plain white background. If the text of your Web page is too light, switch to a darker gray. Grays cause less eyestrain for your readers.
Back up your HTML and CSS files before editing them.
Resources
- Photo Credit Michael Blann/Lifesize/Getty Images
