CSS (Cascading Style Sheets) is a language that allows you to easily change the text and background color on your website. Thanks to the CSS text color syntax, you can determine the exact color of text on your webpage. This syntax is essential because it increases the usability and accessibility of your website and other marketing collateral. Whether you’re building from scratch or are using BootStrap CSS, you’ll find the knowledge of HTML and CSS useful. In this article, we’ll examine how to change text and background color in CSS. CSS color property is used to select the color of text, the color of the webpage’s background, and the color of the borders. Its syntax is given as color:[color code]/initial/inherit;. On the other hand, the background-color property specifies the background color of an element. This property encompasses the whole size of the element, including padding and border. However, it doesn’t include margin. Its syntax is: element { background-color: [color code]}. Changing text color on a web page is easy with the CSS color property. Before we look at how, it’s essential to understand the different ways you can set the property value. You can use: While you can use any of these values, color names are not always used because they aren't very precise. Not only are they challenging to remember beyond the standard rainbow, but one person’s fuchsia may be another’s magenta which could be another’s hot pink, etc. Use hex color codes or RGB values instead to ensure your website’s color scheme looks the way you want it to. They allow you to pick the exact shade of the color you want. We’ll use hex color codes in the examples below because they’re more beginner-friendly to learn. Now let’s walk through how to change the color and background color of inline text in CSS. To change the color of the inline text, go to the section of your web page. Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you’d add p {color: #000080; } to the head section of your HTML file. You might be wondering what happens if you don’t set the color property in your CSS, or whether your text color has already been defined. That’s a good question. In your CSS code, the default text color for a page is defined in the body selector. So if you want to find the default color of your text, that's the first place you should look. Here’s an example of a body selector setting the text color as blue: If you'd like to change the color of all text, regardless of whether it's heading or a paragraph, you should define it here using an HTML color code. If there is no body selector, or if there is no color defined in the body selector, the default color is most likely black. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy. Tangible tips and coding templates from experts to help you code better and faster. Loading your download form Click this link to access this resource at any time. Access now Learn more Now that you know the default color for all text, you can play around with other HTML elements such as headings, paragraphs, and links. Let's say you want to change the color of your paragraphs to navy, as mentioned in the example above, and all links on your website to aqua. Here's how: Here’s the CSS: Here’s the HTML: Here’s the result: See the Pen Changing Inline Text Color in CSS by HubSpot (@hubspot) on CodePen. Pro Tip: This code is interactive, try changing it to see the difference. You can use this same process to change the color of headings, span tags, button copy, and any other text on a page. Now let’s look at how to change the background color of text. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy. Tangible tips and coding templates from experts to help you code better and faster. Loading your download form Click this link to access this resource at any time. Access now Learn more Recommended Resource To change the background color of the inline text, you would follow the same steps as you would above, except we'll be using the background-color property. Here's how: Say you want to change the background color of links to yellow. Then you’d add the following code: Here's the result: See the Pen Changing Text Background Color in CSS - background Color by HubSpot (@hubspot) on CodePen. Here's a quick refresher, just in case: The CSS background-color property allows you to change the background color of an HTML element. You can set the background color for many elements, including a table, div, heading, and span element. When defining the color property, you should also define the background color. It’s necessary to be compliant with W3C CSS and other frameworks, and it doesn’t hurt otherwise. Changing the color and background color of text is also essential for avoiding problems of web accessibility on your website, but it could also cause issues if you're not careful. Take another look at the link in the demo above. While the colors used may be too similar for people who can’t see different shades of colors, the underline would help to indicate it is a link. But what if I removed the underline from links on my site? Then I’d be relying on color alone to convey that it was a link. In that case, I’d need to identify and use web-accessible colors for my website. A tool like Contrast Checker can help you make accessible choices when changing the color of text on your site. Here's how to use it: That's it! Pretty simple, right? We’ll use this tool to identify the best colors in the example below. Let's say we want our text to be red and the background to be gray. Here's what we would do: Here’s the CSS: Here’s the HTML: Here’s the result: See the Pen Changing Text Background Color in CSS by HubSpot (@hubspot) on CodePen. Pro Tip: This code is interactive, try changing it to see the difference. The rule for font color in CSS is color: #00000; (as an example). You can use this rule to change the font color of any property in CSS, including text elements such as paragraphs and headings, and block/inline elements such as tables, buttons, and divs. To change the font color of text inside a div, you can use the CSS color property inside a class selector for your div. Here's how: Here's the result: See the Pen How to Change Font Color Inside a Div by HubSpot (@hubspot) on CodePen. There's no way to change text color in HTML without CSS; however, you can do it directly in your HTML file by using inline CSS. You simple add a style="color; [insert color here];" declaration in the opening tag of your chosen element. Here's an example: The limitation of using this method is that it won't apply to any other paragraphs. It's much better to create a CSS class, then add universal rules to that class that you can reuse at any time across your HTML file. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy. Tangible tips and coding templates from experts to help you code better and faster. Loading your download form Click this link to access this resource at any time. Access now Learn more Changing the color and background color of text on your website is easy. With some knowledge of CSS and HTML, it’ll be easier for you to build or create your website. It will, however, take time to learn the color names and codes and how to combine them to make your website and other marketing collateral accessible — giving you just another reason to get started adding color to your site today. Editor's note: This post was originally published in April 2021 and has been updated for comprehensiveness. CSS Color Property
CSS Text Color and Background Color Options
Changing Inline Text Color in CSS
How to Identify Default CSS Text Color
Free Guide: 25 HTML & CSS Coding Hacks
You're all set!
How to Change CSS Text Color
Free Guide: 25 HTML & CSS Coding Hacks
You're all set!
25 HTML & CSS Coding Hacks
Fill out the form to access your coding tips and templates.
How to Change Text Background Color in CSS
CSS Background Color
How to Check CSS Text Color Contrast
CSS Text Color Contrast Example
CSS Text Color: FAQs
What is the rule for font color in CSS?
How do I change the color of text in a div in CSS?
How do you change text color in HTML without CSS?
Free Guide: 25 HTML & CSS Coding Hacks
You're all set!
Adding Color to Your Website
Topics:
Certainly! CSS (Cascading Style Sheets) is a fundamental language for web development, particularly in terms of altering text and background colors on websites. Let's delve into the concepts related to the article you shared:
CSS Color Property
The CSS color
property is central to selecting text color, background color, and border color on webpages. Its syntax is: color: [color code]/initial/inherit;
.
Background-Color Property
This property specifies the background color of an HTML element, encompassing its entire size, except for the margin. The syntax is: element { background-color: [color code]}
.
Options for Text Color and Background Color
- HTML Color Names: There are 140 predefined color names in CSS, such as yellow, fuchsia, maroon, etc.
- Hex Color Codes: These are composed of three pairs of characters, ranging from 00 to FF for each primary color (RGB).
- RGB Values: This color model consists of three numbers (0-255) representing the intensity of red, green, and blue.
Importance of Hex Codes and RGB Values
While color names are supported, they can be imprecise and hard to recall beyond the basic rainbow spectrum. Hex codes and RGB values offer more precision, allowing you to select exact shades for your website's color scheme.
Changing Text and Background Colors in CSS
To change the color of inline text in CSS, you'd use selectors like p { color: #000080; }
to define the color of paragraphs. Similarly, changing link colors can be done using a { color: #00FFFF; }
.
CSS Background Color
The background-color
property can be applied to various elements like tables, divs, headings, and spans to alter their background color.
CSS Text Color Contrast
Ensuring adequate contrast between text and background colors is crucial for web accessibility. Tools like Contrast Checker help in identifying color pairs with acceptable contrast ratios (4.5:1 or higher) to enhance readability and accessibility.
Font Color in CSS
The rule for font color in CSS is defined using the color: [color code];
property, applicable to text elements like paragraphs, headings, and block/inline elements such as tables, buttons, and divs.
Changing Text Color without CSS
Directly altering text color in HTML without CSS can be done using inline CSS via the style
attribute in the opening tag of the chosen element. For instance: <p style="color: #7393B3">
.
Understanding these concepts empowers you to manipulate text and background colors effectively using CSS, thereby enhancing the visual appeal and accessibility of your website.