Scribd Logo
Upload

Welcome to Scribd!

  • 1) Text Alignment: Color Property

    Uploaded by

    aruntomy
    25 views4 pages
    The document discusses various CSS properties for styling text, fonts, lists, and links. It covers properties for setting text color, alignment, decoration, and transformation. Font properties covered include font family, style, size, weight, and variant. List properties allow customizing list item markers and adding backgrounds. Link styling can differentiate between unvisited, visited, hovered, and active link states.

    Original Description:

    wp notes

    Original Title

    WP Notes_CSS Basic Properties

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various CSS properties for styling text, fonts, lists, and links. It covers properties for setting text color, alignment, decoration, and transformation. Font properties covered include font family, style, size, weight, and variant. List properties allow customizing list item markers and adding backgrounds. Link styling can differentiate between unvisited, visited, hovered, and active link states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    25 views4 pages

    1) Text Alignment: Color Property

    Uploaded by

    aruntomy
    The document discusses various CSS properties for styling text, fonts, lists, and links. It covers properties for setting text color, alignment, decoration, and transformation. Font properties covered include font family, style, size, weight, and variant. List properties allow customizing list item markers and adding backgrounds. Link styling can differentiate between unvisited, visited, hovered, and active link states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Color property

    The CSS color property defines the foreground color of the text content for an element. Its value
    can be one of the following:
    • Name of the color
    • Hexadecimal representation
    • RGB representation
    Eg: body { color: red; }
    h1 { color: #00FF00; }
    p.ex { color: RGB(62,0,255); }
    Text property
    1) Text Alignment

    The text-align property is used to set the horizontal alignment of a text.

    A text can be left or right aligned, centered, or justified.

    Eg: h1 { text-align: center; }

    h2 { text-align: left; }
    2) Text Decoration

    The text-decoration property is used to set or remove decorations from text.


    The values are none, underline, overline, line-through.
    Eg: h1 { text-decoration: overline; }
    h2 { text-decoration: line-through; }
    3) Text Transformation

    The text-transform property is used to specify uppercase and lowercase letters in a text. The
    values are uppercase, lowercase, capitalize.

    Eg: p.lowercase { text-transform: lowercase; }

    p.capitalize { text-transform: capitalize; }

    4) Text Indentation

    The text-indent property is used to specify the indentation of the first line of a text.

    Eg: p{ text-indent: 50px; }

    Font property
    CSS font properties enable you to change the look of your text. For example, you can assign a
    font family, apply bold or italic formatting, change the size and more.
    1) Font family
    The font-family property allows you to set the font family.
    1
    The font-family property accepts a list of different font families because not all users will have the
    same fonts installed on their computer.
    If the user doesn't have your first choice font, the second choice will be used, and so on.
    <style>
    p.serif { font-family: "Times New Roman", Times, serif; }
    p.sansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
    2) Font Style
    The font-style property is mostly used to specify italic text.
    This property has three values:
    • normal - The text is shown normally
    • italic - The text is shown in italics
    • oblique - The text is "leaning"
    <style>
    p.normal { font-style: normal; }
    p.italic { font-style: italic; }
    p.oblique { font-style: oblique; }
    </style>
    3) Font Size
    The font-size property sets the size of the text. The font size can be set in various units such as
    Ems, percentage, points, pixels etc.
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    p{ font-size: 14px; }
    4) Font Weight
    The font-weight property specifies the weight of a font:
    <style>
    p.normal { font-weight: normal; }
    p.light { font-weight: lighter; }
    p.thick { font-weight: bold; }
    p.thicker { font-weight: 900; }
    </style>
    5) Font Variant
    The font-variant property specifies whether or not a text should be displayed in a small-caps font
    <style>
    p.normal { font-variant: normal; }
    p.small { font-variant: small-caps; }
    </style>
    2
    CSS List Property
    The CSS list properties allow you to:
    • Set different list item markers for ordered lists
    • Set different list item markers for unordered lists
    • Set an image as the list item marker (ul { list-style-image: url('sqpurple.gif'); })
    • Add background colors to lists and list items
    The list-style-type property specifies the type of list item marker.
    Eg: <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul.a { list-style-type: circle; }
    ul.b { list-style-type: square; }
    ol.c { list-style-type: upper-roman; }
    ol.d { list-style-type: lower-alpha; }
    ol { background: #ff9999; padding: 20px; margin-left: 35px;}
    ul { background: #3399ff; }
    </style>
    </head>
    <body>
    <p>Example of unordered lists:</p>
    <ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    </ul>
    <ul class="b">
    <li>Coffee</li>
    <li>Tea</li>
    </ul>
    <p>Example of ordered lists:</p>
    <ol class="c">
    <li>Coffee</li>
    <li>Tea</li>
    </ol>
    <ol class="d">
    <li>Coffee</li>
    <li>Tea</li>

    3
    </ol>
    </body>
    </html>
    Output

    Styling Links
    Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
    links can be styled differently depending on what state they are in.
    The four links states are:
    • a:link - a normal, unvisited link
    • a:visited - a link the user has visited
    • a:hover - a link when the user mouses over it
    • a:active - a link the moment it is clicked
    <style>
    /* unvisited link */
    a:link { color: red; }

    /* visited link */
    a:visited { color: green; }

    /* mouse over link */


    a:hover { color: hotpink; }

    /* selected link */
    a:active { color: blue; }
    </style>

    You might also like