0% found this document useful (0 votes)
127 views1 page

Chuleta Css

The document provides an overview of CSS selectors and properties for styling elements, including how to select elements by type, class, ID, and attributes as well as pseudo-classes and pseudo-elements. It also covers CSS properties for formatting text, colors, backgrounds, borders, dimensions, positioning and various other styles. Shorthand properties and properties that inherit styles are noted.

Uploaded by

oscarlopga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
127 views1 page

Chuleta Css

The document provides an overview of CSS selectors and properties for styling elements, including how to select elements by type, class, ID, and attributes as well as pseudo-classes and pseudo-elements. It also covers CSS properties for formatting text, colors, backgrounds, borders, dimensions, positioning and various other styles. Shorthand properties and properties that inherit styles are noted.

Uploaded by

oscarlopga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

css

Selectors

Boxes

Box Model

All elements

div

<div>

div *

margin x

border-color x

margin-top

border-top-color

All elements within <div>

margin-right

border-right-color

div span

<span> within <div>

margin-bottom

border-bottom-color

div, span

<div> and <span>

margin-left

border-left-color

div > span

<span> with parent <div>

padding x

border-style x

div + span

<span> preceded by <div>

padding-top

border-top-style

.class

Elements of class "class"

padding-right

border-right-style

div.class

<div> of class "class"

padding-bottom

border-bottom-style

#itemid

Element with id "itemid"

padding-left

border-left-style

div#itemid

<div> with id "itemid"

border x

border-width x

a[attr]

<a> with attribute "attr"

border-top x

border-top-width

a[attr='x']

<a> when "attr" is "x"

border-bottom x

border-right-width

a[class~='x']

<a> when class is a list

border-right x

border-bottom-width

border-left x

border-left-width

containing 'x'
a[lang|='en']

<a> when lang begins "en"

Pseudo-Selectors and Pseudo-Classes

Margin

Visible Area

Height

Border

Width

Padding

Positioning
display

clear

position

z-index

top

Tables

direction +

caption-side +

border-spacing +

:first-child

First child element

right

unicode-bidi

table-layout

empty-cells +

:first-line

First line of element

bottom

overflow

border-collapse +

speak-header +

:first-letter

First letter of element

left

clip

:hover

Element with mouse over

float

visibility

:active

Active element

:focus

Element with focus

:link

Unvisited links

:visited

Visited links

width

:lang(var)

Element with language "var"

:before
:after

size

page-break-inside +

marks

page +

min-height

page-break-before

orphans +

min-width

max-height

page-break-after

widows +

Before element

max-width

vertical-align

After element

height

Dimensions

Interface

Sizes and Colours

Color / Background

color +

background-repeat

0 requires no unit

Relative Sizes
em

Paging

background x

background-image

1em equal to font size of

background-color

background-position

parent (same as 100%)

background-attachment

ex

Height of lower case "x"

Percentage

Absolute Sizes
px

Pixels

cm

Text

cursor +

outline-style

outline x

outline-color

outline-width
Aural
volume +

elevation

speak +

speech-rate

pause x

voice-family

word-spacing +

pause-before

pitch

Centimeters

text-indent +
Text
text-align +

text-transform +

pause-after

pitch-range

mm

Millimeters

text-decoration

white-space +

cue x

stress

in

Inches

text-shadow

line-height +

cue-before

richness

pt

1pt = 1/72in

letter-spacing +

cue-after

speak-punctuation

pc

1pc = 12pt

play-during

speak-numeral

Colours

azimuth +

Fonts

#789abc

RGB Hex Notation

#acf

Equates to "#aaccff"

font + x

font-weight +

rgb(0,25,50)

Value of each of red, green,

font-family +

font-stretch +

and blue. 0 to 255, may be

font-style +

font-size +

content

list-style-type +

swapped for percentages.

font-variant +

font-size-adjust +

quotes +

list-style-image +

counter-reset

list-style-position +

counter-increment

marker-offset

Note

Shorthand properties are marked x


Properties that inherit are marked +

Available free from


www.AddedBytes.com

Miscellaneous

list-style + x

You might also like