Scribd Logo
Upload

Welcome to Scribd!

  • 1

    Uploaded by

    Ramana Kumar.S.V
    10 views2 pages
    The document contains examples of using various CSS properties to style text including: vertical-align to control image positioning, text-decoration properties like line, thickness and color, text-transform to uppercase, lowercase or capitalize text, word-spacing to increase or decrease spacing between words, and line-height to adjust line spacing. Code samples with HTML and CSS are provided to demonstrate the effects of these different text styling properties.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains examples of using various CSS properties to style text including: vertical-align to control image positioning, text-decoration properties like line, thickness and color, text-transform to uppercase, lowercase or capitalize text, word-spacing to increase or decrease spacing between words, and line-height to adjust line spacing. Code samples with HTML and CSS are provided to demonstrate the effects of these different text styling properties.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    10 views2 pages

    1

    Uploaded by

    Ramana Kumar.S.V
    The document contains examples of using various CSS properties to style text including: vertical-align to control image positioning, text-decoration properties like line, thickness and color, text-transform to uppercase, lowercase or capitalize text, word-spacing to increase or decrease spacing between words, and line-height to adjust line spacing. Code samples with HTML and CSS are provided to demonstrate the effects of these different text styling properties.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 2

    1. <p>An <img class="b" src="sqpurple.

    gif" width="9"
    <!DOCTYPE html> height="9"> image with a text-top alignment.</p>
    <html> <h2>vertical-align: text-bottom:</h2>
    <head> <p>An <img class="c" src="sqpurple.gif" width="9"
    <style> height="9"> image with a text-bottom alignment.</p>
    body { <h2>vertical-align: sub:</h2>
    background-color: lightgrey; <p>An <img class="d" src="sqpurple.gif" width="9"
    color: blue; height="9"> image with a sub alignment.</p>
    } <h2>vertical-align: sup:</h2>
    <p>An <img class="e" src="sqpurple.gif" width="9"
    h1 { height="9"> image with a super alignment.</p>
    background-color: black; </body>
    color: white; </html>
    } 3.
    <!DOCTYPE html>
    div { <html>
    background-color: blue; <head>
    color: white; <style>
    } h1 {
    </style> text-decoration: underline;
    </head> }
    <body> h2 {
    text-decoration: underline red;
    <h1>This is a Heading</h1> }
    <p>This page has a grey background color and a blue h3 {
    text.</p> text-decoration: underline red double;
    <div>This is a div.</div> }
    p{
    </body> text-decoration: underline red double 5px;
    </html> }
    2. </style>
    <!DOCTYPE html> </head>
    <html> <body>
    <head> <h1>Heading 1</h1>
    <style> <h2>Heading 2</h2>
    img.a { <h3>Heading 3</h3>
    vertical-align: baseline; <p>A paragraph.</p>
    }
    img.b { </body>
    vertical-align: text-top; </html>
    } 4.
    <!DOCTYPE html>
    img.c { <html>
    vertical-align: text-bottom; <head>
    } <style>
    h1 {
    img.d { text-decoration-line: underline;
    vertical-align: sub; text-decoration-thickness: auto; /* this is default */
    } }

    img.e { h2 {
    vertical-align: super; text-decoration-line: underline;
    } text-decoration-thickness: 5px;
    </style> }
    </head>
    <body> h3 {
    text-decoration-line: underline;
    <h1>The vertical-align Property</h1> text-decoration-thickness: 25%;
    }
    <h2>vertical-align: baseline (default):</h2>
    <p>An <img class="a" src="sqpurple.gif" width="9" p{
    height="9"> image with a default alignment.</p> text-decoration-line: underline;
    text-decoration-color: blue;
    <h2>vertical-align: text-top:</h2> text-decoration-style: double;
    text-decoration-thickness: 5px; <p class="one">This is a paragraph with larger word
    } spacing.</p>
    </style>
    </head> <p class="two">This is a paragraph with smaller word
    <body> spacing.</p>

    <h1>Heading 1</h1> </body>


    <h2>Heading 2</h2> </html>
    <h3>Heading 3</h3> 7.
    <p>A paragraph.</p> <!DOCTYPE html>
    <html>
    </body> <head>
    </html> <style>
    5. h2 {
    <!DOCTYPE html> letter-spacing: 5px;
    <html> }
    <head>
    <style> h3 {
    p.uppercase { letter-spacing: -2px;
    text-transform: uppercase; }
    } p.small {
    line-height: 0.7;
    p.lowercase { }
    text-transform: lowercase;
    } p.big {
    line-height: 1.8;
    p.capitalize { }
    text-transform: capitalize; </style>
    } </head>
    </style> <body>
    </head>
    <body> <h1>Using letter-spacing</h1>

    <h1>Using the text-transform property</h1> <h2>This is heading 1</h2>


    <h3>This is heading 2</h3>
    <p class="uppercase">This text is transformed to
    uppercase.</p> <hr color=red>
    <p class="lowercase">This text is transformed to <h1>Using line-height</h1>
    lowercase.</p>
    <p class="capitalize">This text is capitalized.</p> <p>
    This is a paragraph with a standard line-height.<br>
    </body> The default line height in most browsers is about 110%
    </html> to 120%.<br>
    6. </p>
    <!DOCTYPE html>
    <html> <p class="small">
    <head> This is a paragraph with a smaller line-height.<br>
    <style> This is a paragraph with a smaller line-height.<br>
    p.one { </p>
    word-spacing: 10px;
    } <p class="big">
    This is a paragraph with a bigger line-height.<br>
    p.two { This is a paragraph with a bigger line-height.<br>
    word-spacing: -2px; </p>
    }
    </style> </body>
    </head> </html>
    <body>

    <h1>Using word-spacing</h1>

    <p>This is a paragraph with normal word spacing.</p>

    You might also like