2. CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style

3. Css style will be written in the open tag This is a paragraph.

4. All css style will be held in head tag Like this : hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

5. Css file format is.css Css file will be imported to html webpage by insert the code into head tag Example: The advantage of external style sheet Css file can be loaded in to different webpage. No need to to write css again

6. The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

7. Tag ---- body,h1 p { color:red; text-align:center; } ID ----- name of element #para1 { text-align:center; color:red; } Class ----- set of style.center {text-align:center;}

8. body {background-color:#b0c4de;} body {background-image:url('bgdesert.jpg');} When using the shorthand property the order of the property values is: background-color background-image background-repeat background-attachment background-position

9. TEXT FORMATTING Text Color The color property is used to set the color of the text. With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red"

10. p{font-family:"Times New Roman", Times, serif; font-size:14px; }

11. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked 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 */

12. The image below illustrates the box model: width:220px; padding:10px; border:5px solid gray; margin:0px;

13. margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; The Shorten code margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px

14. padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; The shorten code padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px