CSS

319 views

Published on

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

No Downloads
Views
Total views
319
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. CSS(Cascading Style Sheet) • • •
  2. 2. CSS • HTML Layout • CSS • • • • html Layout
  3. 3. <html> <body> <h1><font style="color:red; font-family:Arial"> </font></h1> <p><font style="color: black; font-family:Arial"><b> </b></font></p> <h1><font style="color:red; font-family:Arial"> <html> <p><font style="color:red; font-family:Arial"><b> <head> <style type="text/css"> </body> </html> </font></h1> h {color:red; font-family:Arial; } 20 </b></font></p> p{color:black; font-family:Arial; font-weight:bold } </style> </head> <body> <h > </h > <p> </p> <h > </h > <p> </p> </body> </html>
  4. 4. • CSS selector, property value selector { property:value } selector { property1:value1; property2:value2 }  selector HTML Tag body>, <p> Class name ID  property color , font-size  value property color:white, font-size:14px
  5. 5. Style Sheet 1. Inline Styles element HTML style sheet style="" <Tag style="property:value;"> style HTML Tag 2. Internal Style Sheet style Sheet HTML HTML Style Sheet HTML Tag head>...</head> Style
  6. 6. 3. External Style Sheet style HTML Style Sheet style type="text/css"> ... </style> css Style Sheet HTML Style Sheet head>...</head> <link rel="stylesheet" type="text/css" href="URL css">
  7. 7. CSS 1. style Style sheet selector   Inline style (inside an HTML element),  Internal style sheet (inside the <head> tag)  External style sheet  Style Inline style
  8. 8. style selector mystyle.css p{ color:black } p{ color:blue } p> HTML p> p> Tag <p> important p{color:black!important} p{color:blue} Tag <p> value
  9. 9. <html> <body> <head> <style type="text/css"> <!-h {color:red; font-family:Arial } p{color:black; font-family:Arial } --> </style> </head> <body> <h > </h > <p> </p> <h > </h > <p> </p>

×