.png "HTML Tutorial Class 6 styles")
HTML Styles:-
The HTML Style attributes are used to add styling to our web page or HTML page. We can change font size, text color, background color, and so many things.
If you don't know about HTML Paragraphs first you have to learn about this click on the link and learn then you should learn about the HTML Styles.
<!DOCTYPE html>
<html>
<body>
<p> This is a simple paragraph without styling. </p>
<p style="color:red;"> This paragraph font color is red. </p>
<p style="color:yellow;"> This paragraph color is yellow. </p>
<p style="font-size:30px;"> This paragraph font size increased. </p>
</html>
</body>
Try this code for a better experience
HTML Style Attribute:-
Setting the style of an element can be done using the style attribute.
The HTML Style attribute has the following syntax:
<tagname style="property:value;">
NOTE:- The property is a CSS property and the value is the CSS value.
Background Color:-
The CSS background color property defines the background color of the HTML page.
There are 3 types of CSS:-
- In line CSS
- Internal CSS
- External CSS
Here we will use internal CSS.
<!DOCTYPE html>
<html>
<body style="background-color:powder blue;">
<h1> This is heading </h1>
<p> This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
Now we will use inline CSS.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:red;"> This is a heading </h1>
<p style="background-color:blue;"> This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
Text Color:-
The CSS color property defines the text color of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;"> This is a heading </h1>
<p style="color:green;"> This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
Font-Family:-
The CSS font-family property defines the font to be used for an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:Verdana;"> This is a heading </h1>
<p style="font-family:courier;"> This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
Text Size:-
The CSS font-size property defines the text size of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;"> This is a heading </h1>
<p style="font-size:150%;"> This is a paragraph. You can change the heading and paragraph size using the font-size property. </p>
</body>
</html>
Try this code for a better experience
Text Alignment:-
The CSS text-alignment property defines the horizontal text alignment for an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;"> This is a heading </h1>
<p style="text-align:center;"> </p>
</body>
</html>
Try this code for a better experience
.png&description=What is HTML Styles | HTML Styles | HTML Tutorial Class 6 | Learn HTML | HTML Basic | HTML Code){kind=link}
0 Comments