April 27, 2023

CSS Change your Elementor Font Color for Mobile Devices Only

Play Video

This CSS Change Font Color tutorial allows developers to enhance the visual aesthetics of a website. This task becomes particularly beneficial when considering the variety of devices and screen sizes that users may employ to view a website. Web Squadron will explore with you how to use CSS to adapt the font color based on the screen size, a key aspect of responsive design.

CSS Change Font Color

Understanding CSS and Font Color

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It is used to change the layout of web pages, including the font color. The color of the text can significantly impact the readability and overall user experience of a website.

p {
  color: red;

In the above example, the CSS code changes the color of all the paragraph text (<p>) to red.

How to CSS Change Font Color

Changing the font color in CSS is straightforward. You need to use the color property and assign it a color value. This can be a named color, a HEX color, an RGB color, or an HSL color.

p {
  color: #ff0000;

In this example, the CSS code changes the color of the paragraph text to red using a HEX color value.

Making Font Color Responsive

With the advent of various devices with different screen sizes, responsive design has become an integral part of web design. CSS provides the @media rule for this purpose. This rule is used to apply different styles for different media types/devices.

@media only screen and (max-width: 600px) {
  p {
    color: blue;

In this example, the CSS code changes the color of the paragraph text to blue for devices with a screen width of up to 600 pixels.

CSS Specificity

When applying CSS styles, the browser decides which rules to apply based on their specificity. If multiple CSS rules have the same selector, the rule that comes last in the CSS document will typically take precedence. However, inline styles (styles applied directly to the HTML element) will always take precedence over external or internal stylesheets.

When using the !important rule in CSS, it overrides all other styles, regardless of their specificity. However, if two rules both have the !important declaration, the rule that has greater specificity will be applied.

In the context of changing font color, understanding CSS specificity is crucial. If you’re finding that your CSS rules aren’t being applied as expected, it could be due to another rule with higher specificity overriding it.

Add CSS in WordPress without a Plugin

WordPress allows you to apply custom CSS to your website. You can add the CSS code in the Customizer under the “Additional CSS” section.

Use Cases for CSS Change Font Color

There are several scenarios where responsive font color can be useful. For instance, if you have text over an image or a call to action, the text color might need to change based on the screen size to maintain readability.


Changing the font color in CSS is a simple yet effective way to improve the aesthetics and usability of your website. With the @media rule, you can make the font color responsive, ensuring a great user experience across all devices.

Additional Resources

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
CSS Change your Elementor Font Color for Mobile Devices Only
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.