Used to apply inline styles to an element.
This style will be applied only for the particular tag used.
The style attribute takes a value in a set of CSS declarations, which consist of a property name and a value separated by a colon (;), and multiple declarations separated by semicolons.
Syntax: <tagname style="property:value;" > Content <tagname>
EDUCATION
<!DOCTYPE html>
<html>
<head>
<title>Style attribute Example</title>
</head>
<body>
<p style="background-color: red; color: white;">This is a styled p element</p>
<p style="height:100px;width:50px;color:green;">This is also a styled p element</p>
</body>
</html>Let's get to know some of the styles used.
Used to define the style of an element.
default font-size will vary depending on the tags or elements used.
we can declare the value of font-size in may ways.
These formats are applicable to many styles.
<!DOCTYPE html>
<html>
<head>
<title>Font-size Style Example</title>
</head>
<body>
<p style="font-size: 1px;">Font-size in px</p>
<p style="font-size: 1px;">Font-size in px</p>
<p style="font-size: 1pt;">Font-size in pt</p>
<p style="font-size: 1em;">Font-size in em</p>
<p style="font-size: 1%;">Font-size in %</p>
<p style="font-size: 1vh;">Font-size in vh</p>
<p style="font-size: 1rem;">Font-size in rem</p>
</body>
</html>
Used to set the color of an HTML element.
default text color for all elements is black.
we can declare the value of text color in may ways.
<!DOCTYPE html>
<html>
<head>
<title>Color Style Example</title>
</head>
<body>
<p style="color: green;">this text color in Color keywords values</p>
<p style="color: #00ff00;">this text color in Hexadecimal values</p>
<p style="color: rgb(0, 255, 0);">this text color in RGB values</p>
<p style="color: 0x00ff00;">this text color in HEX values</p>
<p style="color: hsl(120, 100%, 50%);">this text color in HSL values</p>
<p style="color: rgba(0, 255, 0, 0.5);">this text color in RGBA values</p>
<p style="color: hsla(120, 100%, 50%, 0.5);">this text color in HSLA values</p>
</body>
</html>
Used to set the background color of an HTML element.
default background color for all elements is white.
we can declare the value of background-color in may ways same as mentioned for color property.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Style Example</title>
</head>
<body style="backgound-color: orange;">
<p style="background-color: green;">this text bacground color in Color keywords values</p>
<p style="background-color: #00ff00;">this text bacground color in Hexadecimal values</p>
<p style="background-color: rgb(0, 255, 0);">this text bacground color in RGB values</p>
<p style="background-color: 0x00ff00;">this text bacground color in HEX values</p>
<p style="background-color: hsl(120, 100%, 50%);">this text bacground color in HSL values</p>
<p style="background-color: rgba(0, 255, 0, 0.5);">this text bacground color in RGBA values</p>
<p style="background-color: hsla(120, 100%, 50%, 0.5);">this text bacground color in HSLA values</p>
</body>
</html>
Used to set the font for an HTML element.
default font family for a HTML page will be sans-serif, serif, or monospace.
The are different fonts for the elements to style. some of them are listed below.
<!DOCTYPE html>
<html>
<head>
<title>Font-family Style Example</title>
</head>
<body>
<h1 style="font-family: verenda;">Headings with a font</h1>
<p style="font-family: courier;">Paragraph with a font</p>
</body>
</html>
Used to set the horizontal alignment of text within an HTML element.
Default alignment for all elements is left.
The values to set for the text-align property are
<!DOCTYPE html>
<html>
<head>
<title>Text-align Style Example</title>
</head>
<body>
<h1 style="text-align: center;">This Heading is aligned at the center</h1>
<p>This Paragraph is aligned at the left. it is default</p>
<p style="text-align: right;">This Paragraph is aligned at the right</p>
<p style="text-align: right;">This Paragraph is set justify.</p>
</body>
</html>
Used to define a visible boundary around an HTML element.
You can set the color, radius for borders also.
<!DOCTYPE html>
<html>
<head>
<title>Border Style Example</title>
</head>
<body>
<p style="border: 2px solid black;">Paragraph 1</p>
<p style="border: 2px solid red;">Paragraph 2</p>
<p style="border: 2px solid orange; border-radius: 10px;">Paragraph 3</p>
<p style="border: 2px solid violet; width: 90%; border-radius: 30px;">Paragraph 4</p>
<p style="border: 2px solid purple; width: 50%;">Paragraph 5</p>
</body>
</html>
Used to create space around an HTML element.
There will be no default margin values for maximum of the HTML elements expect for some citiation elements.
The values to set for the margin property are
Margin property itself has a set of values to define, they are
<!DOCTYPE html>
<html>
<head>
<title>Margin Style Example</title>
</head>
<body>
<p style="margin: 12px;">Paragraph text with equal margins for all sides</p>
<p style="margin-top: 12px;">Paragraph tezt with margin given at the top</p>
<p style="margin-left: 12px;">Paragraph tezt with margin given at the left</p>
<p style="margin-right: 12px;">Paragraph tezt with margin given at the right</p>
<p style="margin-botom: 12px;">Paragraph tezt with margin given at the bottom</p>
</body>
</html>The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now
