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 {}
selects all unvisited links
a:visited{}
selects all visited links
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:
none
left, right, both
Positioned
Applies to all …
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, …
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 …
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 …
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 {
background-color: #E20A0A;
color: #ffffff;
}
.green {
background-color: …
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 …
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 …
How to display spreadsheet data in an attractive and usable way with CSS
You can style the table using CSS, which keeps markup to a minimum and allows you to control your data table’s appearance from the style sheet. You can create a .css file by following the next steps:
1. You can provide a basic rule for <p>, <td> and <th> tags …