HTML Styles
HTML Style Attribute
The style attribute in HTML is used to add CSS (Cascading Style Sheets) directly inside an HTML element. It helps to control the appearance of elements like color, size, font, alignment, and more.
syntax
<tagname style="property:value;">
Background Color
Background color in HTML is used to change the background appearance of an element or a whole webpage. It is done using the style attribute with the CSS property background-color.
Key Points
- Used to set the background color of text, elements, or page
- Applied using: style="background-color: color;"
- Works on almost all HTML elements
- Helps improve design and readability
Example
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Text Color
Text color in HTML is used to change the color of text on a webpage. It is done using the style attribute with the CSS property color.
Key Points
- Used to change the color of text
- Applied using: style="color: value;"
- Works on headings, paragraphs, and other text elements
- Helps improve design and readability
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts
Fonts in HTML are used to change the style, size, and appearance of text on a webpage. Fonts are controlled using the CSS font-family property inside the HTML style attribute.
Key Points
- Fonts define how text looks on a webpage
- Controlled using font-family in CSS
- Applied using the style attribute
- You can use single or multiple fallback fonts
- Different fonts improve design and readability
Example
<!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>
Text Size
Text size in HTML is used to control how big or small text appears on a webpage. It is done using the CSS font-size property inside the style attribute.
Key Points
- Used to change the size of text
- Controlled using font-size
- Can be applied to headings, paragraphs, and other text elements
- Size can be given in:
- pixels (px)
- percentages (%)
- em units (em)
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Text Alignment
Text alignment in HTML is used to control how text is positioned horizontally on a webpage. It is done using the CSS property text-align inside the style attribute.
Key Points
- Used to align text on a webpage
- Controlled using text-align
- Common alignment types:
- left
- right
- center
- justify
- Can be applied to headings, paragraphs, and other elements
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>