FIRST ASSIGNMENT
CSS TAGS
About CSS
CSS stands for Cascading Style Sheets..Its base how to display HTML codes.
Three ways to implement CSS in your web files
1. Inline: inserted directly into an HTML tag in your file
2. Embedding: the style sheet: inserted between <head> </head> tags in
your file
3. External: Linking to an external CSS file with css extension
Colors:
Colors we use in the css for text, background and other areas
Colors have three option for use through:
Name
# Code
RGB
Name : if use through name we just type the color name e.g. color:
red; the red color show
# Code: if use through # sign and code the color will appear. e.g.
color:#00ff00;
RGB: if we use through RGB the color will display e.g
color:RGB (0,0,255);
FONT:
The font have different way to use in CSS
The properties of font above here:
Size: to set the font size
100%
16px
1em= current height of font
xx-large
Smaller
Style: to set the font style
Italic
Normal
Oblique
{font-style:normal}
{font-style:italic}
{font-style:oblique}
Weight: Bold, Bolder
Light
Lighter
100 to 900 and 400 as normal
{font-weight:normal;}
{font-weight:bold;}
{font-weight:500;}
Font-Family: font-family, like "times", "georgia", "arial" and more
{
Font-family:"TimesNewRoman",Georgia,Serif,Arial;
}
Font-variant: Small-caps
Upper-caps
{
font-variant:small-caps;
}
Font-color:
Body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
Text:
Text-align: Left
Right
Centre
Justify
{
text-align:justify;
}
Text Transform: upper case
Lowercase
Capitalize
Text-indent: 15
Text-decoration: underline
Over line
Line –through
Blink
None
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
p {text-decoration:underline}
Background: To Set all the background properties
Color
Image
Repeat
Position
Attachment
Background-color:
body
{
background-color:yellow;
}
Background-image:
body
{
background-image:url('abc.gif');
}
Background-position: left, right, top ,bottom ,center
background-position:center;
Background-attachment: to specify a background-image
: fixed
: Scroll
}
background-attachment:fixed;
}
Body {overflow: scroll}
Body {overflow: hidden}
Body {overflow: visible}
Body {overflow: auto}
Body {overflow: none}
Tables
Background
Height
Width
Max-width:400px
Min-width:300 %
Min-height:10 x
Max-height:300px
Borders
Width { border-width:15px;}
Color {border-color:#ff0000 #00ffff;}
Styles: Set the style of the borders:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
p
{
border-style:solid;
}
Border-collapse: Collapse
Separate
table
{
border-collapse:collapse;
}
Border-spacing: { border-spacing:10px 50px }
Empty-cells: Show
Hide
table
{
border-collapse:separate;
empty-cells:hide;
}
Caption side: specify the table caption. Top or Bottom
caption
{
caption-side:bottom;
}
Wrap text: wrap, nowrap
p
{
white-space:nowrap;
}
Padding:
p
{
padding:10x 5x 10x 5x;
}
Float: an image to float position
Right
Left
None
img
{
float:right;
}
Margin: auto and length and default value is zero
p
{
Margin:10x 5x 10x 5x;
}
Cursor:
{cursor:blink}
Default
Pointer hand show
Text I show
Wait {cursor:wait}
url( )
Page-break-before: Auto
Always
Avoid
Position: absolute
Relative
H1
{
position:absolute;
left:100px;
top:150px;
}
List:
List-style-type
None
Disk
Circle
Square
List-style-position
List-style-image inside
outside
ul
{
list-style:square url("abc.gif") inside;
}
