Scribd Logo
Upload

Welcome to Scribd!

  • 82 views

    CSS Cheat Sheet: Pseudo-Selectors

    Uploaded by

    Lara__Croft
    Pseudo-selectors allow adding styles to elements based on certain states or characteristics without adding additional markup. Some common pseudo-selectors include :hover, :active, :first-child, :link, and :visited. CSS syntax uses selectors to target elements for styling by tag name, class, ID, or other attributes. Properties then define styles for things like font, color, size, positioning, and box model attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Cheat Sheet: Pseudo-Selectors

    Uploaded by

    Lara__Croft
    82 views2 pages
    Pseudo-selectors allow adding styles to elements based on certain states or characteristics without adding additional markup. Some common pseudo-selectors include :hover, :active, :first-child, :link, and :visited. CSS syntax uses selectors to target elements for styling by tag name, class, ID, or other attributes. Properties then define styles for things like font, color, size, positioning, and box model attributes.

    Original Description:

    csscs nice

    Original Title

    css-cheat-sheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Pseudo-selectors allow adding styles to elements based on certain states or characteristics without adding additional markup. Some common pseudo-selectors include :hover, :active, :first-child, :link, and :visited. CSS syntax uses selectors to target elements for styling by tag name, class, ID, or other attributes. Properties then define styles for things like font, color, size, positioning, and box model attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    82 views2 pages

    CSS Cheat Sheet: Pseudo-Selectors

    Uploaded by

    Lara__Croft
    Pseudo-selectors allow adding styles to elements based on certain states or characteristics without adding additional markup. Some common pseudo-selectors include :hover, :active, :first-child, :link, and :visited. CSS syntax uses selectors to target elements for styling by tag name, class, ID, or other attributes. Properties then define styles for things like font, color, size, positioning, and box model attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 2

    Pseudo -selec tors

    CSS Cheat :ac tive Adds style to ac tive element

    Sheet :af ter

    :before
    Adds content af ter element

    Ads content before element

    :first- child Adds style to first child

    Syntax :first-letter Adds style to first charac ter

    Inline Style :first-line Adds style to first line


    <tag style="proper ty : value;">
    :focus Adds style to focused element
    Ex ternal Style Sheet
    <head> :hover Adds style when mouse is over
    <link rel="stylesheet"
    type=" tex t/css" href="style.css" /> :link Adds style to unvisited link

    Embedded Style :visited Adds style to visited link


    <head>
    <style type=" tex t/css"> Tex t
    selec tor { proper ty : value; }
    </style> font-family Specifies the font family

    font-size Specifies the font size


    /* Comments */
    @media type { Note:
    font-style normal | italic | oblique | inherit
    selec tor { media type is optional
    proper ty : value;
    } font-variant normal | small- caps | inherit
    }
    normal | bold | bolder | lighter |
    Selec tors font-weight
    int (100- 900) | inherit

    * All elements color Sets the color of tex t

    tag All tag elements line -height normal | int | % | inherit

    lef t | right | center | justify |


    tag * All elements within tag tex t-align
    inherit

    tag tag2 tag2 elements within tag tex t- none | underline | overline |
    decoration line -through | blink | inherit
    tag, tag2 All tag and tag2
    tex t-indent int | % | inherit

    tag > tag2 tag2 is a child of tag


    tex t- none | capitalize | uppercase
    transform | lowercase | inherit
    tag + tag2 tag2 preceded by tag
    int | % | baseline | sub |
    ver tical super | top | tex t-top
    .class Elements with class -align middle | bottom |
    tex t-bottom | inherit
    tag.class All tags with class ‘class’
    white normal | nowrap | pre |
    -space pre -line | pre -wrap| inherit
    #id Element with id ‘id’
    word- normal | length | inherit
    tag#id Tag with id ‘id’ spacing
    Box Model Size and colors

    TOP Relative em | rem | ex | ch


    sizes v w | vh | vmin | vmax | %

    BORDER
    Absolute cm | mm | in | px | pt | pc
    sizes

    WIDTH Hex #ff00ff


    Colors
    RGB rgb(255,0,255)

    RIGHT
    LEFT

    HEIGHT

    Positioning
    CONTENT
    absolute | fixed | relative |
    position
    static | inherit
    PADDING
    float lef t | right | none |
    MARGIN inherit
    top, right, Sets the offset from the edge
    BOT TOM bottom, lef t

    Boxes lef t | right | both | none |


    clear
    inherit
    margin-top
    margin margin-right Specifies element placing in
    display
    margin-bottom the document flow
    margin-lef t
    visible | hidden | scroll | auto
    over flow | inherit
    padding-top
    padding padding-right
    padding-bottom visible | hidden | collapse |
    visibility
    padding-lef t inherit

    border-top z-index auto | int | inherit


    border border-right
    border-bottom Dimensions
    border-lef t
    height auto | int | % | inherit
    border-top - color
    border- color border-right- color max-height none | int | % | inherit
    border-bottom- color
    border-lef t- color
    max-height none | int | % | inherit
    border-top -style
    border-right-style max-width none | int | % | inherit
    border-style border-bottom-style
    border-lef t-style min-height int | % | inherit

    border-top -width min-width int | % | inherit


    border-width border-right-width
    border-bottom-width width auto | int | % | inherit
    border-lef t-width
    O ther
    border-top -lef t-radius
    border-top -right-radius Format:
    border-radius border-bottom-lef t-radius background background (color) (image)
    border-bottom-lef t-radius (repeat) (position)

    box-sizing content-box | border-box cursor Set the type of cursor


    | inherit | int
    Set type of quotation
    quotes
    marks

    You might also like