How to change the text color of your website with CSS
Having control of your website is an important part of web design. In an ideal world, you should be able to modify every aspect of your site’s design without having to compromise on the finished product.
Of course, however, websites can often be stubborn. It is not always possible to achieve the desired results without delving into the world of CSS. Let’s take a look at how you can change text color with CSS on your website to give you an idea of ââhow you can achieve more with the power of CSS.
Change website text color with CSS
CSS has been carefully designed to give designers power over their website projects. It’s incredibly easy to change text color with CSS on your website; you just need a ruler to do it.
color: blue;
Of course, however, CSS rules don’t work very well on their own. You should associate them with element classes, IDs, and ids to make sure web browsers know what the style applies to. You can see examples of using this rule with an H1 header, P paragraph, and button below.
h1 { color: blue; }
p { color: red; }
button { color: red; }
This should give you a basic understanding of what needs to be done to change your website text color with CSS. It usually takes more than that, especially if you want to color different text on your website in different colors.
Finding the right CSS class
Before you can edit specific text on your website, you need to know how to identify it in your CSS. Most web browsers have a set of tools designed to help developers, and it’s likely the one you’re using has what’s called a Inspector. This can be used to take a look at the HTML and other codes that make up a website.
Inspector opening
The opening of the inspector is different in each of the browsers on the market. We’ve covered a handful of the most popular browsers below to give you a head start:
- Google chrome: CTRL + Shift + C Where Menu items > More tools > development tools
- Microsoft Edge: CTRL + Shift + C Where Menu items > More tools > development tools
- Mozilla Firefox: CTRL + Shift + C Where Menu items > More tools > Web development tools
- Apple Safari: Preferences > Advanced > Display the Expand menu in the menu bar then Develop > Show Web Inspector
Finding the right CSS text style
It can be confusing when you first open the Inspector in your browser. There will be a lot of things that you might not understand, but you don’t have to worry about it just yet. You just need to find the name of the style of the text you are trying to edit.
As an example, we’ll find and change the CSS text style used for the main header of the MakeUseOf Programming section. You can start this process by inspecting the item that needs to be changed.
- Google chrome: Right click > Inspect
- Microsoft Edge: Right click > Inspect
- Mozilla Firefox: Right click > Inspect Where Q
- Apple Safari: Right click > Inspect element
By doing this, your website’s console / inspector window will focus on the item you are trying to edit. In Chrome, Safari, Edge, and Firefox, you should see a section titled fashions which contains all of the CSS code for the element you are inspecting.
You should also see your HTML element highlighted in a pane next to it. This can be used to determine the class or ID of the item you are changing. In our case, we are looking at the main H1 header of our page, and it belongs to a class called .listing-title.
At this point, you can test the CSS text style you will add to your website. The top part of the CSS styling section in the website console can be used to apply rules to the specific element you have targeted. Of course, however, this is not permanent.
Add your new CSS
Now is the time to add your new CSS to your website. How you do this will depend on the type of website platform you are using, with options like Shopify requiring extensions to allow you to add CSS without modifying your files.
Regardless of how you add your CSS code, you need to make sure it’s correct. Using text-style CSS rules isn’t too difficult, but it can be frustrating when you don’t know how to change the color of your text. For our example, this is the code that we would need to add to our website.
.listing-title {
color: blue;
}
What if the color of your text doesn’t change?
Once you’ve edited your CSS file, you should be able to see the change you made as soon as you refresh your page. It’s not always that simple, however. CSS can be more complex than you expect, and you may need to do more at this point.
- Empty the cache: Websites often use caching to reduce load times. Your cache may prevent you from seeing changes to the website and you should clear it when you make changes to the CSS.
- Higher in the stylesheet: CSS loads styles sequentially, which means the first rules in your stylesheet will be the ones that appear on your website. Moving styles can be a good way to prioritize them over other styles.
- Use important tags: This next option is not considered best practice and is best reserved when you have no other choice. You can add an important tag to your CSS text styles to give them priority over all other styles, and this can be seen below:
.listing-title {
color: blue !important;
}
Different CSS Fun text style
CSS is an incredibly powerful tool, giving you access to a plethora of different options when working with text and other elements on your website. It doesn’t just stop at the CSS text color, and you can do loads with your text when you choose to learn some CSS. You can find some more basic CSS text style rules below:
- Font size: This changes the size of the text on your website, for example, font-size: 12px;
- Police-weight: Weight refers to the thickness of a font, with bold being a high weight and thin text being low, for example, font-weight: 400;
- Align text: This changes the alignment of the text you are working with, for example, text-align: right;
- Text shadow: This allows you to add a shadow to your text with a range of attributes, for example, text-shadow: 2px 2px 3px black;
- Text transformation: This changes the case of the text you are working with, for example, text-transform: uppercase;
- Text-decor: This allows you to add underlines, dashes and other decorations to the text, for example, text-decoration: underline;
This just scratches the surface of what you can do with CSS text styles. There are many guides on the web that can help you with this process, and it’s always a good idea to do your research early.
Learn more than CSS text color
Practice, experimentation, and trial and error are the best ways to learn a tool like CSS. Style sheets can seem intimidating when you first start working with them, but they’re incredibly easy to use once you’ve spent some time with them.
Read more
About the Author