You are on page 1of 9

LAB4

The style Attribute

• The style Attribute


• The style attribute is used to add styles to an
element, such as color, font, size, and more.

• Example
<p style="color:red;">This is a red
paragraph.</p>
The style Attribute
• <!DOCTYPE html>
• <html>
• <body>

• <h2>The style Attribute</h2>


• <p>The style attribute is used to add styles to an element, such as
color:</p>

• <p style="color:red;">This is a red paragraph.</p>

• </body>
• </html>
Text color
• <html>
• <body>

• <h3 style="color:Tomato;">Hello World</h3>

• <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing


elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</p>

• <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud


exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. </p>

• </body>
• </html>
color of borders
• <!DOCTYPE html>
• <html>
• <body>

• <h1 style="border: 2px solid Tomato;">Hello World</h1>

• <h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

• <h1 style="border: 2px solid Violet;">Hello World</h1>

• </body>
• </html>
HTML Formatting Elements

• Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Text Formatting

• This text is bold


• This text is italic
• This is subscript and superscript
• <html>
• <body>

• <p> <b>This text is bold</b> </p>


• <p> <i>This text is italic</i> </p>
• <p>This is <sub> subscript</sub> and <sup>superscript</sup></p>
• <br>
• <p> <em>This text is emphasized. </em> </p>
• <p><small>This is some smaller text.</small></p>

• </body>
• </html>
The title Attribute

• The title Attribute


The title attribute defines some extra information •
.about an element

The value of the title attribute will be displayed as •


:a tooltip when you mouse over the element

Example •
• <p title="I'm a tooltip">This is a paragraph.</p>
EXAMPLE
• <!DOCTYPE html>
• <html>
• <body>

• <h2 title="I'm a header">The title Attribute</h2>

• <p title="I'm a tooltip">Mouse over this paragraph, to display


the title attribute as a tooltip.</p>

• </body>
• </html>

You might also like