CSS

CSS Selectors

Selectors

* {}

selects all elements

p {}

selects all <p> elements

*.c {}

selects all elements where

p.c {}

selects all <p> elements where

#main {}

selects one element where id =”main”

a:link {}

Learn more

Layout CSS properties and values

Layout

Inherited

Default value

Possible values

Float

 

Applies to all except cells and rows

float:

 

none

left, right

Clear

 

Applies to all except inlines, inline-blocks, cells, & rows.

clear:

…

Learn more

Content CSS properties and values

Content

Inherited

Applies to all except for rows

default value

possible values

padding:

0
LENGTH

padding-left:

0
LENGTH

padding-right:

0
LENGTH

padding-top:

0
LENGTH

padding-bottom:

0
LENGTH

font:
yes
caption
Icon, menu, message-box, small-caption, status-bar

font-family:
yes
serif
FONTLIST, sans-serif, monospace, fantasy, cursive

font-size:
yes
medium
LENGTH,%ParentElementFontSize, xx-small,x-small, smaller, small, large, larger, x-large,  xx-large

font-style:
yes
normal
italic, oblique

font-variant:
yes
normal
small-caps

font-weight:
yes
normal
Lighter, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900

text-decoration:
yes
none
underline, line-through, …

Learn more

Common CSS properties and values

The next list includes only those CSS properties and values that work in all the major browsers.

Commom

Inherited

Applies to all elements and box models

default value

possible values

display:

inline
none, block, inline-block, list-itme, table-cell, table, table-row

visibility:
yes
visible
hidden

background-color:

transparent
COLOR

background-image:

none
url(“file.jpg”)

background-attachment:

scroll
fixed

background-position:

0% 0%
H% V%, H V, left top, left center, left …

Learn more

Typical font-size values at 96 dpi

CSS

Ems

Points

Pixels

Percent

Heading

HTML

Physical Size

xx-small

0.50em

0.57em

6pt

7pt

8px

9px

50%

57%

 

 

10pixels

12pixels

x-small

0.63em

0.69em

0.75em

7.5pt

8pt

9pt

10px

11px

12px

63%

69%

75%

h6

1

 

2

12pixels

13pixels

14pixels

small

0.82em

0.88em

0.94em

9.75pt

10.5pt

11.25pt

13px

14px

15px

82%

88%

94%

h5

 

16pixels

…

Learn more

Ratios between units of measure at 96 dpi

Value
Pixel
Point
Pica
Inch
Millimeter

1 pixel
=1 px
=0.75pt(3/4)
=0.063pc(1/16)
=0.0104in(1/96)
=0.265mm

1 point
=1.333px(4/3)
=1pt
=0.083pc(1/12)
=0.0138in(1/72)
=0.353mm

1 pica
=16px
=12pt
=1pc
=0.1667in(1/6)
=4.233mm

1 …

Learn more

How to use different colored highlights in a select menu with CSS

You can assign classes to menu options, to create multiple background colors within the drop-down color. In this case you need to set only the color and background-color properties for a menu item. The next two test files show this:

 

File test.css

.blue {

background-color: #ADD8E6;

color: #000000;

}

.red {

How to change a background color of a row from a table on hover with CSS

You can improve readability of data which is in table by changing the color of row when users mouse over it, to highlight the row they are reading. For example you can add the next additional CSS rule to the set of rules described in the article How to display spreadsheet data in an attractive and …

Learn more

How to display table rows in alternating colors with CSS

Displaying table rows in alternating colors is a common way to help users identify which row they’re focused on. You can use CSS classes to create this effect. You can add to the CSS rules shown in the article How to display spreadsheet data in an attractive and usable way with CSS one additional rule, which …

Learn more