Scribd
Upload
122 views

CSS Cheat Sheet: Pseudo-Selectors

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.

Uploaded by

Lara__Croft
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
122 views

CSS Cheat Sheet: Pseudo-Selectors

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.

Uploaded by

Lara__Croft
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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