Scribd Logo
Upload

Welcome to Scribd!

  • CSS Selectors: P (Text-Align: Center Color: Red )

    Uploaded by

    Muzaffar Khan
    7 views5 pages
    SDFSDF

    Original Title

    Css

    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
    SDFSDF

    Copyright:

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

    CSS Selectors: P (Text-Align: Center Color: Red )

    Uploaded by

    Muzaffar Khan
    SDFSDF

    Copyright:

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

    CSS Selectors

    CSS selectors allow you to select and manipulate HTML element(s).


    CSS selectors are used to "find" (or select) HTML elements based on their id, classes,
    types, attributes, values of attributes and much more.

    The element Selector


    The element selector selects elements based on the element name.
    You can select all <p> elements on a page like this: (all <p> elements will be centeraligned, with a red text color)

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <p>Every paragraph will be affected by the style.</p>


    <p id="para1">Me too!</p>
    <p>And me!</p>

    </body>
    </html>

    The id Selector
    The id selector uses the id attribute of an HTML tag to find the specific element.
    An id should be unique within a page, so you should use the id selector when you want
    to find a single, unique element.
    To find an element with a specific id, write a hash character, followed by the id of the
    element.
    The style rule below will be applied to the HTML element with id="para1":

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1 {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <p id="para1">Hello World!</p>


    <p>This paragraph is not affected by the style.</p>

    </body>
    </html>

    The class Selector


    The class selector finds elements with the specific class.
    The class selector uses the HTML class attribute.
    To find elements with a specific class, write a period character, followed by the name of
    the class:
    In the example below, all HTML elements with class="center" will be center-aligned:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <h1 class="center">Red and center-aligned heading</h1>

    <p class="center">Red and center-aligned paragraph.</p>

    </body>
    </html>

    Grouping Selectors
    In style sheets there are often elements with the same style:
    h1 {
    text-align: center;
    color: red;
    }
    h2 {
    text-align: center;
    color: red;
    }
    p {
    text-align: center;
    color: red;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1, h2, p {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <h1>Hello World!</h1>
    <h2>Smaller heading!</h2>
    <p>This is a paragraph.</p>

    </body>
    </html>

    You might also like