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 >
< 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 >
< 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:
Last Updated :
17 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...