- in an external style sheet in a css file
==== CSS Syntax====
CSS syntax is made up of three parts - selector {property: value}.
* Multiple property-value pairs may be separated by semi-colons.
* Multiple selectors must be separated by commas
* Values must be quoted if they are multiple words
* A simple example
h1,h2,h3 {
text-align: center;
color: black;
font-family: "sans serif" }
* Classes allow groups of elements to share formatting e.g.
p.right {text-align: right}
.blue {color: blue}
right-aligned blue text
* Styles can also match on attribute values or id e.g.
input[type="text"] {background-color: blue}
#id {background-color: blue}
p#id {background-color: blue}
* CSS uses C-style comments - /* comment */ .
==== CSS Background/Text Properties ====
* Background properties examples
background-color: black;
background-image: url('bg.jpg');
background-repeat: repeat-[x|y]/no-repeat/repeat;
background-attachment: fixed
background-position: center/30% 20%/50px 100px;
background: blue url('bg.gif') no-repeat fixed center;
* Text properties examples
color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue;
text-align: left/right/center/justify ; text-indent: 1cm;
letter-spacing: 0.5cm/-3px ; line-height: 200%;
white-space: nowrap ; word-spacing: 30px
text-decoration: overline/line-through/underline/blink/none
text-transform: uppercase/lowercase/capitalize
* Font properties examples
font-family: times/sans-serif ; font-size: 130%
font-size-adjust: 0.60 ; font-variant: small-caps
font-style: italic/oblique ; font-stretch: wider
font-weight: bold/900
font: italic small-caps 900 12px arial
font: caption/icon/menu/message-box/small-caption/status-bar
==== CSS Border/List Properties ====
* Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border.
border-style: medium/solid/double/groove/dotted/
dashed/inset/outset;
border-btlr: width style color ; border-btlr-style
border-width:5px ; border-btlr-width: thick
border-color: color x 4; border-btlr-color
outline-color/style/width ; outline:color style width
* A margin describes space around the element. Padding defines the space between border and content.
margin: width x 4 (trbl); margin-btlr
padding: width x 4 (trbl); padding-btlr
* List properties examples
list-style-type: disc/circle/square/none
list-style-type: lower/upper-roman/alpha / decimal
list-style-image: url('a.gif')
list-style-position: inside/outside
list-style: type position image
* Table properties examples
table-layout: automatic/fixed;
border-collapse:collapse/separate; empty-cells:show/hide
border-spacing: width x 2;caption-side: btlr
==== Sizing and Positioning CSS Properties ====
* Size properties examples
height/width: auto/50%/100px
min/max-height/width:none/50%/100px
line-height: normal/100px/1/50%
* Position properties
display: inline/none/block (lots of others)
float: btlr ;
position: relative(to normal)/absolute(rel to block)
/fixed(rel to window, doesn't move)/static(normal) ;
bottom/top/left/right: +/-100px/width
vertical-align:top/bottom/text-top/text-bot/sub/super
* Visibility properties
visibility:visible/hidden/collapse (for table elems)
clear:left/right/both/none (where floats aren't allowed)
clip: rect(10px, 5px, 10px, 5px)
overflow:auto/scroll/visible/hidden
z-index: 1 (0 is normal)
==== Advanced CSS ====
* Pseudo classes can restrict the selector. a:hover and a:active may have to come after a:link and a:visited.
selector.class:pseudo-class {property: value}
a:link {color: #FF0000} (unvisited link)
a:visited {color: #00FF00} (visited link)
a:hover {color: blue} (mouse-over element)
a:active {color: #0000FF} (selected element)
a:focus {color: #0000FF} (focused element - not in IE)
p:first-child {font-weight:bold}
p > em:first-child { } ; p:first-child em { }
* Pseudo elements are dynamic elements
p:first-letter {} ; p:first-line {} ;
h1:before {} ; h1:after {} ;
* @media allows different styles for different media. Media examples include screen, print, handheld, projection, tty, tv, aural, braille. @media screen,print { p {color:blue} }
* Misc Properties
opacity:0.4; (for firefox)
filter:alpha(opacity=40) (for IE)
onmouseover="this.style.opacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;
this.filters.alpha.opacity=40"
cursor:deflt/cursor/pointer/move/wait/help/text/crosshair