HTML CSS Styles Overview

HTML Styles Overview

• The style attribute in HTML allows the addition of CSS styles to elements for appearance changes like color and font.
• Syntax structure includes: style="property: value;", where "property" is a CSS property, and "value" is the CSS value.

Background Color

• The background-color property sets the background color of an HTML element, enhancing visual appeal.
• Example use: style="background-color: powderblue;" for a heading or paragraph.

Text Color

• The color property specifies the text color displayed within an HTML element, impacting readability and design.
• Example: Using style="color: blue;" to change text color.

Fonts

• The font-family property dictates the font type used within an HTML element, allowing for customization of text appearance.
• Consistent font usage establishes a document's theme.

Text Size

• The font-size property determines the size of the text, affecting design hierarchy and emphasis on certain text.
• Different sizes can convey importance or visual structure in content.

Text Alignment

• The text-align property controls the alignment of text, with options like left, right, center, or justified aligning.
• Example: style="text-align: center;" for centering text.

HTML Text Formatting Elements

• Various HTML elements can format text with specific meanings, enhancing semantic content:
  • Bold: <b> for bold text with no added emphasis.
  • Important: <strong> for text indicating strong importance, typically bold by default.
  • Italic: <i> for alternate voice/mood, often rendered in italic.
  • Emphasized: <em> for emphasized words, pronounced with stress by screen readers.
  • Marked: <mark> for highlighted or marked text.
  • Smaller Text: <small> defines smaller text content, typically reducing size.
  • Deleted Text: <del> shows text that has been removed with a strikethrough effect.
  • Inserted Text: <ins> indicates newly added text, usually displayed with an underline.
  • Subscript: <sub> lowers text position for chemical formulas, like H₂O.
  • Superscript: <sup> raises text position for footnotes or annotations, like WWW.

HTML Quotation and Citation Elements

• Elements for quoting or citing sources ensure clarity and proper attribution in content:
  • Blockquote: <blockquote> defines a long quotation from another source, often indented for emphasis.
  • Cite: <cite> is used to refer to the title of a work or its source, enhancing credibility and reference.
  • Q: The <q> tag denotes short quotations, with browsers adding quotation marks automatically for clarity.