MCSS Color and Layout Properties            odule 06          Session 6
Module Introduction   Color and Background Properties   CSS Border   Box Properties
Color and Background Properties   Explain the event handling   Explain the syntax of color properties   Explain the bac...
Event Handling   The event is an action    that can be notified by    the source of event to be    subscribers.   The ev...
Color Properties   Color properties    specifies the    foreground color of    an element.   Syntax:    color: <value>
Background Properties
Background Propertiesbody {      background-image: url(Greeting.jpg);      background-repeat: repeat-y;      background-at...
CSS Border   Describe   border style properties   Describe   border color properties   Describe   border width properti...
Border Style Properties
Border Color, Border WidthProperties                  .tip {                       background-color: lightcyan;           ...
Border Color Properties<html><head><title>Welcome</title><link href="BorderColor.css" rel="stylesheet" type="text/css"></h...
Shorthand Border Properties.myshorthand {     border-top: dashed double #00FF00;     border-bottom: #FF0000 20 double;    ...
Box Properties: Margin
Box Properties: Padding
Summary   CSS provides various properties that allow to    define foreground and background color.   CSS provides backgr...
Summary…   The Box property includes: Margin and    Padding properties.   The Margin property is a shorthand property   ...
Upcoming SlideShare
Loading in …5
×

06. session 06 css color_andlayoutpropeties

448 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
448
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

06. session 06 css color_andlayoutpropeties

  1. 1. MCSS Color and Layout Properties odule 06 Session 6
  2. 2. Module Introduction Color and Background Properties CSS Border Box Properties
  3. 3. Color and Background Properties Explain the event handling Explain the syntax of color properties Explain the background properties
  4. 4. Event Handling The event is an action that can be notified by the source of event to be subscribers. The events must be handled by the event handlers. Some events: mouse clicks, keystrokes,…
  5. 5. Color Properties Color properties specifies the foreground color of an element. Syntax: color: <value>
  6. 6. Background Properties
  7. 7. Background Propertiesbody { background-image: url(Greeting.jpg); background-repeat: repeat-y; background-attachment: fixed;}div { background-color: #FFFF00; text-align: right;}- - -- - -- - -- - -- - -- - -- - -- - -- - -- - -- - -<html><head> <title>Welcome</title> <link href="Background.css" rel="stylesheet" type="text/css”/></head><body> <h2>Welcome to FPT University.</h2> <div><p>Dream of Innovation </p></div></body></html>
  8. 8. CSS Border Describe border style properties Describe border color properties Describe border width properties Describe shorthand border properties
  9. 9. Border Style Properties
  10. 10. Border Color, Border WidthProperties .tip { background-color: lightcyan; border-top-color: #0000FF; border-right-color: #FF0000; border-bottom-color: #FF00FF; border-left-color: #FFFF00; border-style: double; border-width: 20px; } img { border-style: dashed; border-color: #CC00FF; border-top-width: 20px; border-left-width: thick; border-right-width: thin ; }
  11. 11. Border Color Properties<html><head><title>Welcome</title><link href="BorderColor.css" rel="stylesheet" type="text/css"></head><body><h2>CSS style border properties</h2><div class="tip"> <ol> <li><b>Style </b>sets the style appearance of the border.</li> <li><b>Width </b>sets the thickness of the elements border</li> <li><b>Color </b>sets the color of the border.</li> </ol></div></body></html>
  12. 12. Shorthand Border Properties.myshorthand { border-top: dashed double #00FF00; border-bottom: #FF0000 20 double; border-right: dotted #0000FF thick; border-left: inset medium rgb(255,0,255);}- --------------------------------------<html><head><title>Welcome</title><link href="ShorthandBorderColor.css" rel="stylesheet" type="text/css"></head><body><h2>Using Shorthand border properties</h2><img class="myshorthand" src="Cup.jpg" width="200" height="200" /></body></body></html>
  13. 13. Box Properties: Margin
  14. 14. Box Properties: Padding
  15. 15. Summary CSS provides various properties that allow to define foreground and background color. CSS provides background properties that specify the background color and image for Web pages. CSS provides border properties that allow to create borders around text and images to give effective pleasing. Border properties specify the color, type and width of the border.
  16. 16. Summary… The Box property includes: Margin and Padding properties. The Margin property is a shorthand property that specifies the all four margin around the content just one declaration. The Padding property is a shorthand property that specifies the padding for all the side in just one declaration. Building Dynamic Websites/Session 1/ 16 of 16

×