Scribd
Upload
65 views

First Assignment Css Tags

The document discusses CSS tags and properties. It describes three ways to implement CSS: inline, embedded, and external. It then explains properties for colors, fonts, text, backgrounds, tables, borders, positioning, and lists. Colors can be defined by name, hex code, or RGB values. Font properties include size, style, weight, and family. Background properties cover color, image, position, and attachment. Borders have properties for width, color, and style.

Uploaded by

Haris Khalid
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views

First Assignment Css Tags

The document discusses CSS tags and properties. It describes three ways to implement CSS: inline, embedded, and external. It then explains properties for colors, fonts, text, backgrounds, tables, borders, positioning, and lists. Colors can be defined by name, hex code, or RGB values. Font properties include size, style, weight, and family. Background properties cover color, image, position, and attachment. Borders have properties for width, color, and style.

Uploaded by

Haris Khalid
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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;
}

You might also like