Using CSS

From Fiddle to Web Page

Revisit Lab 1 1. Open COMP101 folder 2. Create lab1 folder 3. Open Komodo Edit 4. Create index.html from template 5. Adjust template 6. Open fiddle 7. Copy fiddle to body 8. Format 9. Validate with file upload 10. Upload to ISIS with Filezilla 11. Open with browser 12. Validate with URI

Adding CSS to the fiddle Fork your lab1 fiddle Change the whole body characteristics Colors Font Families Centering

Centering Elements such as body, div, main, header, footer can be given widths Specific size (px): never change Percentage of window (%): change By default, they will be on the left edge But you can change margins To center, tell it to AUTOmatically compute the margin

Adding CSS to the fiddle Fork your lab1 fiddle Change the whole body characteristics Colors Font Families Centering Change the format of the list Pseudo-element

PSEUDO-ELEMENTS Relate to a piece rather than all of the element selector::pseudo-element Style the first letter, or line, of an element first-line first-letter Insert content before, or after, the content of an element before after

Post Lab 2 1. Open COMP101 folder 2. Create lab2 folder 3. Open Komodo Edit 4. Create index.html from template 5. Adjust template 6. Create CSS template 7. Create lab2.css from template 8. Open fiddle 9. Copy fiddle HTML to body of index.html 10. Format 11. Copy fiddle CSS to lab2.css 12. Validate HTML and CSS with file upload 13. Upload to ISIS with Filezilla 14. Open with browser 15. Validate HTML and CSS with URI

HOME PAGE

Creating Your Home Page Download coursepage.html Save as index.html in COMP101 Upload to ISIS If lab1 and lab2 were set up correctly, you’ll be able to reach them! And assign1…