What are HTML Styles?
In HTML, The attribute style="" is used to define a paragraph.
Important Points
- You can put HTML styles in all types of HTML Elements.
- HTML styles provide additional information to HTML Elements.
- In HTML, both the style tag (<style>) and the style attribute (style="") can be used.
- More than 100 HTML styles can be written in the same starting tag.
- In a starting tag, HTML style attribute are written as (style="property: value;"). For Ex: <p style="color: blue;">Codingwith Anas</p>.
What HTML Styles Can Do
Style made this paragraph red!
Style made this heading green!
Style made this heading biggers and blue!
HTML Style Tag
The Tag <style> can be used anywhere in an HTML document to apply CSS to many elements at once, but it is preferred to place it inside the <header> is more prefered because this helps the browser apply all style rules before displaying the content and This method of using CSS inside an HTML document is called "Internal CSS".
<style>
p {
color: blue;
}
</style>
<p>CWA is short form of "Codingwith Anas".</p>
HTML Style Attribute
The Attribute style="" is used to apply CSS to a single HTML Elements directly and this method of using CSS directly into an HTML element is knows as "Inline CSS".
<p style="color: blue;">CWA is short form of "Codingwith Anas"</p>
Background Color Property
The background-color property of CSS is used to add background color to an HTML Elements.
<body styles="background-color: red;">
<p>The backgroud color is now red.</p>
</body>
Text Color Property
The color property of CSS is used to add color to text in HTML Elements.
<p style="color: maroon;">CWA is the best learning platform</p>
Font Size Property
The font-size property of CSS is used to set size of a text in HTML Elements.
<p style="font-size: 20px;">CWA also designs & develops sites</p>
Font Family Property
The font-family property of CSS is used to change font style of a text in HTML Elements.
<p>Normal Font</p>
<p style="font-family: cursive;">Edited Font</p>
Text Align Property
The text-align property of CSS is used to set alignment of text horizontally of an HTML Elements.
<p style="text-align: center;">You can set it to "left" or "right" too</p>