Having control over your website is an important element of web design. In an ideal world, you should be able to change every aspect of your site’s design without having to compromise on the finished product.
Of course, though, websites can often be stubborn. It isn’t always possible to achieve the results you want 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.
Changing Website Text Color With CSS
CSS has been carefully designed to ensure that it gives designers power over their website projects. It’s incredibly easy to change text color with CSS on your website; you just need one rule to do it.
color: blue;
Of course, though, CSS rules don’t work very well on their own. You need to pair them with element classes, IDs, and identifiers to ensure that web browsers know what the style applies to. You can see examples of this rule being used with an H1 heading, P paragraph, and a 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 the color of your website’s text with CSS. It usually takes more than this, especially if you want to give different colors to the different text on your website.
Finding the Right CSS Class
Before you can change the specific text on your website, you need to know how to identify it within your CSS. Most web browsers have a set of tools that are designed to help developers, and it’s likely that the one you use has something called an Inspector. This can be used to peek into the HTML and other code that builds a website.
Opening the Inspector
Opening 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 headstart:
- Google Chrome: CTRL + Shift + C or Menu Dots > More Tools > Developer Tools
- Microsoft Edge: CTRL + Shift + C or Menu Dots > More Tools > Developer Tools
- Mozilla Firefox: CTRL + Shift + C or Menu Dots > More Tools > Web Developer Tools
- Apple Safari: Preferences > Advanced > Show Develop menu in menu bar and 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 may not understand, but you don’t need to worry about this for now. You just need to find the style name of the text that you are trying to change.
As an example, we are going to find and change the CSS text style being used for the main header on the MakeUseOf Programming section. You can start this process by inspecting the element that needs to be changed.
- Google Chrome: Right Click > Inspect
- Microsoft Edge: Right Click > Inspect
- Mozilla Firefox: Right Click > Inspect or Q
- Apple Safari: Right Click > Inspect Element
Doing this will make your website console/inspector window focus on the element that you are trying to change. In Chrome, Safari, Edge, and Firefox, you should see a section labeled Styles that 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 this. This can be used to figure out the class or ID of the element that you are changing. In our case, we are looking at the main H1 heading on our page, and this belongs to a class called .listing-title.
At this point, you can test the CSS text style that you will be adding to your website. The top portion of the CSS style section in the website console can be used to apply rules to the specific element you have targeted. Of course, though, this isn’t permanent.
Adding Your New CSS
It’s now time to add your new CSS to your website. The way that 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 changing your files.
However you add your CSS code, you need to make sure that it is correct. Using text-style CSS rules isn’t too hard, but it can be frustrating when you can’t figure out how to change your text color. For our example, this is the code we would need to add to our website.
.listing-title {
color: blue;
}
What if Your Text Color Does Not Change?
Once you’ve edited your CSS file, you should be able to see the change you’ve made as soon as you refresh your page. It isn’t always as simple as this, though. CSS can be more complex than people expect, and you may need to do more at this stage.
- Emptying the cache: Websites often use caching to reduce loading times. Your cache could be preventing you from seeing website changes, and you need to empty it when you make changes to CSS.
- Higher in the style sheet: CSS loads styles sequentially, and this means that the first rules in your style sheet will be the ones that display on your website. Moving styles can be a good way to give them priority over other styles.
- Using important tags: This next option isn’t considered best practice and is best reserved for 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;
}
Other Text Style CSS Fun
CSS is an incredibly powerful tool, giving you access to a host of different options when you’re working with text and other elements on your website. This doesn’t just stop with CSS text color, and you can do loads with your text when you choose to learn a little bit of CSS. You can find some more basic CSS text style rules below:
- Font-size: This changes the size of text on your website, e.g., font-size: 12px;
- Font-weight: Weight refers to the thickness of a font, with bold being high weight and thin text being low, e.g., font-weight: 400;
- Text-align: This changes the alignment of the text you are working with, e.g., text-align: right;
- Text-shadow: This allows you to add a shadow to your text with a range of attributes, e.g., text-shadow: 2px 2px 3px black;
- Text-transform: This changes the case of the text you are working with, e.g., text-transform: uppercase;
- Text-decoration: This allows you to add underlines, dashes, and other decorations to text, e.g., text-decoration: underline;
This is merely scratching the surface of what you can do with text styles in CSS. There are loads of guides around the web that can help you with this process, and it is always a good idea to do some research as you get started.
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 daunting when you first start working with them, but they are incredibly easy to work with once you’ve spent some time with them.