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.

Источник

How to Change Text Color in HTML – Font Style Tutorial

Joel Olawanle

Text plays a significant role on our web pages. This is because it helps users learn what the web page is all about and what they can do there.

When you add text to your web pages, this text defaults to a black color. But sometimes you will want to change the text color to be more personalized.

For example, suppose you have a darker color as the background of your website. In that case, you’ll want to make the text color a lighter, brighter color to improve your website’s readability and accessibility.

In this article, you will learn how to change the color of your text in HTML. We’ll look at various methods, and we’ll discuss which method is best.

How to Change Text Color Before HTML5

Before the introduction of HTML5, you’d use to add text to websites. This tag takes the color attribute, which accepts the color as a name or hex code value:

 Welcome to freeCodeCamp. // Or Welcome to freeCodeCamp. 

This tag got depreciated when HTML5 was introduced. This makes sense because HTML is a markup language, not a styling language. When dealing with any type of styling, it is best to use CSS, which has the primary function of styling.

This means for you to add color to your web pages, you need to make use of CSS.

In case you are in a rush to see how you can change the color of your text, then here it is:

// Using inline CSS 
Welcome to freeCodeCamp!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Color in HTML

You can use the CSS color property to change the text color. This property accepts color values like Hex codes, RGB, HSL, or color names.

For example, if you want to change the text color to sky blue, you can make use of the name skyblue , the hex code #87CEEB , the RGB decimal code rgb(135,206,235) , or the HSL value hsl(197, 71%, 73%) .

There are three ways you can change the color of your text with CSS. These are using inline, internal, or external styling.

How to Change Text Color in HTML With Inline CSS

Inline CSS allows you to apply styles directly to your HTML elements. This means you are putting CSS into an HTML tag directly.

You can use the style attribute, which holds all the styles you wish to apply to this tag.

You will use the CSS color property alongside your preferred color value:

// Color Name Value 
Welcome to freeCodeCamp!
 // Hex Value 
Welcome to freeCodeCamp!
 // RGB Value 
Welcome to freeCodeCamp!
 // HSL Value 
Welcome to freeCodeCamp!
 

But inline styling isn’t the greatest option if your apps get bigger and more complex. So let’s look at what you can do instead.

How to Change Text Color in HTML With Internal or External CSS

Another preferred way to change the color of your text is to use either internal or external styling. These two are quite similar since both use a selector.

For internal styling, you do it within your HTML file’s tag. In the tag, you will add the tag and place all your CSS stylings there as seen below:

While for external styling, all you have to do is add the CSS styling to your CSS file using the general syntax:

The selector can either be your HTML tag or maybe a class or an ID . For example:

// HTML 
Welcome to freeCodeCamp!
 // CSS p

// HTML 
Welcome to freeCodeCamp!
 // CSS .my-paragraph

// HTML 
Welcome to freeCodeCamp!
 // CSS #my-paragraph

Note: As you have seen earlier, with inline CSS, you can use the color name, Hex code, RGB value, and HSL value with internal or external styling.

Wrapping Up

In this article, you have learned how to change an HTML element’s font/text color using CSS. You also learned how developers did it before the introduction of HTML5 with the tag and color attributes.

Also, keep in mind that styling your HTML elements with internal or external styling is always preferable to inline styling. This is because it provides more flexibility.

For example, instead of adding similar inline styles to all your

tag elements, you can use a single CSS class for all of them.

Inline styles are not considered best practices because they result in a lot of repetition — you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML. You can also learn how to change text size in this article and background color in this article.

I hope this tutorial gives you the knowledge to change the color of your HTML text to make it look better.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

changing html text colors with css

Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem. I know this can be done with javascript, but wanted to know if it is possible without javascript.

if you want to change all 3 on hovering of 1 of them then you may need JavaScript to achieve it. Only CSS will not work for you.

4 Answers 4

Use the :hover pseudoclass:

etc. This works in all browsers, except in IE6 and earlier, which doesn’t support :hover on anything other than hyperlinks (A elements).

Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a around it and apply the :hover pseudoclass on that. It won’t just be the title (which is also possible, but has even less chance of working in IE). For that:

is your HTML, but your CSS would be:

.someclass .title:hover < color: #000000; >.someclass .title:hover ~ .username < color: #DF821B; >.someclass .title:hover ~ .dateandtime

Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).

@Harry Joy: No, it’s not. My answer is different, not to mention I don’t have enough rep to post comments.

Edit 2: As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:

.someclass:hover .title < color: #000000; >.someclass:hover .username < color: #DF821B; >.someclass:hover .dateandtime

(though basically credit for that goes to Spudley for suggesting it first).

Источник

Как поменять цвет текста CSS

Хороший дизайн – важная составляющая любого успешного сайта. CSS даёт полный контроль над внешним видом текста. В том числе и над тем, как изменить цвет текста в HTML .

Цвет шрифта можно изменять стилизации внутри HTML-документа . Однако рекомендуется использовать именно внешние таблицы CSS-стилей .

Внутренние стили, которые задаются в заголовке документа, принято использовать на маленьких одностраничных сайтах. В больших проектах лучше избегать внутренней стилизации, так как это сопоставимо с устаревшим тегом font , которым мы пользовались много лет назад. Строчные стили значительно усложняют обслуживание кода, так как они указываются непосредственно перед каждым элементом на странице. Сегодня вы узнаете, как задать цвет текста в CSS и стилизовать тег

.

Как поменять цвет шрифта в CSS — добавляем стили

В этом примере понадобится веб-страница с разметкой и отдельный CSS-файл , подключаемый внутри HTML-кода .

В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов

при помощи внешней таблицы стилей.

Значения цветов можно указывать при помощи названий, RGB или шестнадцатеричных значений.

• Добавляем атрибут style к тегу

  :

Элементы

на странице станут чёрными.

Перед тем, как изменить цвет текста в HTML , нужно понимать, что в данном примере используется название цвета black . Несмотря на то, что это один из способов указания цвета в CSS , он имеет определенные ограничения.

Нет ничего страшного в том, чтобы использовать названия black ( чёрный ) и white ( белый ). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:

Этот CSS-код также сделает элементы

чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000 , и результат будет тем же.

Как отмечалось ранее, hex-значения отлично подходят в тех случаях, когда необходимо использовать сложные цвета.

Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.

Перейдём к RGBA-значениям . RGBA поддерживают все современные браузеры, так что этот метод можно использовать, не беспокоясь о запасных вариантах:

Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. « 1 » означает « 100% ». То есть, текст будет полностью непрозрачным.

Если сомневаетесь в поддержке браузерами, то цвета можно указывать следующим образом:

В этом синтаксисе сначала идет hex-значение , которое затем переписывается RGBA-значением . Это значит, что устаревшие браузеры, в которых нет поддержки RGBA , будут использовать первое значение и игнорировать второе. Современные браузеры будут использовать второе значение. Это нужно учитывать, чтобы знать, как поменять цвет текста в CSS.

Валентин Сейидов автор-переводчик статьи « How to Change the Font Color with CSS »

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!

Источник