How to Change the Color of All Bold Text in HTML

By Sara Williams

Web pages written in Hyper-Text Markup Language (HTML) get their styling - colors, fonts and other design touches - from Cascading Style Sheet (CSS) code. Using a style sheet, you can change the way browsers display certain HTML tags. For example, you can tell the browser to make all text between tags red. Since tags make text bold in most browsers, this will change the color of the bold text on your website. If your site uses tags to make bold text, you would target that tag in CSS instead.

Step 1

Create a blank file inside a code-editing program and save it as a CSS file, if your website does not already have a style sheet. Open the file for every Web page in your website inside the editor. Addtags to include in your CSS file:If your pages already contain similar code, then skip this step.

Step 2

Open the CSS file for your website and start a new line at the end of the document. Add the following code:strong {color: #ff0000;}This CSS code will change every instance of the tag to red, so all text between tags will appear red. Change the color code to the code of a color you want to use. Replace "strong" with "b" if your site uses tags to make text bold. Save the CSS file.

Step 3

Load your website in a browser, then check to see if the bold text is displaying in your chosen color. If some bold text is not the right color, go back to your CSS file and change it to look like this:strong {color: #ff0000 !important;}Your site may already have styles set for bold text in another part of the CSS file, or directly in the HTML tag. So-called "inline styles" applied directly to tags in the HTML file are given preference by the browser, hence the term "cascading." The "important" declaration will override all other CSS rules.

Tips & Warnings

  • The tag is considered outdated. Use the tag for bold text in HTML. Most browsers style tags in a bold font by default. Avoid use of inline CSS - use of CSS within HTML tags - to keep your site's styles manageable, and to avoid code conflicts that produce odd style results.

References & Resources