Меняем цвет шрифта при помощи HTML

Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color – задает цвет текста;
• size – устанавливает размер текста;
• face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

     
Конструктор сайтов "Нубекс"
  

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

    .nubex < color:#fa8e47; font-size: 150%; >.constructor < color: blue; >.saitov 
Конструктор сайтов "Нубекс"
  

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Смотрите также:

Источник

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.

Источник

How can I change my font color with html?

I’m making a web page where I want the color of the font to be red in a paragraph but I’m not sure how to do this. I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?

4 Answers 4

Where «error» is defined in your stylesheet:

The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.

Where [tag] can be anything. For example «p» (paragraph), «span», «div», «ul», «li».. etc.

and where [css] is any valid CSS. For example «color:red; font-size:15px; font-weight:bold»

The recommended way to add style to a html element is by assigning it a «class» (a identifier that can be repeated on the document) or a «id» a unique identifier that shall not be repeated in the document.

Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.

Then in the CSS (inside the tags of your document):

For this example and to keep it simple to new users I named the class «red». However isn’t the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So or might be more appropriate. ( Thanks to Grant Wagner for pointing that out )

Brief CSS Explanation :

Since most of the answers you’re getting are all mentioning CSS, I’ll add a small guide on how it works:

Where to put CSS

First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:

This is called embedded CSS since it’s inside the document. However, a better practice is to link «include it» directly from an external document by using the following tags:

Where file.css is the external file you want to include into the document.

The benefits of using the «link» tag is that you don’t have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.

This two ways of including CSS are the most recommended ways. However, there’s one more way that’s by doing in-line CSS adjustments, for example:

CSS General Structure

When you code write CSS, the first thing you need to know is what are classes and what are id’s. Since I already mentioned what they do above I’m going to explain how to use them.

When you write CSS you first need to tell which elements you’re going to «select», for example:

Lets say we have a «div» element with the class «basic» and we want it to have a black background color, a white font, and a gray border.

To do this we first need to «select» the element:

Since we’re using a class we use a «.» in front of the identifier which in this case is: «basic», so it will look like this:

This is not the only way, because we’re telling that ANY element that has the class «basic» will be selected, so lets say we JUST want the «div» elements. To do this we use:

So for our example it will look like this:

Now we’ve selected the «div» with the class «body». Now we need to apply the visual style we wish. We do this inside the brackets :

With this, we just applied successfully a visual style to all «div» elements that have the «basic» class attached.

Remember this doesn’t just apply for «class» it also applies for «id» but with a slight change, here an example of the final code but instead of a class we’ll just say it’s a «id»

For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/

Keep your HTML Code clean and use CSS to modify ANY visual style that’s needed. CSS is really powerful and it’ll save you a lot of time.

Источник