HTML Font Style – How To Change Text Color And Size With An ...
Có thể bạn quan tâm
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
selector { font-size: value; color: value; }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.
<h1>freeCodeCamp</h1> body { display: flex; align-items: center; justify-content: center; height: 100vh; }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:
<h1 style="font-size: 4rem">freeCodeCamp</h1>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:
<h1 style="color: #2ecc71">freeCodeCamp</h1>This is what we now have in the browser:
Combining the font-size and color properties gives us this in the browser:
With the code:
<h1 style="font-size: 4rem; color: #2ecc71">freeCodeCamp</h1>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:
<link rel="stylesheet" href="path-to-css-file">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:
<h1>freeCodeCamp</h1>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:
h1 { color: #2ecc71; font-size: 4rem; }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.
Từ khóa » Html Color Tag Inline
-
How To Set Font Color In HTML? - Tutorialspoint
-
HTML Styles - W3Schools
-
HTML Styles CSS - W3Schools
-
HTML: Changing Colors Of Specific Words In A String Of Text
-
HTML Text Color Code
-
How To Change Text Color In Html - Javatpoint
-
How To Change Link Colors With CSS - W3docs
-
Inline Styles In HTML - Codecademy
-
How To Change The HTML Font Color - Kinsta
-
Inline Css Text Color Code Example - Code Grepper
-
How To Add & Change Background Color In HTML - HubSpot Blog
-
How To Change Text And Background Color In CSS - HubSpot Blog
-
Applying Color To HTML Elements Using CSS - MDN Web Docs
-
Change Font Color Inline Html