HTML Styles
- HTML <style> attribute is used to add styles to an element,such as color, font, size, and etc.
- The <style> tag in html can helps us to modify and edit our text but also we can change the style of a body or part of a page using CSS.
Syntax:
<tagname style ="property: value;">
What are the styles in HTML:
Example:
<!DOCTYPE html>
<html>
<body>
<p style ="color: red;">Gocourse</p>
<p style ="color: pink;">Gocourse</p>
<p style ="color: green;">Gocourse</p>
<p style ="color: blue;">Gocourse</p>
</body>
</html>
Output:
Text Color:
- The text color can be altered using the CSS color to your web page.
- If you want to quickly see how to add the color of your text.
- Hexadecimal, RGB, HSL, and color names are all acceptable values for this property.
- For instance, you can use the name skyblue, the hex code #87CEEB, the RGB decimal code rgb(135,206,235), or the HSL value hsl (197, 71%, 73%), to change the text's color to sky blue.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style ="color: blue;">HTML</h1>
<p style ="color: skyblue;">Welcome to
Gocourse!</p>
<p
style ="color: #87CEEB;">Welcome to
Gocourse!</p>
<p style ="color: rgb(134,204,235);">Welcome
to Gocourse!</p>
<p style ="color: hsl(197, 71%,73%);">Welcome
to Gocourse!</p>
</body>
</html>
Output:
Background Color:
- This background-color property defines the background for the HTML element.
- The style attribute, with the CSS property background-color use inside the body tag of the HTML document.
Example:
<!DOCTYPE
html>
<html>
<body
style ="background-color: pink;">
<h1>HTML</h1>
<p> This is my html
page.</p>
</body>
</html>
Output:
Text Alignment:
- Alignment of the text using the text-align property. We can align the text in the Center, Right, Left.
- To move a text at center position or wherever using the text-align tag. which is to be displayed on a web page.
Example: Text align in center
<!DOCTYPE html>
<html>
<head>
<title>Text alignment</title>
</head>
<body>
<h1 style ="text-align: center;">GOCOURSE</h1>
<h1 style ="font-size: medium;"></h1>
<head>
<title>Text alignment</title>
</head>
<body>
<h1 style ="text-align: center;">GOCOURSE</h1>
<h1 style ="font-size: medium;"></h1>
<p
style ="text-align: center;">Use text-align
for text alignment</p>
</body>
</html>
</html>
Output:
Example: Text align in right
<!DOCTYPE
html>
<html>
<head>
<title>Text
alignment</title>
</head>
<body>
<h1
style ="text-align: right;">GOCOURSE</h1>
<p
style ="text-align: right;">Use text-align
for text alignment</p>
</body>
</html>
Output:
Example: Text align in left
<!DOCTYPE
html>
<html>
<head>
<title>Text
alignment</title>
</head>
<body>
<h1
style ="text-align: left;">GOCOURSE</h1>
<p
style ="text-align: left;">Use text-align for text
alignment</p>
</body>
</html>
Output:
Text size:
- The style property in HTML to specify the font-size.
- An element's inline style is specified through the style property.
- The attribute can use with the CSS property font-size and the HTML <p> tag.
- Since the <font> tag is not supported by HTML5, font size is added using the CSS style.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1 style ="font-size: 50px;">HTML
Font-size</h1>
<p
style ="font-size: 80px;">This is HTML
font-size </p>
</body>
</html>
Output:
Text Color:
- HTML text color defines the text color for the paragraph.
- It specify internal style for an element, with the CSS property color to set font color in HTML.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style ="color: blue;">HTML</h1>
<p style ="color: red;">HyperText Markup
Language</p>
</body>
</html>
Output:
