Web Engineering
Muhammad Asim Siddique
CSS Background
Background Color
• The background-color property specifies the background
color of an element.
• The backgr...
CSS Background
• body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
...
CSS Text
• Text Color
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
• Text Alignment
h1 {text-align:cent...
CSS Text
• Text Decoration
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline...
CSS Font
• Font Style
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
• Font S...
Styling Links
• a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:...
CSS Tables
• table, th, td
{
border: 1px solid black;
}
• th
{
background-color:green;
color:white;
}
8
Muhammad Asim Sidd...
Upcoming SlideShare
Loading in...5
×

05 css

93

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
93
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

05 css

  1. 1. Web Engineering Muhammad Asim Siddique
  2. 2. CSS Background Background Color • The background-color property specifies the background color of an element. • The background color of a page is defined in the body selector: body {background-color:#b0c4de;} h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} Muhammad Asim Siddique, PUCIT 2
  3. 3. CSS Background • body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; } 3 Muhammad Asim Siddique, PUCIT
  4. 4. CSS Text • Text Color body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} • Text Alignment h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 4 Muhammad Asim Siddique, PUCIT
  5. 5. CSS Text • Text Decoration h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} • Text Transformation p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} 5 Muhammad Asim Siddique, PUCIT
  6. 6. CSS Font • Font Style p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} • Font Size h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} 6 Muhammad Asim Siddique, PUCIT
  7. 7. Styling Links • a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ • a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} 7 Muhammad Asim Siddique, PUCIT
  8. 8. CSS Tables • table, th, td { border: 1px solid black; } • th { background-color:green; color:white; } 8 Muhammad Asim Siddique, PUCIT
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×