)>}]
شركة التطبيقات المتكاملة لتصميم وبرمجة البرمجيات الخاصة ش.ش.و.
Integrated Applications Programming Company
Home » 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
mm
mr
mm_wrap
mm_pad
mmc               
mml mmr
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
tc                               
mt
mtc                            
ml
mlc                            
mr
mrc                            
b
bc                               
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.
Page structure
tc
mc                       
bc
Nested div structure
t
tc                               
m
mc                              
b
bc                               
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
ml
mlc                  mrc                 
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