Css style

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 change every aspect of your site’s design without having to compromise on the finished product.

Of course, however, websites can often be stubborn. It’s not always possible to get 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.

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.

Related: The CSS Box Model Explained With Examples

VIDEO OF THE DAY MAKEUSE

Finding the right CSS class


firefox-inspector-window

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


chrome inspector window

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


chrome inspection element

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


css add text color

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’re 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 style of CSS text that 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.


Related: How to Create a Responsive Navigation Bar Using HTML and CSS

Add your new CSS


add css to website

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’re 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?


css text color no 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


have fun with css

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;
  • Weight font: 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 plenty of guides on the web that can help you with this process, and it’s always a good idea to do your research early on.

Related: How to Edit Your Website Text with the CSS Font-Family Property

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.


css-code-in-10-minutes
10 Simple CSS Code Examples You Can Learn In 10 Minutes

Need help with CSS? Try out these basic CSS code samples to get started, then apply them to your own web pages.

Read more


About the Author