Cascading Style Sheets (CSS)

Korea University

KB Korea Hangeul Help Sitemap Calc Link

CASCADING STYLE SHEETS

Basics of the Cascading Style Sheets (CSS)

10pt; 20px; 1in; 2.5cm; 5em; 1.5pc; 100%;
medium; xx-small; x-small; small; large; x-large; xx-large;
left; right; center; justify;
hidden;dotted;dashed;solid;double;groove;ridge;inset;outset;
super;sub;top;baseline;text-top;middle;bottom;text-bottom;
lowercase; uppercase; capitalize; none;
float:right; clear:both; | left; right; none;
width:2pt; height: 1px;
color:maroon; | #ffffff;

maroon #800000	red #ff0000	orange #ffA500	yellow #ffff00	olive #808000
purple #800080	fuchsia #ff00ff	lime #00ff00	green #008000	navy #000080
blue #0000ff	aqua #00ffff	teal #008080	silver #c0c0c0	gray #808080
#790016	#c7b6a9	#dfdfdf	#feeeee	#242424

a:link {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#242424;}
a:hover {text-decoration:underline; color:#790016;}
a:active {}
a.tiger:link {...}
a[href="http://www.masil/"] {color:maroon;}
.heading {font:10pt Helvetica, Verdana, 'Courier New'; letter-spacing:2pt;}
#menu {position:fixed; top:60px; left:3px; width:133px;} // id="program"
body {font:10pt black normal Arial; background-color:#ffffff;}
div {...;}
p {...;}
ul, ol, li {...;}
h2, em {...;}
h1[title] {...;}
span[class=heading] {...;}
@media screen { body {...} } // Aural style sheets

Font Attributes [W3C Document]

style="font:italic bold 10pt Arial;" // style, variant, weight, size, family
font-family:'Copperplate Gothic', 'SAS Monospace', Helvetica, 'Courier New';
font-size:10pt; | 14px; 150%; 3em;
font-size:medium; | xx-small; x-small; small; large;... ; larger;
font-weight:bold; | norma;; bolder; lighter; 100;...; 900; inherit;
font-style:italic; | normal; oblique; inherit;
font-variant:normal; | small-caps;
color:black; | gray; lime; maroon; navy; olive; purple; silver;

Text Attributes [W3C Document]

text-align:center; |left; right; justify;
vertical-align:super; | sub; text-top; text-bottom;
vertical-align:top; | middle; bottom; baseline;
text-indent:10pt; | 20px; 1in; 2.5cm; 5em; 1.5pc;
letter-spacing: 1px; | normal; pt; in; cm; em; pc;
word-spacing: 2em; | normal;
line-height:150%;
text-transform:lowercase; | uppercase; capitalize; none;
text-decoration:none; | underline; overline; line-through; blink;
white-space: normal; | pre; nowrap; pre-wrapt; pre-line;

Table Attributes [W3C Document]

table {border-style:hidden; table-layout:fixed; border-collapse:collapse}
table {border-collapse: separate; table-layout:auto; margin-left:3em;}
table {border-spacing: 1em; border:inset 10pt; empty-sells:show}
tr#row1 {border:1px solid red; vertical-align:top}
tr.top {background:red; border:none}
caption {caption-side:top; width:auto; text-align:left}
col.totals {width:1em; background:maroon; border:2px dashed navy;}
border-style: dotted | hidden; dashed; double; groove; ridge; inset; outset;

List Attributes [W3C Document]

ol {list-style:square inside;}
list-style:decimal-leading-zero inside;
list-style-type:circle; | disc;square;decimal;decimal-leading-zero;
list-style-type:lower-greek; | lower-roman; lower-latin; upper-alpha;
list-style-image:url("tiger.gif");
list-style-position:inside; | outside;

Background Attributes [W3C Document]

body {background:url("tiger.gif") #790016 top center repeat-y fixed;}
background-color:white; | transparent;
background-image: url("tiger.gif") | none;
background-attachment: fixed; | scroll
background-repeat: no-repeat; | repeat-x; repeat-y; repeat
background-position: center; | left; right; top; bottom;

position:relative; | absolute; fixed; static; inherit;
position:absolute; top:10px; left:10px; right:10px; bottom:10px;
z-index:10;

Border Attributes [W3C Document]

border: 3px double red; [10px solid black;]
border-spacing: 10pt; | 20px;
border-style: none; | hidden;dotted;dashed;solid;double;groove;ridge;inset;outset;
border-top-style:...; | right-; bottom-; left-;
border-color:...;
border-top-color:...; | right-; bottom-; left-;
border-width:thin thick medium thin; // top, right, bottom, left
border-top-width:...; | right-; bottom-; left-;
border-collapse: collapse; | separate;
border-top:...;[right-; bottom-; left-;]
empty-cells: show; |hide;

Padding Attributes [W3C Document]

pading: 0px 0px 1px 1px;
pading-top:...;
pading-right:...;
pading-bottom:...;
pading-left:...;

Margin Attributes

margin: 1pt 1em 1pt 1em;
margin-top:...;
margin-right:...;
margin-bottom:...;
margin-left:...;
margin-left:25px; margin-right:25px; [auto;]