Skip Navigation LinksHome » Services » Designs » CSS
Cascading Style Sheets (CSS) is a valueble tool to design and built versatile Internet pages. Styles sheets define
how an HTML element is displayed. Styles are normally saved in external files. External style sheets enable
you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document.
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages
all at once. As Web developers we can define a style for each HTML element and apply it to as many Web pages as we
want. To make a global change, we simply change the style, and all elements in the Web are updated automatically.
For more information of CSS visit the World Wide Web Consortium (W3C):
Cascading Style Sheets (CSS)
specification paper.
Simple forms that are build using CSS styles
none |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
CSS Website Frames that we have used
Three column liquid-layout: |
Page structure |
t |
mml |
mmc |
mmr |
b |
|
Nested div structure |
t |
ml
|
b |
|
div |
<div id="t">t</div>
<div id="ml">
<div id="mm">
<div id="mr">
<div id="mm_wrap">
<div id="mm_pad">
<div id="mmc">
mmc
</div>
</div>
</div>
<div id="mml">
mml
</div>
<div id="mmr">
mmr
</div>
</div>
</div>
</div>
<div id="b">b</div>
|
|
css |
html { direction:ltr;width:100%; }
body { background:#fff;margin:0px;width:100%; }
#t { float:left;width:100%;padding:0;margin:0;border-bottom:1px solid #000; }
#ml { position:relative /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */;clear:both;float:left;width:100%/* width of whole page */;overflow:hidden/* This chops off any overhanging divs */;background:#ffd8b7/* Left column background colour */; }
#mm { float:left;width:200%;position:relative;left:200px;background:#fff/* Centre column background colour */; }
#mr { float:left;width:100%;position:relative;left:50%;margin-left:-400px;background:#ff9/* Right column background colour */; }
#mm_wrap { float:right;width:50%;position:relative;right:100%; }
#mm_pad { margin:0 15px 0 415px;overflow:hidden; }
#mmc { width:100%/*overflow:hidden;*/; }
#mml { float:left;width:170px;position:relative;margin-left:-50%;left:215px/*overflow:hidden;*/; }
#mmr { float:left;width:170px;position:relative;left:15px/*overflow:hidden;*/; }
#b { clear:both;float:left;width:100%;padding:0;margin:0;border-top:1px solid #000; }
|
|
Left Menu 2 Column Liquid Layout (Percentage widths). Cross-browser & iPhone compatible. |
Page structure |
tc |
mtc |
mlc |
mrc |
bc |
|
Nested div structure |
t
|
mt
|
ml
|
mr
|
b
|
|
div |
<div id="t">
<div id="tc">
tc
</div>
</div>
<div id="mt">
<div id="mtc">
mtc
</div>
</div>
<div id="ml">
<div id="mlc">
mlc
</div>
</div>
<div id="mr">
<div id="mrc">
mrc
</div>
</div>
<div id="b">
<div id="bc">
bc
</div>
</div>
|
|
css |
html { direction:ltr;width:100%; }
body { background:#fff;margin:0px;width:100%; }
#t { }
#tc { margin:2px;padding:7px; }
#mt { }
#mtc { margin:0 2px 2px 2px;background-color:Lavender; }
#ml { float:left;width:100px;border:solid red 0px; }
#mlc { }
#mr { margin: 0 0 0 105px;border:solid green 0px; }
#mrc { }
#b { clear:both; }
#bc { margin:2px;padding:7px; }
|
|
Full Page Liquid Layout. Cross-browser & iPhone compatible. |
|
Nested div structure |
t
|
m
|
b
|
|
div |
<div id="t">
<div id="tc">
tc
</div>
</div>
<div id="m">
<div id="mc">
mc
</div>
</div>
<div id="b">
<div id="bc">
bc
</div>
</div>
|
|
css |
html { direction:ltr;width:100%; }
body { background:#fff;margin:0px;width:100%; }
#t { clear:both;float:left;width:100%;padding:0px; }
#tc { margin:7px; }
#m { position:relative;clear:both;float:left;width:100%;overflow:hidden;background:#fff;padding:0px; }
#mc { float:left;position:relative;overflow:hidden;margin:7px; }
#b { clear:both;float:left;width:100%;padding:0px; }
#bc { margin:7px; }
|
|
Double Page 2 Column Liquid Layout. |
Page structure |
t |
mlc |
mrc |
b |
|
Nested div structure |
t |
m
|
b |
|
div |
<div id="t">t</div>
<div id="m">
<div id="ml">
<div id="mlc">
mlc
</div>
<div id="mrc">
mrc
</div>
</div>
</div>
<div id="b">b</div>
|
|
css |
html { direction:ltr;width:100%; }
body { background:#fff;margin:0px;width:100%; }
#t { clear:both;float:left;width:100%; }
#m { clear:both;float:left;width:100%;/* width of whole page */overflow:hidden;/* This chops off any overhanging divs *//*background:#eee; right column background colour */ }
#ml { float:left;width:100%;position:relative;right:50%;/* right column width *//*background:#fff; left column background colour */ }
#mlc { float:left;position:relative;overflow:hidden;width:46%; /*left column content width (column width minus left and right padding) */left:52%;/* right column width plus left column left padding */ }
#mrc { float:left;position:relative;overflow:hidden;width:46%; /*right column content width (column width minus left and right padding) */left:56%;/* (right column width) plus (left column left and right padding) plus (right column left padding) */ }
#b { clear:both;float:left;width:100%; }
|
|
Sample: Homogenius Rainbow colors:
Sample: Named colors
|
AliceBlue |
|
AntiqueWhite |
|
Aqua |
|
Aquamarine |
|
Azure |
|
Beige |
|
Bisque |
|
Black |
|
BlanchedAlmond |
|
Blue |
|
BlueViolet |
|
Brown |
|
BurlyWood |
|
CadetBlue |
|
Chartreuse |
|
Chocolate |
|
Coral |
|
CornFlowerBlue |
|
Cornsilk |
|
Crimson |
|
Cyan |
|
DarkBlue |
|
DarkCyan |
|
DarkGoldenrod |
|
DarkGray |
|
DarkGreen |
|
DarkKhaki |
|
DarkMagenta |
|
DarkOliveGreen |
|
DarkOrange |
|
|
DarkOrchid |
|
DarkRed |
|
DarkSalmon |
|
DarkSeaGreen |
|
DarkSlateBlue |
|
DarkSlateGray |
|
DarkTurquoise |
|
DarkViolet |
|
DeepPink |
|
DeepSkyBlue |
|
DimGray |
|
DodgerBlue |
|
Firebrick |
|
FloralWhite |
|
ForestGreen |
|
Fuchsia |
|
Gainsboro |
|
GhostWhite |
|
Gold |
|
Goldenrod |
|
Gray |
|
Green |
|
GreenYellow |
|
Honeydew |
|
HotPink |
|
IndianRed |
|
Indigo |
|
Ivory |
|
Khaki |
|
Lavender |
|
|
LavenderBlush |
|
LawnGreen |
|
LemonChiffon |
|
LightBlue |
|
LightCoral |
|
LightCyan |
|
LightGoldenRodYellow |
|
LightGray |
|
LightGreen |
|
LightPink |
|
LightSalmon |
|
LightSeaGreen |
|
LightSkyBlue |
|
LightSlateGray |
|
LightSteelBlue |
|
LightYellow |
|
Lime |
|
LimeGreen |
|
Linen |
|
Magenta |
|
Maroon |
|
MediumAquamarine |
|
MediumBlue |
|
MediumOrchid |
|
MediumPurple |
|
MediumSeaGreen |
|
MediumSlateBlue |
|
MediumSpringGreen |
|
MediumTurquoise |
|
MediumVioletRed |
|
|
MidnightBlue |
|
MintCream |
|
MistyRose |
|
Moccasin |
|
NavajoWhite |
|
Navy |
|
OldLace |
|
Olive |
|
OliveDrab |
|
Orange |
|
OrangeRed |
|
Orchid |
|
PaleGoldenrod |
|
PaleGreen |
|
PaleTurquoise |
|
PaleVioletRed |
|
PapayaWhip |
|
PeachPuff |
|
Peru |
|
Pink |
|
Plum |
|
PowderBlue |
|
Purple |
|
Red |
|
RosyBrown |
|
RoyalBlue |
|
SaddleBrown |
|
Salmon |
|
SandyBrown |
|
SeaGreen |
|
|
SeaShell |
|
Sienna |
|
Silver |
|
SkyBlue |
|
SlateBlue |
|
SlateGray |
|
Snow |
|
SpringGreen |
|
SteelBlue |
|
Tan |
|
Teal |
|
Thistle |
|
Tomato |
|
Transparent |
|
Turquoise |
|
Violet |
|
Wheat |
|
White |
|
WhiteSmoke |
|
Yellow |
|
YellowGreen |
|