1. Cascading Style Sheet Basics Pepper

2. Looking at the HTML See the <> surrounding tags See head, body, paragraph, header See the ending tags See the list A page with no Styles A page with no styles Welcome to my page with no Styles, only HTML coding. I know the links go nowhere, but I will soon put those links into a nice table. They would go somewhere if they pointed to pages that existed. This page is just a normal page. Made 6/2007 Home page Links http://home.adelphi.edu/~pe16132/csc170/web/step/css/css.html

3. Simple Style inside an HTML tag Inside the <>, put a style = “something” Change from: A page with no styles TO: A page with no styles Pairs of Property name: choice List of properties: http://www.w3schools.com/cssref/default.asp http://www.w3schools.com/cssref/default.asp

4. Navigation Bar Styling Goal: set the physical location (em’s over from the left) of the body of the page, and set the physical location (em’s over from the left) of the navigation words. To set the list of navigation links to always start in the upper left: <ul style = " position: absolute; top: 2em; left: 1em; width: 9em"> To pad 11 ems over from the left, set your body to: padding-left: 11em;

5. Move your style up to the header Same style can move up to the header as an internal style sheet For UL, we will want some lists on our page not to be in the upper left, so make it a type of UL with ul.navbar body {padding-left: 11em; } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } For UL, to get the.navbar class : http://home.adelphi.edu/~pe16132/csc170/web/step/css/css3.html

6. Move Out to External Style Sheet Inside the : The external stylesheet would contain exactly what was in the internal style sheet: body {padding-left: 11em;} ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

7. CSS Guides Examples of each level of styling http://home.adelphi.edu/~pe16132/csc170/web/step/csslinks.htm Tutorials: – good tutorial good tutorial – tutorial 2 - with tutorial 2 - with – command reference from w3schools command reference from w3schools – more on ids more on ids – more on classes more on classes – positioning navigation bars positioning navigation bars

8. Priority of Style Levels HTML pages can have the same style repeated in four forms in one page. It has to know which takes priority. Here is the order, with the highest number being the one that will be used. Browser default External style sheet Internal style sheet (inside the tag) Inline style (inside an HTML element) called inline