Scribd Logo
Upload

Welcome to Scribd!

  • CSS Property

    Uploaded by

    Ahn
    13 views4 pages
    This document describes various CSS selectors and how to use them: 1. It explains different types of CSS selectors like type selectors, class selectors, id selectors, descendant selectors, child selectors, and attribute selectors. 2. It provides examples of how to select elements based on their type, class, id, descendants, children, and attributes. 3. It also discusses how to define multiple style rules for a single element by combining property and value pairs, and how to group selectors by separating them with commas.

    Original Description:

    Original Title

    CSS PROPERTY

    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
    This document describes various CSS selectors and how to use them: 1. It explains different types of CSS selectors like type selectors, class selectors, id selectors, descendant selectors, child selectors, and attribute selectors. 2. It provides examples of how to select elements based on their type, class, id, descendants, children, and attributes. 3. It also discusses how to define multiple style rules for a single element by combining property and value pairs, and how to group selectors by separating them with commas.

    Copyright:

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

    CSS Property

    Uploaded by

    Ahn
    This document describes various CSS selectors and how to use them: 1. It explains different types of CSS selectors like type selectors, class selectors, id selectors, descendant selectors, child selectors, and attribute selectors. 2. It provides examples of how to select elements based on their type, class, id, descendants, children, and attributes. 3. It also discusses how to define multiple style rules for a single element by combining property and value pairs, and how to group selectors by separating them with commas.

    Copyright:

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

    CSS PROPERTY WHAT IT DOES HOW TO USE IT

    color For text elements, changes the text color Use either named colors, HEX, RGB/RGBA, or
    HSL/HSLA formats

    font-size Changes the font size Defined in px, %, em, or rem


    Learn more about rems here

    font-style Changes the font style Most commonly normal or italic

    line-height Changes the height of the line Defined in  px, %, em, or rem


    Learn more about rems here

    text-align Changes text alignment Most commonly left, right or center

    background- Changes the background color of the element Use either named colors, HEX, RGB/RGBA, or
    color HSL/HSLA formats

    width and height Changes the width and height of the element. Defined in  px, %, em, or rem
    Useful to specify the exact size of images. Learn more about rems here
    The Type Selectors document. You can make it a bit more
    particular. For example −
    This is the same selector we have seen above.
    Again, one more example to give a color to all h1.black {
    level 1 headings − color: #000000;
    }
    h1 { This rule renders the content in black for only
    color: #36CFFF;
    <h1> elements with class attribute set to black.
    }
    You can apply more than one class selectors to
    given element. Consider the following example
    The Universal Selectors
    −
    Rather than selecting elements of a specific
    type, the universal selector quite simply <p class = "center bold">
    This para will be styled by the classes center
    matches the name of any element type −
    and bold.
    *{ </p>
    color: #000000;
    }
    The ID Selectors
    This rule renders the content of every element
    in our document in black. You can define style rules based on
    the id attribute of the elements. All the
    The Descendant Selectors elements having that id will be formatted
    Suppose you want to apply a style rule to a according to the defined rule.
    particular element only when it lies inside a
    #black {
    particular element. As given in the following
    color: #000000;
    example, style rule will apply to <em> element
    }
    only when it lies inside <ul> tag.
    This rule renders the content in black for every
    ul em { element with id attribute set to black in our
    color: #000000; document. You can make it a bit more
    } particular. For example −

    h1#black {
    The Class Selectors color: #000000;
    }
    You can define style rules based on the class This rule renders the content in black for only
    attribute of the elements. All the elements <h1> elements with id attribute set to black.
    having that class will be formatted according to
    the defined rule. The true power of id selectors is when they are
    used as the foundation for descendant
    .black { selectors, For example –
    color: #000000;
    } #black h2 {
    This rule renders the content in black for every color: #000000;
    element with class attribute set to black in our }
    In this example all level 2 headings will be  p[lang|="en"] − Selects all
    displayed in black color when those headings paragraph elements
    will lie with in tags having id attribute set whose lang attribute contains
    to black. values that are exactly "en",
    or begin with "en-".
    The Child Selectors
    Multiple Style Rules
    You have seen the descendant selectors. There
    is one more type of selector, which is very You may need to define multiple style rules for
    similar to descendants but have different a single element. You can define these rules to
    functionality. Consider the following example − combine multiple properties and corresponding
    values into a single block as defined in the
    body > p {
    following example −
    color: #000000;
    } h1 {
    This rule will render all the paragraphs in black color: #36C;
    if they are direct child of <body> element. Other font-weight: normal;
    paragraphs put inside other elements like <div> letter-spacing: .4em;
    or <td> would not have any effect of this rule. margin-bottom: 1em;
    text-transform: lowercase;
    The Attribute Selectors }
    You can also apply styles to HTML elements Here all the property and value pairs are
    with particular attributes. The style rule below separated by a semicolon (;). You can keep
    will match all the input elements having a type them in a single line or multiple lines. For better
    attribute with a value of text − readability, we keep them in separate lines.

    For a while, don't bother about the properties


    input[type = "text"] {
    mentioned in the above block. These properties
    color: #000000;
    } will be explained in the coming chapters and
    you can find complete detail about properties in
    The advantage to this method is that the <input
    CSS References
    type = "submit" /> element is unaffected, and
    the color applied only to the desired text fields.

    There are following rules applied to


    attribute selector.
     p[lang] − Selects all
    paragraph elements with
    a lang attribute.
     p[lang="fr"] − Selects all
    paragraph elements
    whose lang attribute has a
    value of exactly "fr".
     p[lang~="fr"] − Selects all Grouping Selectors
    paragraph elements
    whose lang attribute contains
    the word "fr".
    You can apply a style to many selectors if you
    like. Just separate the selectors with a comma,
    as given in the following example –

    h1, h2, h3 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;

    }
    This define style rule will be applicable to h1, h2
    and h3 element as well. The order of the list is
    irrelevant. All the elements in the selector will
    have the corresponding declarations applied to
    them.

    You can combine the various id selectors


    together as shown below −

    #content, #footer, #supplement {


    position: absolute;
    left: 510px;
    width: 200px;
    }

    You might also like