Whether you’re looking to give your website a fresh new look or just want to change the color scheme of your landing page, knowing how to change text and background color in CSS can be incredibly useful.
In this post, we’ll guide you through the step-by-step process of changing text and background color in CSS. So let’s jump right in!
Step 1: Create a New Style Sheet
Before we get started, make sure that you have a separate style sheet for your website. If you’re not sure how to create a new style sheet, follow these simple steps:
– Open your website’s HTML file in a text editor or web development IDE.
– Create a new file and save it as style.css (or any other file name that makes sense for your website).
– Link to your new style sheet in your HTML file using the tag.
Now that you have your style sheet set up, let’s move on to changing the text and background color.
Step 2: Select a Text and Background Color
The first thing you’ll need to do is choose the colors that you want to use for your text and background. You can select any colors you like, but we recommend using a color picker tool to help you find the perfect shade.
Once you’ve chosen your colors, note down their corresponding HEX code or RGB values. For example, the HEX code for a dark blue color is #00008B, and the RGB values are (0, 0, 139).
Step 3: Change the Text Color
To change the text color on your website, add the following line of CSS code to your style sheet:
“`
body {
color: #00008B;
}
“`
In this example, we’ve used the HEX code for dark blue. If you want to use a different color, just substitute the HEX code or RGB values for the ones you want to use.
This code tells the browser that all text on your website should be dark blue. If you only want to change the color of one specific element (e.g. a heading), you can use the element selector instead. For example:
“`
h1 {
color: #00008B;
}
“`
This code will change the color of all h1 headings on your website to dark blue.
Step 4: Change the Background Color
To change the background color on your website, add the following line of CSS code to your style sheet:
“`
body {
background-color: #F0F8FF;
}
“`
In this example, we’ve used the HEX code for a light blue color. Again, you can substitute the HEX code or RGB values for the color you want to use.
This code tells the browser that the background color of your website should be light blue. If you only want to change the color of a specific element’s background, you can use the element selector instead. For example:
“`
header {
background-color: #F0F8FF;
}
“`
This code will change the background color of the header element to light blue.
And that’s it! With just a few lines of CSS code, you can completely change the text and background color of your website. Play around with different colors and see what works best for your brand.
We want to thank the thought leader Anna Fitzgerald as the source for this content and such awesome teachings on the subject and we hope that this article can help you and your business! Here’s the link to his post https://blog.hubspot.com/website/change-text-color-css
