HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

The CSS color property defines the text color for an HTML element:

Example

This is a heading

This is a paragraph.

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

This is a heading

This is a paragraph.

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

This is a heading

This is a paragraph.

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Font Color – How to Style Text in HTML

Kolade Chris

Setting text color on a website you’re building might be confusing at first. But in this article, you’ll learn how to do it.

How to Set Text Color in HTML

In CSS, the background-color property is pretty straightforward for setting the background color of anything.

So what if you want to set the foreground color of something on the page? Especially text, which under normal conditions you wouldn’t want to set a background color for.

There’s no foreground-color property in CSS, so what makes this possible is the color property.

In this article, I will walk you through how to set the color of text using the color property. We’ll also look at the various ways it takes values.

The color property takes values in 4 different ways: named color, hexadecimal color, RGB color, and HSL color. Let’s look at each one now.

Named Colors

As the name implies, you bring in the color property and apply the value by naming the color you want. This may be red, green, blue, orange, crimson, cyan, or any other named color. There are around 147 named colors recognized by browsers.

The basic syntax looks like this:

Hexadecimal Colors (or just Hex Colors)

Hex values are used to represent colors with a total of 6 characters. They start with the pound/number sign (#), then any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue. With hex values, there’s no limit to the shades of colors you can use.

RGB Colors

RGB stands for red, green, and blue. With RGB colosr, you specify the color in terms of how much red, green, and blue you want. All three are expressed with numbers between 0 and 255.

There is a type of RGB called rgba . The extra ‘a’ stands for alpha, which lets you specify the opacity of the color. It takes a value from 0.0 to 1.0 – 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha) .

You can limit it to rgba(amountOfRed, amountOfGreen, amountOfBlue) if you don’t want an alpha value.

Here’s the syntax for the regular RGB values:

And here it is demonstrating the alpha value in action with 50% (0.5) opacity:

HSL Colors

HSL stands for hue, saturation, and lightness. It is another way of specifying color for text (and anything else that takes color) in CSS.

• Hue represents the color wheel in 360°. So, 0° is red, 120° is green and 240° is blue.
• Saturation is the amount of gray in the color, expressed as a percentage. 0% is the shade of gray and 100% is the color itself.
• Lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Just like the RGB colors, you can also set the opacity of the color. So, there’s also hsla.

The full basic syntax is hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha) . You can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage) in case you don’t want an alpha value.

You can apply a particular opacity to the hsl color like this:

Should You Use Named Colors, Hex Colors, RGB Colors, or HSL Colors to Assign Colors?

One of the wonderful things about CSS is that there are multiple ways of doing the same thing. You’ve seen this by applying colors to text.

Since you can apply colors in 4 different ways, you must be wondering which is the best to use.

When you use named colors, you’re kind of limited in how far you can go in applying different shades of colors. Red, green, blue, yellow, or any other named color has a lot of variations you won’t get access to with named colors. You’ll only have access to around 147 predefined colors recognized by browsers.

Hexadecimal colors are very dynamic. They are the most commonly used among developers because your limit is your creativity. With hex colors, you can use various shades and even use a color no one has ever used.

RGB colors are as dynamic as hex colors. Apart from being able to specify how much red, green, and blue you want from 0 to 255, you can also set how transparent you want the color to be with the extra alpha value.

HSL is the most dynamic of all. You get to specify the exact color you want in degrees from 0 to 360 within the color wheel, set how saturated and dark you want it to be in percentages, and also set an opacity from 0.0 to 1.0.

So really, it’s up to you and your use case – and just how creative or specific you want to get.

Conclusion

Applying colors to text helps make your website more attractive to visitors. The right color combo can also help your content become more readable too.

In this article, you have learned how to apply colors to text with the 4 different kinds of values you can use with the color property.

Thank you for reading, and keep coding.

Источник

Folyamatosan induló kurzusaink

A CodeBerry megtanít a legmodernebb technológiák használatára, és megadja neked a szükséges tudást és eszközöket ahhoz, hogy fejlesztőként dolgozhass.

Készen állsz a tanulásra? Csatlakozz te is a 160 000 programozást tanuló diákunk csapatához!

Tanulj online

Tanulhatsz otthon, a szünetekben, vagy a kedvenc kávézódban.

Interaktív feladatok

A tudásszintedtől függetlenül több, mint 100 órányi szórakoztató feladatsor vár.

Előképzettség nélkül

Teljesen kezdőként is belevághatsz a kurzusokba, semmilyen programozási ismeretre nincs hozzá szükséged.

Örökös hozzáférés

A kurzusok elvégzése után is bármikor hozzáférhetsz a leckékhez, hogy ismételhess és gyakorolhass, ami a programozás tanulásánál különösen fontos.

Tapasztalt mentorok

A CodeBerry tanárai több év programozói tapasztalattal rendelkező szakemberek, akikre mindig számíthatsz, ha segítségre van szükséged a tanulás folyamán.

Pénzvisszafizetési garancia

Ha nem vagy elégedett a szolgáltatásunkkal, a vásárlástól számított 14 napon belül kérdés nélkül visszaadjuk a pénzed.

Источник

HTML Font Style – How to Change Text Color and Size with an HTML Tag

Kolade Chris

When you code in HTML and add some text, you don’t want to leave it like that. You want to make that text look good.

And to do that, you need to change their appearance through the color and font-size properties of CSS.

In this tutorial, I will show you two different ways you can make your HTML texts look good.

Basic font-size Syntax

How to Change Text Size and Text Color in the HTML Tag

You can change the color and size of your text right inside its tag with the color and font-size properties. This is known as inline CSS. You do it with the style attribute in HTML.

In the HTML code below, we will change the color and size of the freeCodeCamp text.

It looks like this in the browser:

To change the size of the text, you’ll use the style attribute, and then set a value with the font-size property like this:

The text now looks like this in the browser:

If you are wondering what 4rem is, it’s a unit of measurement. It’s the same as 64 pixels, because 16px makes 1rem unless you change the root font-size ( html ) to another value.

To change the color of the text, you can use the style attribute, and then set a value with the color property:

This is what we now have in the browser:

Combining the font-size and color properties gives us this in the browser:

How to Change Text Size and Text Color in an External CSS File

You can also change the color and size of text in an external stylesheet. Most importantly, you have to link the external CSS in the head section of your HTML.

The basic syntax for doing it looks like this:

Now, to change the text size and color of the freeCodeCamp text, you need to select it in the stylesheet and apply the appropriate properties and values to it.

Remember this is our simple HTML code:

You can change the color and size of the text by selecting the element (h1) and assigning values to the color and font-size properties:

We have the same result in the browser:

Conclusion

I hope this tutorial gives you the knowledge to be able to change the size and color of your HTML text so you can make them look better.

Thank you for reading, and keep coding.

Источник