INTERNAL CSS Casey Ames

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.

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

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; }

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

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

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

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

Sources ◦ ◦ ◦ ◦