- 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 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: 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/normal/oblique
font-weight: bold/900
font: italic small-caps 900 12px arial
font: caption/icon/menu/message-box/small-caption/status-bar