Tuesday, May 21, 2024

CSS Text & Fonts

 Text&fonts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text&fonts</title>
    <link rel="stylesheet" href="Text&fonts.css">
</head>
<body>
    <h1>Fonts and Text</h1>
    <p><span>Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</body>
</html>
Text&fonts.css
h1{
    font-family: "Helvetica";
    font-size: 40px;
}
p{
    font-family: Arial, Helvetica, sans-serif;
    font-style: Italic;
    text-decoration: underline;
    font-size: 1.7em;
}
span{
    font-weight: bold;
}

*{
    line-height: 2;
}




OUTPUT



Text Properties

  1. color:

    • Sets the color of the text.
    • Example: p { color: #333333; }

  2. text-align:

    • Specifies the horizontal alignment of text.
    • Values: left, right, center, justify.
    • Example: h1 { text-align: center; }

  3. text-decoration:

    • Adds decoration to the text.
    • Values: none, underline, overline, line-through, blink.
    • Example: a { text-decoration: none; }

  4. text-transform:

    • Controls the capitalization of text.
    • Values: none, capitalize, uppercase, lowercase.
    • Example: p { text-transform: uppercase; }

  5. text-indent:

    • Indents the first line of text in an element.
    • Example: p { text-indent: 50px; }

  6. line-height:

    • Sets the amount of space between lines of text.
    • Example: p { line-height: 1.5; }

  7. letter-spacing:

    • Sets the space between characters.
    • Example: h1 { letter-spacing: 2px; }

  8. word-spacing:

    • Sets the space between words.
    • Example: p { word-spacing: 4px; }

  9. text-shadow:

    • Adds shadow to text.
    • Example: h1 { text-shadow: 2px 2px 5px gray; }

  10. text-overflow:

    • Specifies how overflowed content that is not displayed is signaled to the user.
    • Values: clip, ellipsis.
    • Example: div { text-overflow: ellipsis; }

  11. white-space:

    • Specifies how white space inside an element is handled.
    • Values: normal, nowrap, pre, pre-line, pre-wrap.
    • Example: pre { white-space: pre; }

  12. text-align-last:

    • Sets how the last line of a block or a line right before a forced line break is aligned.
    • Values: auto, left, right, center, justify.
    • Example: p { text-align-last: right; }

  13. text-decoration-color:

    • Sets the color of the text decoration.
    • Example: a { text-decoration-color: red; }

  14. text-decoration-style:

    • Sets the style of the text decoration.
    • Values: solid, double, dotted, dashed, wavy.
    • Example: a { text-decoration-style: dashed; }

  15. text-decoration-line:

    • Specifies what kind of line decorations are added to the text.
    • Values: none, underline, overline, line-through.
    • Example: a { text-decoration-line: underline; }

Font Properties

  1. font-family:

    • Specifies the font family for text.
    • Example: p { font-family: Arial, sans-serif; }

  2. font-size:

    • Sets the size of the font.
    • Example: p { font-size: 16px; }

  3. font-weight:

    • Sets the weight (boldness) of the font.
    • Values: normal, bold, bolder, lighter, 100 to 900.
    • Example: h1 { font-weight: bold; }

  4. font-style:

    • Sets the style of the font.
    • Values: normal, italic, oblique.
    • Example: p { font-style: italic; }

  5. font-variant:

    • Specifies whether or not a text should be displayed in a small-caps font.
    • Values: normal, small-caps.
    • Example: p { font-variant: small-caps; }

  6. font-size-adjust:

    • Preserves the readability of text when the font fallback is used.
    • Example: p { font-size-adjust: 0.5; }

  7. font-stretch:

    • Selects a normal, condensed, or expanded face from a font.
    • Values: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded.
    • Example: p { font-stretch: expanded; }

  8. font:

    • Shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.
    • Example: p { font: italic small-caps bold 16px/1.5 Arial, sans-serif; }
USAGE EXAMPLE

body { font-family: Arial, sans-serif; font-size: 16px; color: #333; line-height: 1.6; } h1 { font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } p { text-indent: 50px; letter-spacing: 1px; word-spacing: 2px; text-align: justify; } a { text-decoration: none; color: blue; } a:hover { text-decoration: underline; } blockquote { font-style: italic; border-left: 5px solid #ccc; padding-left: 10px; margin-left: 0; color: #555; }

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

HTML Semantics sheet

<article> : Defines independent, self-contained content. <aside>: Contains content that is tangentially related to the content...