syntax

the css syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
body {color: black}
----
p
{
text-align: center;
color: black;
font-family: arial
}
p
{
text-align: center; color: black; font-family: arial
}
p {text-align: center; color: black; font-family: arial}
-----
h1,h2,h,h!,h",h#
{
color: green
}
-----
the class selector
define:
p$a {text-align: right}
p$b {text-align: center}
usage:
%p class&'a'(
this paragraph )ill be right-aligned$
%*p(
%p class&'b'(
this paragraph )ill be center-aligned$
%*p(
----
$c1 {text-align: center}
%h1 class&'c1'(
this heading )ill be center-aligned
%*h1(
%p class&'c1'(
this paragraph )ill also be center-aligned$
%*p(
-----
css comments
*+ this is a comment +*
p
{
text-align: center;
*+ this is another comment +*
color: black;
font-family: arial
}
----
external style sheet
step1:
create html file:
%html(
%head(
%link rel&'stylesheet' type&'text*css' href&'mystyle$css' *(
%*head(
%body(
%hr *(
%p( this paragraph is example to check css file%*p(
%*body(
%html(
step2:
create css file:
hr {color: sienna}
p {margin-left: 2,px}
body {background-image: url-'images*back!,$gif'.}
run html file to see the results$
internal style sheet
create html file:
%html(
%head(
%style type&'text*css'(
%/--
hr {color: sienna}
p {margin-left: 2,px}
body {background-image: url-'images*back!,$gif'.}
--(
%*style(
%*head(
%body(
%hr *(
%p( this paragraph is example to check css file%*p(
%*body(
%html(
run html file to see the results$
inline styles:
%p style&'color: sienna; margin-left: 2,px'(
this is a paragraph
%*p(
----
css background
property description values
background a shorthand property for setting
all background properties in one
declaration
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment sets )hether a background
image is fixed or scrolls )ith the
rest of the page
scroll
fixed
background-color sets the background color of an
element
color-rgb
color-hex
color-name
transparent
background-image sets an image as the
background
url-url.
none
background-position sets the starting position of a
background image
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat sets if*ho) a background image
)ill be repeated
repeat
repeat-x
repeat-y
no-repeat
body
{
background: 0,,ff,, url-stars$gif. no-repeat fixed top
}
---
body
{
background-color: 0,,ff,,;
background-image: url-stars$gif.;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top
}
---
css text
property description values
color sets the color of a text color
direction sets the text direction ltr
rtl
line-height sets the distance bet)een lines normal
number
length
%
letter-spacing increase or decrease the space
bet)een characters
normal
length
text-align aligns the text in an element left
right
center
1ustify
text-decoration adds decoration to text none
underline
overline
line-through
blink
text-indent indents the first line of text in an
element
length
%
text-shado) none
color
length
text-transform controls the letters in an element none
capitali2e
uppercase
lo)ercase
)hite-space sets ho) )hite space inside an
element is handled
normal
pre
no)rap
)ord-spacing increase or decrease the space
bet)een )ords
normal
length

body
{
color: rgb-2"",2"",,.;
direction: rtl;
line-height: 1!pt;
letter-spacing: 12px;
text-align: center;
text-decoration: underline;
text-indent: 2,px;
text-transform: capitali2e;
)hite-space: normal;
)ord-spacing: ,px
}
css font
property description values
font a shorthand property for setting all of
the properties for a font in one
declaration
font-style
font-variant
font-weight
font-size/line-height
font-family
font-family a prioriti2ed list of font family names
and*or generic family names for an
element
family-name
generic-family
font-si2e sets the si2e of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-si2e-ad1ust specifies an aspect value for an
element that )ill preserve the x-height
of the first-choice font
none, number
font-stretch condenses or expands the current font-
family
normal
)ider
narro)er
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style sets the style of the font normal
italic
obli3ue
font-variant displays text in a small-caps font or a
normal font
normal
small-caps
font-)eight sets the )eight of a font normal, bold, bolder, lighter,1,,,
2,,,,,,
!,,,",,,#,,,4,,,5,,,6,,
p
{
font: italic small-caps 6,, 12px*1!px arial
}
p
{
font-family: arial, 'lucida console', sans-serif;
font-si2e: 1,px;
font-si2e-ad1ust: ,$"5;
font-stretch: ultra-condensed;
font-style: italic;
font-variant: small-caps;
font-)eight: bold
}
css border
property description values
border a shorthand property for setting all of
the properties for the four borders in
one declaration
border-width
border-style
border-color
border-bottom a shorthand property for setting all of
the properties for the bottom border in
one declaration
border-bottom-width
border-style
border-color
border-bottom-color sets the color of the bottom border border-color
border-bottom-style sets the style of the bottom border border-style
border-bottom-width sets the width of the bottom border thin
medium
thick
length
border-color sets the color of the four borders, can
have from one to four colors
color
border-left a shorthand property for setting all of
the properties for the left border in one
declaration
border-left-width
border-style
border-color
border-left-color sets the color of the left border border-color
border-left-style sets the style of the left border border-style
border-left-width sets the width of the left border thin
medium
thick
length
border-right a shorthand property for setting all of
the properties for the right border in one
declaration
border-right-width
border-style
border-color
border-right-color sets the color of the right border border-color
border-right-style sets the style of the right border border-style
border-right-width sets the width of the right border thin
medium
thick
length
border-style sets the style of the four borders, can
have from one to four styles
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top a shorthand property for setting all of
the properties for the top border in one
declaration
border-top-width
border-style
border-color
border-top-color sets the color of the top border border-color
border-top-style sets the style of the top border border-style
border-top-width sets the width of the top border thin
medium
thick
length
border-width a shorthand property for setting the
width of the four borders in one
declaration, can have from one to four
values
thin
medium
thick
length
p
{
border: thin dotted 0,,ff,,
}
table {border-color: red}
all four borders )ill be red
table {border-color: red green}
top and bottom border )ill be red, left and right border )ill be green
table {border-color: red green blue}
top border )ill be red, left and right border )ill be green, bottom border )ill be blue
table {border-color: red green blue yello)}
top border )ill be red, right border )ill be green, bottom border )ill be blue, left border
)ill be yello)
----
table
{
border-style: solid;
border-color: red green blue yello)
}
----
p
{
border-left-)idth: thin;
border-right-)idth: thin;
border-bottom-)idth thin;
border-top-)idth : thin;
border-left-style: solid;
border-right-style: solid;
border-bottom-style : solid;
border-top-style : solid;
border-left-color: 0ff,,,,;
border-right-color: 0ff,,,,;
border-bottom-color: 0ff,,,,;
border-top-color: 0ff,,,,
}
---
css outlines
property description values
outline a shorthand property for setting
all the outline properties in one
declaration
outline-color
outline-style
outline-width
outline-color sets the color of the outline
around an element
color
invert
outline-style sets the style of the outline
around an element
none
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-)idth sets the )idth of the outline
around an element
thin
medium
thick
length
p
{
outline: red solid thin
}
p
{
outline-color: red;
outline-style: solid;
outline-)idth: medium
}
css margin
property description values
margin a shorthand property for setting
the margin properties in one
declaration
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
sets the bottom margin of an
element
auto
length
%
margin-left
sets the left margin of an
element
auto
length
%
margin-right
sets the right margin of an
element
auto
length
%
margin-top sets the top margin of an
element
auto
length
%
h1
{
margin: 1,px 1,px 1,px 1,px
}
h1
{
margin-bottom: 1,px;
margin-left: 1,px;
margin-right: 1,px;
margin-top: 1,px
}
css padding
property description values
padding a shorthand property for setting
all of the padding properties in
one declaration
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
sets the bottom padding of an
element
length
%
padding-left
sets the left padding of an
element
length
%
padding-right
sets the right padding of an
element
length
%
padding-top sets the top padding of an
element
length
%
h1 {padding: 1px!
the padding will be 1px on all four sides
h1 {padding: 1,px 27}
top and bottom padding )ill be 1,px, left and right padding )ill be 27 of the )idth of the
closest element$
h1 {padding: 1px "% 1#px!
top padding will be 1px$ left and right padding will be "% of the width of the closest
element$ bottom padding will be 1#px
h1 {padding: 1,px 27 1"px 2,px}
top padding )ill be 1,px, right padding )ill be 27 of the )idth of the closest element,
bottom padding )ill be 1"px, left padding )ill be 2,px
h1 {
padding-bottom: 1,px;
padding-left: 1,px;
padding-right: 1,px;
padding-top: 1,px
}
css list
property description values
list-style a shorthand property for setting
all of the properties for a list in
one declaration
list-style-type
list-style-position
list-style-image
list-style-image sets an image as the list-item
marker
none
url
list-style-position sets )here the list-item marker is
placed in the list
1$ inside
outside
list-style-type sets the type of the list-item
marker
none
disc
circle
s3uare
decimal
decimal-leading-2ero
lo)er-roman
upper-roman
lo)er-alpha
upper-alpha
lo)er-greek
lo)er-latin
upper-latin
hebre)
armenian
georgian
c1k-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto
length
ul
{
list-style: disc outside
}
ol
{
list-style: decimal inside
}
ol
{
list-style-image: url-blueball$gif.;
list-style-type: circle;
list-style-position: inside
}
ul
{
list-style-type: disc
}
--- html
%ul(
%li(pen%*li(
%li(copy%*li(
%*ul(
%ol(
%li(pen%*li(
%li(copy%*li(
%*ol(
css table
property description values
border-collapse sets )hether the table borders
are collapsed into a single
border or detached as in
standard html
collapse
separate
border-spacing sets the distance that separates
cell borders -only for the
'separated borders' model.
length length
caption-side sets the position of the table
caption
top
bottom
left
right
empty-cells sets )hether or not to sho)
empty cells in a table -only for
the 'separated borders' model.
sho)
hide
table-layout sets the algorithm used to
display the table cells, ro)s, and
columns
auto
fixed
table
{
border-collapse: separate;
border-spacing: 1,px;
caption-side: left;
empty-cells: sho);
table-layout: fixed
}
css dimension
property description values
height sets the height of an element auto
length
%
line-height sets the distance bet)een lines normal
number
length
%
max-height sets the maximum height of an
element
none
length
%
max-)idth sets the maximum )idth of an
element
none
length
%
min-height sets the minimum height of an
element
length
%
min-)idth sets the minimum )idth of an
element
length
%
)idth sets the )idth of an element auto
%
length
img
{
height: 2,,px;
)idth: 2,,px
}
p
{
line-height: 1!pt
}
p
{
max-height: 1,,px;
max-)idth: ",,px
}
p
{
min-height: 1,px;
min-)idth: ",px
}
css classification
property description values
clear sets the sides of an element
)here other floating elements
are not allo)ed
left
right
both
none
cursor specifies the type of cursor to be
displayed
url
auto
crosshair
default
pointer
move
e-resi2e
ne-resi2e
n)-resi2e
n-resi2e
se-resi2e
s)-resi2e
s-resi2e
)-resi2e
text
)ait
help
display sets ho)*if an element is
displayed
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-ro)-group
table-header-group
table-footer-group
table-ro)
table-column-group
table-column
table-cell
table-caption
float sets )here an image or a text
)ill appear in another element
left
right
none
position places an element in a static,
relative, absolute or fixed
position
static
relative
absolute
fixed
visibility sets if an element should be
visible or invisible
visible
hidden
collapse
h2
{
clear: right;
cursor: crosshair
}
img
{
float: left
}
h1
{
position:absolute;
left:1,,px;
top:1",px
}
p
{
visibility: hidden
}
css positioning
property description values
bottom sets ho) far the bottom edge of
an element is above*belo) the
bottom edge of the parent
element
auto
%
length
clip sets the shape of an element$
the element is clipped into this
shape, and displayed
shape
auto
left sets ho) far the left edge of an
element is to the right*left of the
left edge of the parent element
auto
%
length
overflo) sets )hat happens if the content
of an element overflo) its area
visible
hidden
scroll
auto
position places an element in a static,
relative, absolute or fixed
position
static
relative
absolute
fixed
right sets ho) far the right edge of an
element is to the left*right of the
right edge of the parent element
auto
%
length
top sets ho) far the top edge of an
element is above*belo) the top
edge of the parent element
auto
%
length
vertical-align sets the vertical alignment of an
element
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
p
{
position: absolute;
bottom: 2,px
}
p
{
position: absolute;
bottom: -2,px
}
img
{
clip: rect-1,px, "px, 1,px, "px.
}
p
{
position: absolute;
left: 2,px
}
p
{
position: absolute;
left: -2,px
}
h1
{
position:absolute;
left:1,,px;
top:1",px;
}
p
{
position: absolute;
right: 2,px
}
p
{
position: absolute;
right: -2,px
}
img
{
vertical-align: bottom
}
css pseudo-classes
css pseudo-classes are used to add special effects to some selectors$
a:link {color: 0ff,,,,} *+ unvisited link +*
a:visited {color: 0,,ff,,} *+ visited link +*
a:hover {color: 0ff,,ff} *+ mouse over link +*
a:active {color: 0,,,,ff} *+ selected link +*
css image gallery
%html(%head(
%style type&'text*css'(
div$img
{
margin: 2px;
border: 1px solid 0,,,,ff;
height: auto;
)idth: auto;
float: left
}
div$img img
{
display: inline;
margin: px;
border: 1px solid 0ffffff;
}
div$img a:hover img
{
border: 2px solid 0ff,,,,;
height: !,,px;
)idth: !,,px
}
%*style(%*head(
%body(
%div class&'img'(
%a target&'8blank' href&'image8big$htm'(
%img src&'1$1pg' alt&'image' )idth&'11,'
height&'6,' *(
%*a(
%*div(
%div class&'img'(
%a target&'8blank' href&'image8big$htm'(
%img src&'2$1pg' alt&'image' )idth&'11,'
height&'6,' *(
%*a(
%*div(%div class&'img'(
%a target&'8blank' href&'image8big$htm'(
%img src&'$1pg' alt&'image' )idth&'11,'
height&'6,' *(
%*a(
%*div(%div class&'img'(
%a target&'8blank' href&'image8big$htm'(
%img src&'!$1pg' alt&'image' )idth&'11,'
height&'6,' *(
%*a(
%*div(
%*body(%*html(
css image opacity / transparency
%img src&'klematis$1pg' )idth&'1",' height&'11' alt&'klematis'
style&'opacity:,$!;filter:alpha-opacity&!,.' *(
--- %img src&'klematis$1pg' style&'opacity:,$!;filter:alpha-opacity&!,.'
onmouseover&'this$style$opacity&1;this$filters$alpha$opacity&1,,'
onmouseout&'this$style$opacity&,$!;this$filters$alpha$opacity&!,' *(
%img src&'klematis2$1pg' style&'opacity:,$!;filter:alpha-opacity&!,.'
onmouseover&'this$style$opacity&1;this$filters$alpha$opacity&1,,'
onmouseout&'this$style$opacity&,$!;this$filters$alpha$opacity&!,' *(
--
%html(
%head(
%style type&'text*css'(
div$background
{
)idth: ",,px;
height: 2",px;
background: url-klematis$1pg. repeat;
border: 2px solid black;
}
div$transbox
{
)idth: !,,px;
height: 15,px;
margin: ,px ",px;
background-color: 0ffffff;
border: 1px solid black;
*+ for ie +*
filter:alpha-opacity&#,.;
*+ css standard +*
opacity:,$#;
}
div$transbox p
{
margin: ,px !,px;
font-)eight: bold;
color: 0,,,,,,;
}
%*style(
%*head(
%body(
%div class&'background'(
%div class&'transbox'(
%p(this is some text that is placed in the transparent box$
this is some text that is placed in the transparent box$
this is some text that is placed in the transparent box$
this is some text that is placed in the transparent box$
this is some text that is placed in the transparent box$
%*p(
%*div(
%*div(
%*body(
%*html(