The Web Design Group

CSS$B9=B$$H5,B'(B

[$B4pK\9=J8(B | $B5<;w%/%i%9$h5<;wmwag(b | $B%+%9%1!<%g%#%s%0=xns(b]

$B4pK\9=J8(B

$B5,B'(B

$B%;%l%/%?!<(b(selectors)

$B$I$N$h$&$J(BHTML$BMWAG$G$b(BCSS1$B%;%l%/%?!<$k$j$jf@$^$9!#(b $B%;%l%/%?!<(b$B$O!"C1$KFCJL$J%9%?%$%k$H7k$SIU$$$?MWAG$G$9!#Nc$($P!"0J2<$n$n$b$n$o!"(b 

P { text-indent: 3em }

P$B$G$9!#(B

$B%/%i%9!&%;%l%/%?!<(b

$B0l$D$N%;%l%/%?!<$o0[$j$k(b$B%/%i%9(B$B$r;}$D$3$H$,$G$-!"$+$/$FMWAG$O0[$J$C$?%9%?%$%k$r;}$D$3$H$,$G$-$^$9!#Nc$($P!"@):n 

code.html { color: #191970 }
code.css { color: #4b0082 }

$B>e$NNc$OFs$D$N%/%i%9!"(BHTML$B$N(BCODE$BMWAG$K(B css$B$H(Bhtml$B!"$r:n$j>e$2$F$$$^$9!#(B CLASS $BB0@-$O!"(BHTML$B$GMWAG$N%/%i%9$r<(:6$9$k$n$k;h$o$l!"(b$BNc$($P(B$B!"(B 

<P CLASS=warning>Only one class is allowed per 
 selector. For example, code.html.proprietary is invalid.</p>

$B%/%i%9$O!"H<$&mwag$,$j$/$f$b@k8@$5$l$^$9(b:

.note { font-size: small }

$B$3$N%1!<%9$g$o!"(b note$B%/%i%9$O2?$i$N$+$NMWAG$H0l=o$K;H$o$l$F$$$^$;$s!#(B

$B8+$(J}(B$B$G$J$/(B$B5!G=(B$B$K$h$C$F%/%i%9$KL>A0$rIU$1$k$N$,e$NNc$G$N(Bnote$B%/%i%9$O!"(B small$B$HL>IU$1$i$l$F$$$^$9$,!"@):n.$5$/$J$/!"0UL#$,$J$/$J$j$^$9!#(B

ID$B%;%l%/%?!<(b

ID selectors$B$O!"MWAGKh$KDj5A$9$kL\E*$G0l$D0l$D$K3d$jEv$F$i$l$^$9!#$3$N%;%l%/%?!5@)8B$K=>$C$F8B$i$l$k$H$-$@$1$K;HMQ$5$l$k$Y$-$G$9!#(BID$B%;%l%/%?!<$o!"l>A0$K@h9T$7$F(B $BF1Dj;R(B"#"$B$r;H$C$F;XDj$7$^$9!#Nc$($P!"0J2<$n$h$&$k;xdj$5$lf@$^$9(b: 

#svp94O { text-indent: 3em }

$B$3$l$O!"(BHTML$BFb$G$O(B ID $BB0@-$K$h$C$F;2>H$5$l$^$9(B: 

<P ID=svp94O>Text indented 3em</P>
$BJ8L.%;%l%/%?!<(b(contextual selectors)

$BJ8L.%;%l%/%?!<(b$B$O!"6uGr%9%Z!<%9$g6h@z$i$l$?fs$d0j>e$NC1=c$J%;%l%/%?!<$nc1$j$kj8;zns$g$9!#$3$l$i$n%;%l%/%?!<$o!"iadl$n%w%m%q%f%#!<$k3d$j?6$l$i$l!"%+%9%1!<%g%#%s%0=xns5,b'$k=>$C$FC1=c$J%;%l%/%?!<$h$jm%@h$5$l$^$9!#nc$($p!"0j2<$nj8l.%;%l%/%?!<(b 

P EM { background: yellow }

$B$O!"(B P EM$B$G$9!#$3$N5,B'$K$h$l$P%Q%i%0%i%UFb$N6/D4J8$OGX7J$,2+?'$G$9(B;$B8+=P$7$N6/D4J8$O1F6A$5$l$^$;$s!#(B

$B@k8@(B($BDj5A(B)

$B%W%m%Q%F%#!<(b($b8gm-@-(b)

$B%W%m%Q%F%#!<(b$B$K$O!"%9%?%$%k(B($BMM<0(b)$b$r07$&$?$a$k%;%l%/%?!<$k;xdj$5$l$^$9!#(b properties$B$NNc$H$7$F$O!"(B color $B!&(B margin $B$=$7$F(B font $B$,$"$j$^$9!#(B

$BCM(B

$BCM(B$B@k8@$O!"%W%m%Q%F%#!<$,color$B%W%m%Q%F%#!<$ocm(b red$B$r

$B%0%k!<%w2=(b

$B%9%?%$%k!&%7!<%h$n@$B%0%k!<%w2=(b$B$,$G$-$^$9!#Nc$($P!"J8=qFb$NA4$F$N8+=P$7$r%0%k!<%w2=$k$h$c$f0l$d$n@k8@$k$9$k$3$h$,$g$-$^$9(b: 

H1, H2, H3, H4, H5, H6 {
 color: red;
 font-family: sans-serif }

$B7Q>5(B

$B%;%l%/%?!$B%\%G%#(B$BMQ$KDj5A$5$l$?(B $B?'(B $B$O!"%Q%i%0%i%UFb$N%F%-%9%H$K$bE,1~$5$;$i$l$^$9!#(B

$BFbB&$N%;%l%/%?!<$,$=$l$r0o$`%;%l%/%?!<$r7q>5$7$J$$%1!<%9$b$"$j$^$9$,!"$3$l$i$oo@m}e*$k$onc30$g$"$k$y$-$g$9!#nc$($p(b margin-top $B%W%m%Q%F%#!<$o!"0z$-7q$,$l$^$;$s(b;$b%q%i%0%i%u$oj8=q%\%g%#$h$7$ff1$8>eItM>Gr(B($B%^!<%8%s(b)$b$r;}$?$j$$$hd>4QE*$K$o$+$j$^$9!#(B

$B%3%a%s%H(B

$B%3%a%s%H$O!"(BC$B%W%m%0%i%`8@8l$G;H$o$l$k$HF1$847Nc$G%9%?%$%k!&%7!<%hfb$g(b*$b0u$g<($5$l$^$9!#(bcss1$b$nnc$o0j2<$n$h$&$j7a<0$g$9(b: 

/* COMMENTS CANNOT BE NESTED */

$B5<;w%/%i%9$h5<;wmwag(b

$B5<;w%/%i%9(b(pseudo-classes)$B$H(B $B5<;wmwag(b(pseudo-elements)$B$O!"(BCSS$B%5%]!<%h!&%v%i%&%6$,<+f0e*$kg'<1$9$kfcjl$j(b"$b%/%i%9(b"$b$h(b"$bmwag(b"$b$g$9!#5<;w%/%i%9$o?'!9$jmwag%?%$%w(b( $BNc$($P(B$B!"K,Ld:Q$N%j%s%/$H:nF0;~$N%j%s%/$O%"%s%+!<$nfs$d%?%$%w$ri=8=$7$^$9(b)$b$ncf$+$i6hjl$5$l$^$9!#5<;wmwag$o!"%q%i%0%i%u$n:g=i$nj8;z$h$$$c$?!"mwag$n%5%vitj,$r;2>H$7$^$9!#(B

$B5<;w%/%i%9g5;j$o5<;wmwag$o7a<0$r$h$b$j$&5,b'$o!"0ldj$n7a<0$r 

selector:pseudo-class { property: value }

$BG5;j$O(B

selector:pseudo-element { property: value }

$B5<;w%/%i%9g5;j$h5<;wmwag$o!"(bhtml$b$n(bCLASS $BB0@-$H$H$b$KFCDj$5$l$k$Y$-$G$O$"$j$^$;$s!#IaDL$N%/%i%9$O!"0J2<$nmm$k5<;w%/%i%9g5;j$h5<;wmwag$h$h$b$k;h$$$^$7$g$&(b: 

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

$B%"%s%+!<5<;w%/%i%9(b

$B5<;w%/%i%9$g!"%j%s%/!&k,ld:q%j%s%/!&:nf0;~%j%s%/$r0[$j$c$fi=<($9$k$h$&$k(b A$BMWAG$r3d$jEv$F$k$3$H$,$G$-$^$9!#%"%s%+!link$B!&(B visited$BG5;j(B active$B5<;w%/%i%9$rm?$($k$3$h$,$g$-$^$9!#k,ld:q%j%s%/$o?'!9$j?'$d?'!9$jj8;z%5%$%:!&%9%?%$%k$gi=<($9$k$h$&$kdj5a$5$l$^$9!#(b

$B:#A*$P$l$?(B($B:nF0;~(B)$B$N%j%s%/$r?'!9$J?'$N$d$dBg$-$$J8;z$G2hLL$KI=$o$5$l$k$H$$$C$?LLGr$$8z2L$,F@$i$l$^$9(B: 

A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

$B:G=i$N9T$N5<;wmwag(b

$B?7J95-;v!"(B Wall Street Journal$B$J$I!"$G$O$h$/5-;v$N%F%-%9%H$N:G=i$N9T$,B@J8;z$GA4$FBgJ8;z$K$J$C$F$$$^$9!#(BCSS1$B$O5<;wmwag$h$7$f$3$ng=no$r;}$c$f$$$^$9!#(b $B:G=i$N9T$N(B$B5<;wmwag$o!"(b $B%V%m%C%/!]%l%Y%kMWAG(B( P$B!&(B H1$B$J$I(B)$BFb$G$D$+$$$^$7$g$&!#(B $B:G=i$N9T$N(B$B5<;wmwag$nnc$o(b: 

P:first-line {
 font-variant: small-caps;
 font-weight: bold }

$B:G=i$NJ8;z$N5<;wmwag(b

$B:G=i$NJ8;z$N(B$B5<;wmwag$o!"bgj8;z$d$=$nb>8z2L$r:n$j$@$9$N$K;H$o$l$^$9!#3d$jEv$F$i$l$?%;%l%/%?!$C$FI=<($5$l$^$9!#(b $B:G=i$NJ8;z$N(B$B5<;wmwag$o!"g!2?$j$k(b $B%V%m%C%/!]%l%Y%kMWAG(B$BFb$G$b;H$o$l$^$9!#Nc$($P(B: 

P:first-letter { font-size: 300%; float: left }

$B$O!"BgJ8;z$rJ8;z%5%$%9$GIaDL$N;0G\$K:n$j>e$2$^$9!#(B

$B%+%9%1!<%g%#%s%0(b($bbl>u(B)$B=xNs(B

$BB?85%9%?%$%k!&%7!<%h$,;h$o$l$k>l9g$=$N%9%?%$%k!&%7!<%h$o!"fcu672<$g!"$i$n%9%?%$%k!&%7!<%h$n5,b'$,>!$k$N$+$H$$$&5,B'$,$"$j$^$9!#0J2<$nfcd'$,!"(b

  1. ! important

    ! important$B$rFCDj$9$k$3$H$G!"5,B'$,=EMW$J$b$N$H$7$F;XDj$5$lF@$^$9!#=EMW$J$b$N$H$7$F;XDj$5$l$?%9%?%$%k$O!"$=$l$,$J$1$l$,F1Ey$N=E$_$NL7=b$9$k%9%?%$%k$rN?2o$7$^$9!#$*$J$8$h$&$K!"@):ne=q$-$7$^$9!#(B ! important$B@ 

    BODY { background: url(bar.gif) white;
 background-repeat: repeat-x ! important }
  2. $B5,B'$N85(B($B@):n

    $BA0$K=R$Y$?$h$&$K@):nWFM$9$k>l9g!"@):ne=q$-$7$^$9!#(B

    $B@):n! important$B5,B'$r;H$&$3$H$K?5=E$K$J$k$Y$-$G!"$H$$$&$N$OG!2?$J$k%f!<%6!<$n(b! important$B5,B'$r$b>e=q$-$9$k$+$i$G$9!#Nc$($P%f!<%6!<$o;k3pe*$jldbj$+$ibg$-$jj8;zg5;j$ofcjl$j?'$ri,mw$h$7$f$$$k$n$+$bcn$l$j$/!"$=$n$h$&$j%f!<%6!<$o%9%?%$%k$o%z!<%8$rfi$`$3$h$,$g$-$k%f!<%6!<$k$h$c$fit2d7g$g$"$k8n$k$"$k! important$B%9%?%$%k5,B'$r@k8@$7$?$$$o$1$G$9!#G!2?$J$k(B ! important$B5,B'$b!"IaDL$N5,B'$r>e=q$-$7!"$@$+$iFCJL$J%9%?%$%kMW5a$N$"$k%f!<%6!<$,$=$n%z!<%8$rfi$`$3$h$,$g$-$k$n$r3n

  3. $B%;%l%/%?!<5,b'(b:$bfc

    $B%9%?%$%k!&%7!<%h$ofcWFM$9$k%9%?%$%k!&%7!<%h$r>e=q$-$b$7!"0lAXFCD'E*$J%9%?%$%k$,I,$:$h$jFCD'$,$J$$$b$N$KM%@h$7$^$9!#$3$l$O4JC1$J7W;;%2!<%`$g!"%;%l%/%?!<$nfc

    1. $B%;%l%/%?!ID$BB0@-$N?t$r$+$>$($k!#(B
    2. $B%;%l%/%?!CLASS$BB0@-$N?t$r$+$>$($k!#(B
    3. $B%;%l%/%?!$N?t$r$+$>$($k!#(B

    $B:G8e$K;0$D$N?tCM$r$($k$?$a$K!"@53N$J=g0L$G;0$D$N?t$r6uGr$,$J$$%3%s%^$G5-:\$7$^$9(B($BCm0U!";0J8;z$G=*$o$k$?$a$K?tCM$r$h$jBg$-$J4p=`$KCV$-Be$($kI,MW$,$"$k$+$b$7$l$^$;$s(B)$B!#:G=*E*$J%;%l%/%?!<$kbp1~$9$k?tcm%j%9%h$,dc$$?tcm$km%@h$9$k9b$$?tcm$gmf0w$kfc 

    #id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. $BFC

    $BMF0W$K$9$k$?$a$K!"Fs$D$N5,B'$,F1$8=E$_$r;}$C$F$$$k>l9g:G8e$NFC

[ $B4pK\9=J8(B | $B5<;w%/%i%9$h5<;wmwag(b | $B%+%9%1!<%g%#%s%0=xns(b ]

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS$B%$%s%G%C%/%9(B ~ CSS$B9=B$(B ~ CSS$B%W%m%Q%F%#(B

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.

AltStyle $B$K$h$C$FJQ49$5$l$?%Z!<%8(b (->$B%*%j%8%J%k(B) /