2. INTERNAL CSS Casey Ames

3. Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation we will discuses Internal CSS.

4. What is internal CSS ◦ The type of style is defined by where you place the CSS ◦ Internal CSS is used in a single sheet document when it has a unique style ◦ Internal CSS is placed between tags inside the of the web page ◦ CSS code is different from HTML so it is written differently ◦ CSS is actually manipulating the HTML

5. Internal CSS Format The format for internal CSS looks like this: "HTML tag" { "CSS Property" : "Value" ; } HTML tag : this is element that needs to be manipulated body { background-color : green ;} h1 { color : white ;} p { margin-left : 40px ;} CSS Property : this is the CSS attribute that will be changing body { background-color: green;} h1 { color: white;} p { margin-left: 40px;} Value : this is stating what the attribute needs to change the HTML tag to body {background-color: green; } h1 {color: white; } p {margin-left: 40px; }

6. It looks like this: body { background-color: green; } h1 { color: white; margin-left: 40px; }

7. Advantages of Internal CSS ◦ It only effects the page you are working on ◦ You can still use classes and ID’s ◦ It doesn’t require multiple pages which is great when you can only upload one HTML file ◦ It has a higher precedence in the CSS peaking order, it will override the external CSS sheet

8. Disadvantages of Internal CSS ◦ It only effects one page ◦ It will increase the load time for the page

9. If it doesn’t work ◦ If the CSS code is not working, check to make sure that the : and ; are placed in the right place ◦ This is the most common rookie mistake

10. Sources ◦ http://www.w3schools.com/css/css_howto.asp http://www.w3schools.com/css/css_howto.asp ◦ http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.VF5wsPnF9yU http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.VF5wsPnF9yU ◦ http://www.tizag.com/cssT/internal.php http://www.tizag.com/cssT/internal.php ◦ http://webdesign.about.com/od/beginningcss/a/aa021807.htm http://webdesign.about.com/od/beginningcss/a/aa021807.htm