How to set text color & font style in HTML ?
In this article, we will learn how to set text color & font style in HTML. The <style> tag in HTML helps us to set the text color & font style in HTML. This modification includes changing font size, font family, font color, etc. Not only the text but also we can change the style of a body or part of a page. We can add style in different ways. Now let’s look at various attributes of style and what else the tag supports.
Syntax:
style="property: value;"
Example: In this example, we will change the text color and font style of the first div i.e. class name container using <style> tag.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > * { margin: 0; padding: 0; } h1 { font-size: 1.8rem; } p { font-size: 1rem; padding: 1rem 0; } .container { color: blue; font-family: cursive; } </ style > </ head > < body > <!-- Section using styles --> < div class = "container" > < h1 >Welcome to GFG</ h1 > < p > Coding is the New Literacy and no one can deny this fact! And especially, when it comes to young ones or school students, investing the time & efforts in learning programming skill become more & more advantageous and rewarding. </ p > </ div > <!-- Section without styles --> < div > < h1 >Welcome to GFG</ h1 > < p > Coding is the New Literacy and no one can deny this fact! And especially, when it comes to young ones or school students, investing the time & efforts in learning programming skill become more & more advantageous and rewarding. </ p > </ div > </ body > </ html > |
Output
Example 2: In this example, we will use the style in the inline style attribute.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > </ head > < body > < h1 style = "font-size:medium; color: rgb(0, 34, 128);" > Welcome to GFG </ h1 > < p style = "color: green;" > Coding is the New Literacy and no one can deny this fact! And especially, when it comes to young ones or school students, investing the time & efforts in learning programming skill become more & more advantageous and rewarding. </ p > </ body > </ html > |
Output: