Web Technology
Unit 1
Properties in CSS
By:
Dr. Vipin Kumar
Associate Processor,
Department of Computer Applications,
KIET Group of Institutions, NCR, Ghaziabad, UP, India
Color
• background-color:rgb(255, 0, 0);
• background-color:rgba(255, 0, 0,0.2);
• background-color:#000000; (Hexa Value)
• background-color:hsl(240, 100%, 50%)
– Hue is a degree on the color wheel from 0 to 360.
– Saturation is a percentage value.
– Lightness is also a percentage.
CSS Background
• background-color:#AFC
• opacity: 0.3; (0.0 to 1.0)
• background-image: url(“small.gif”);
• background-repeat: repeat-x|repeat-y|no-repeat
• background-attachment: fixed|scroll
• background-position: top|bottom|right|left
TEXT Formatting
• text-align:center|left|right|justify
• text-decoration:none|overline|line-through |underline|blink
• text-transform:uppercase|lowercase|capitalize
• text-indent:50px; color: blue;
• letter-spacing: 3px;
• line-height: 0.8;
• word-spacing: 10px;
• white-space: nowrap;
• text-shadow: 2px 2px 5px red;
Font Formatting
• font-family:Times
• font-style:normal|italic|oblique
• font-size:40px
• font-variant:normal|small-caps|inherit
• font-weight:normal|bold|bolder|lighter|900
Link Formatting
• a:link {color:#FF0000;}
• a:visited {color:#00FF00;}
• a:hover {color:#FF00FF;}
• a:active {color:#0000FF;}
List Formatting
• ul.b {list-style-type: none|circle|square}
• ol.c {list-style-type: none|upper-roman|lower-alpha}
• list-style-image: url('sqpurple.gif')
• list-style-position:inside|outside
• float:left
Box Model Formatting
width:250px;
padding:10px;
border:5px solid gray;
margin:10px
Border Formatting
• border-style: none|dotted|dashed|solid| double|groove|ridge|inset|
outset;
• border-width:5px;
• border-color:red;
• border-top-style:dotted;
• border-right-style:solid;
• border-bottom-style:dotted;
• border-left-style:solid;
• border-radius: 5px;
Margin Formatting
• margin-top:100px|auto;
• margin-bottom:100px|auto;
• margin-right:50px|auto;
• margin-left:50px|auto;
Padding Formatting
• padding-top:25px;
• padding-bottom:25px;
• padding-right:50px;
• padding-left:50px;
Width and Height
• height: 200px;
• width: 50%;
• max-width: 500px;
Table Properties
• border-collapse: collapse;
• border: 1px solid black;
• width: 100%; height: 50px;
• text-align: left; (left, center, right)
• vertical-align: bottom; (top, button, middle)
• padding: 15px;
Display & Position Property
• display: inline; (none, block, inline)
• position: static;
– static
– relative
– fixed
– absolute
– sticky
Overflow Property
• overflow: visible;
– visible
– hidden
– scroll
– auto
Thank You
