
Therefore, it makes sense that the tags are no longer supported in HTML5. Changing the font color is a design decision, and design is not the primary purpose of HTML.

However, the tag is deprecated in HTML5 and is no longer used.
TEXT STYLES CODES CODE
Here’s an example of how this code looked with hex color code: This text is purple.Īnd this is how you could set the text color to purple using the color name. The color was specified either with its name or with its hex code. More specifically, you’d use the font tag with the color attribute to set the text color.
TEXT STYLES CODES HOW TO
Now that you know how to define color, let’s look at different ways to change the HTML font color.īefore HTML5 was introduced and set as the coding standard, you could change the font color using font tags. if we wanted to lower the opacity of the example purple, we’d use this code: hsl(276, 100%, 50%. In that case, you’d use the HSLA value where A stands for alpha and is defined in a number from 0 to 1. In this case, 0% represents black, and 100% represents white.įor example, the purple color we’ve been using throughout this article would look like this in HSL: hsl(276, 100%, 50%). Lastly, lightness uses percentages similarly to saturation.
TEXT STYLES CODES FULL
0 represents black and white, and 100 represents the full color. Saturation uses percentages to define how saturated the color is. On a standard color wheel, red is around 0/360, green is at 120, and blue is at 240. HSL stands for hue, saturation, and lightness. HSL and HSLA ValuesĪnother way to define colors in HTML is to use HSL values. The first two letters specify the intensity of the red color, the middle two numbers specify the intensity of the green color, and the last two set the intensity of the blue color. They consist of numbers from 0 to 9 and letters from A to F. The hex color codes work similarly to RGB codes. HEX Value HEX codes are another easy-to-use color selection option. It ranges from 0 (not transparent) to 1 (fully transparent). The RGBA value adds one more value to the mix, and that’s the alpha value that represents the opacity. The value of each color input can range between 0 and 255, where 0 means the color is not present at all and 255 means that the particular color is at its maximum intensity. The first number specifies the red color input, the second specifies the green color input, and the third specifies blue. The RGB value looks like this: RGB(153,0,255). It defines the color by mixing red, green, and blue values, similarly to how you’d mix a color on an actual palette. Next up, we have the RGB and RGBA values. In other words, if you use a color that’s not on the list of supported colors, you won’t be able to use it in your design by its color name. However, the downside of this approach is that not all color names are supported. For example, you can use “blue” to set the color for an individual element to blue. Currently, there are 140 color names supported, and you can use any of those colors in your styles. The color name refers to the specific name for the HTML color. Color NameĬolor names are the easiest way to define a color in your CSS styles. There are several ways to define color in web design, including name, RGB values, hex codes, and HSL values. but it's a simple edit that can add a lot of personality! ✨🎨 Click to Tweet When it comes to customizing your site, font color often gets overlooked.

We also try to be at that level with our SaaS tool support. This value can use any of your preferred CSS units such as em, px, rem, and so on.Kinsta spoiled me so bad that I demand that level of service from every provider now. We use the font-size property alongside our value to change the text size using inline CSS. We use the style attribute, which now holds all our styling. This means we are putting CSS into an HTML tag directly. Inline CSS allows you to apply styles to specific HTML elements. In case you are in a rush to see how you can change the size of your text, then here it is: // Using inline CSS But like I said, this has long been depreciated, and most people don't even know it existed. This size attribute can take in value from 1-7 in which the text size increases from 1 to 7. Then we added text using the tag, which can take in an attribute of size as seen below: In the past, we could adjust text size within our HTML tag without using CSS. We can use the font-size property through inline, internal, or external styling. In this article, you will learn how to change the text size with an HTML tag.īefore you proceed, it is essential to know that there is only one way we can do this: through CSS's font-size property.

You'll want to be able to adjust how the text displays in the browser. When you add text to your HTML file with an HTML tag, you won't always want the text to remain the default size.
