Free Web Hosting by Netfirms
 Web Hosting by Netfirms | Free Domain Names by Netfirms

Introduction to CSS


Go to[CSS_week1] [CSS_week2] [CSS_week3] [CSS_week4] [CSS_week5]

[CSS_classhomework] [CSS_class page]
[Further Study thru links to css sites]

HTML allows only limited control over web page layout. However, thanks to Cascading Style Sheets, web designers can become true desktop publishers. CSS gives you total control over font styles and colors, precise margins, balanced white space, and various other page design elements. Style sheets can be used to create a uniform look and feel across an entire web site. Best of all, using CSS, you can modify hundreds of web page with just a few keystrokes.
This short course will introduce beginners to the magic of Cascading Style Sheets. Learn how to create inline and external style sheets to control fonts, colors, margins, justification and white space, and add pizzazz to hyperlinks without retyping HTML style tags over and over. Discover tips and tricks that can be used to make sure that all users see exactly the same web page regardless of browser configuration. By the end of this course, you will be writing custom style sheets that will give your web pages a distinctive and professional look and feel.
Curriculum: 5 week course; peer mentored. No textbook required.
Prerequisites: A working knowledge of HTML is required. Beginning HTML topics will not be covered in this class.

 

 

[Go to Top of Page]

CSS_week1

Homework Assignments CSS Week No. 1
 Done 10/12/02:  ccs_week1.htm  contains links to templates for mystyle.css and imagetopleftstyle.css.  css_week1.htm uses imagetopleftstyle.css rules as illustration of background image fixed upper left corner of page.

1. Create your own rules for the BODY, H1, A and P selectors and save them in your mystyle.css style sheet. Link this style sheet to your HTML files (template.1html and template2.html).
2. Create a background image or use this one and add it to an HTML document using an external style sheet — (create a new style sheet following the rules given for mystyle.css.) Use background-repeat and background-image to position your image on the page.
Post your style sheet rules on the classroom bulletin board. Specify Homework - Week One on the "Subject" field of your message for easy identification. You may also upload your style sheets and linked HTML documents to your own web site and post the URL where your homework can be viewed on the class board.


[Go to Top of Page]

CSS_week2

Homework Assignment Week 2


Go to your HTML documents that you created for class last week — template1.html and template2.html.
1. Use an embedded style sheet to override an external rule, and to add some borders, margins, and padding to a Web page. Add an image and put a border around it.
done 11:24 AM 10/23/2002

2. Use an embedded style sheet to add a list to your document. Add an image bullet. Nest a second list and use contextual selectors to add a style of your choice. Show both list-style-positions.
Cut and paste your style rules on the class bulletin board or post the URL where your work can be viewed. On the "Subject" field of your message, specify Homework - Week 2 for easy recognition.
Done 10:13 PM 10/23/2002
2002.10.23 22:17 B C:\My Documents\!VUNIV\avu101402\Intro_to_CSS\css_week_2\template1a.htm --> samtex.netfirms.com /www template1a.htm
[Go to Top of Page]

CSS_week3

Points to Remember
bulletUse length measurements to create static borders.
bulletUse percentages to create borders that resize with the browser window.
bulletPadding is added inside the element.
bulletMargin is added outside the element.
bulletBorder style, color, and width can vary from one side of an element to another.
bulletAn element can float to the left or right of the page body.
bulletClear can control where text appears in relation to an image.
Homework Assignment Week 3
For this week's homework, complete the following tasks:
  1. Use your text editor to create a class rule in mystyle.css. Apply the class in template2.html.
  2. Create a class rule in the embedded style of your HTML document. Use SPAN and DIV inline to apply the new class.
  3. Create an inline style rule that overrides an existing rule.
  4. Demonstrate your understanding of FLOAT and CLEAR by using them on your HTML document.
  5. Use the MARGIN family of properties to make one element overlap another.
  6. Make a border whose size remains static and another that changes when the browser window is resized.
Cut and paste your style rules on the class bulletin board or post the URL where your work can be viewed. On the "Subject" field of your message, specify Homework - Week 3 for easy recognition.

CLASS NOTES REVISE FOR WEEK 3

Contents of mystyle.css above.  "Make a border whose size remains static and another that changes when the browser window is resized."
The span style for the referenced paragraph background is yellow for emphasis C:\My Documents\!VUNIV\avu101402\Intro_to_CSS\css_week_3\template2c.html
http://samtex.netfirms.com/template2c.html
http://samtex.netfirms.com/mystyle.css
http://samtex.netfirms.com/birthday.gif
\toc: http://samtex.netfirms.com/toc.htm v Homework - Week 3
uploaded 10:46 PM 10/28/2002
css.nu  referenced http://samtex.netfirms.com/template2c.html is my prelim effort at week 3 homework Thanks to Glo, pointing out lesson exercise, I was able to “Make a border whose size remains static and another that changes when the browser window is resized." So, I resubmitted updated homework for week 3. Thanks for feedback.

http://samtex.netfirms.com/mystyle.css is style sheet in this exercise
revised8:29 AM 10/29/2002
template2c
revised7:02 AM 11/1/2002

Thanks

[Go to Top of Page]

CSS_week4

Homework Assignment
1. Demonstrate your understanding of pseudo-selectors by using :first-line, :first-letter and the three anchor <A> states in your HTML document. Add the :hover state to some of your hyperlinks.
2. Demonstrate your understanding of the lesson by using line-height, letter-spacing, word-spacing and vertical-align in your HTML document. Try working with margins and padding to make text-indent produce a hanging indent.
Cut and paste your style rules on the class bulletin board or post the URL where your work can be viewed. On the "Subject" field of your message, specify Homework - Week 4 for easy recognition.

8:38 PM 11/4/2002 uploaded [css_week4 done]
[Go to Top of Page]

CSS_week5

Homework Assignment

1. Use relative and absolute positioning to place two elements on your HTML page.

2. Use z-index to stack some images of your own or take these circles.

bluegreenorangeyellow

3. Add an overflow element to one of your HTML pages.

Well, that wraps it up! I hope you've enjoyed this introductory course on Cascading Style Sheets and that it will help you "make a splash" in designing eye-catching HTML documents. Thanks for joining us, and good luck!
Gloria Kraemer
Instructor

Uploaded Week 5 homework 10:54 PM 11/11/2002 [css_week5.htm]

[Go to Top of Page]
[table of contents]

CSS_classhomework
  1. summer02  <http://66.216.29.168/summer02/happytemplate.html>   
  2. afyteam.com  <http://anfyteam.com/index.html>   
  3. geocities  <http://geocities.com/sylviesheil>   
  4. geocities  <http://geocities.com/sylviesheil>   
  5. bravepages.com  <http://gildasegal.bravepages.com/CSSWeek1/index.html>   
  6. earthlink.net  <http://home.earthlink.net/~aspenm/homework/psp>   
  7. gte.net  <http://home1.gte.net/cpq12rjf/css/template2.htm>   
  8. centralia.ctc.edu  <http://library.centralia.ctc.edu/css/a1q2.html>   
  9. centralia.ctc.edu  <http://library.centralia.ctc.edu/css/assignment2question2.html>   
  10. centralia.ctc.edu  <http://library.centralia.ctc.edu/css/template1.html>   
  11. centralia.ctc.edu  <http://library.centralia.ctc.edu/css/template1.html>   
  12. optusnet.com.au  <http://members.optusnet.com.au/knowledgeseekers/css/template1.html>   
  13. rogers.com  <http://members.rogers.com/mmccann0459/csshomework.html>   
  14. shaw.ca  <http://members.shaw.ca/carlincomics/week3css.html>   
  15. comcast.net  <http://mywebpages.comcast.net/vupages/fall02.html>   
  16. sprint.ca  <http://pages.sprint.ca/justmystuff/files/css_toe.html>   
  17. netfirms.com  <http://samtex.netfirms.com/css_week1.htm>   
  18. netfirms.com  <http://samtex.netfirms.com/css_week4.htm>   
  19. netfirms.com  <http://samtex.netfirms.com/imagetopleftstyle.css>   
  20. netfirms.com  <http://samtex.netfirms.com/mystyle.css>   
  21. netfirms.com  <http://samtex.netfirms.com/mystyle.css>   
  22. netfirms.com  <http://samtex.netfirms.com/template1.html>   
  23. netfirms.com  <http://samtex.netfirms.com/template1a.htm>   
  24. netfirms.com  <http://samtex.netfirms.com/template2.html>   
  25. netfirms.com  <http://samtex.netfirms.com/template2.html>   
  26. netfirms.com  <http://samtex.netfirms.com/template2c.html>   
  27. netfirms.com  <http://samtex.netfirms.com/template2c.html>   
  28. netfirms.com  <http://samtex.netfirms.com/toc.htm>   
  29. bedwell.org  <http://www.bedwell.org/~tom/vufiles/toe/cascade/cascade_4.html>   
  30. dixie-darlin  <http://www.dixie-darlin.com/class2/>   
  31. dixie-darlin  <http://www.dixie-darlin.com/class2/homework/a/index.html>   
  32. dixie-darlin  <http://www.dixie-darlin.com/css/index.html>   
  33. docutype.net  <http://www.docutype.net/CSS_Class/template1.html>   
  34. docutype.net  <http://www.docutype.net/CSS_Class/template2.html>   
  35. electricadademy.org  <http://www.eclecticacademy.org/css/h-p-inline.html>   
  36. executiveassistance.org  <http://www.executiveassistance.org/css/template1.htm>   
  37. executiveassistance.org  <http://www.executiveassistance.org/css/template2.htm>   
  38. geocities.com  <http://www.geocities.com/bessted/2002_falltoe.html>   
  39. geocities.com  <http://www.geocities.com/bessted/css_ex2.html>   
  40. geocities.com  <http://www.geocities.com/dancenola/vutemplate1.html>   
  41. geocities.com  <http://www.geocities.com/dancenola/vutemplate2.html>   
  42. geocities.com  <http://www.geocities.com/dedegall/Pets_Page.htm>   
  43. geocities.com  <http://www.geocities.com/fclasses/index.html>   
  44. geocities.com  <http://www.geocities.com/jmahon882001/week1.html>   
  45. geocities.com  <http://www.geocities.com/jmahon882001/week1-2.html>   
  46. geocities.com  <http://www.geocities.com/rcube1982/css/css.html>   
  47. geocities.com  <http://www.geocities.com/sylviesheil>   
  48. geocities.com  <http://www.geocities.com/vcr_fv/learn/csswk1.html>   
  49. glokraemer.com  <http://www.glokraemer.com/test.html>   
  50. glokraemer.com  <http://www.glokraemer.com/vu/wk4mystyle.css>   
  51. goddessjewels.com  <http://www.goddessjewels.com/VU/CSS/List.htm>   
  52. goddessjewels.com  <http://www.goddessjewels.com/VU/CSS/wk4template1.htm>   
  53. goddessjewels.com  <http://www.goddessjewels.com/VU/CSS/wk4template2.htm>   
  54. goddessjewels.com  <http://www.goddessjewels.com/VU/CSS/wk4template3.htm>   
  55. goddessjewels.com  <http://www.goddessjewels.com/Web/October02/oct02_wk4.htm>   
  56. hou.quick.com  <http://www.hou.quik.com/baker45/>   
  57. manor.org  <http://www.manor.org/~tom/vufiles/toe/cascade/cascade_2.html>   
  58. manor.org  <http://www.manor.org/~tom/vufiles/toe/cascade/cascade_3.html>   
  59. maverickqueen.com  <http://www.maverickqueen.com/vufall2002.html>   
  60. unquapta.org  <http://www.unquapta.org/index.html>   
  61. vhwebdezine.com  <http://www.vhwebdezine.com/css/home.html>   
  62. webmoments.com  <http://www.webmoments.com/java/index.html>   
  63. zedd010.tripod.com  <http://Zedd010.tripod.com/index/css/css.html>   

[Go to Top of Page]

Further Study thru links to css sites

  1. Cascading Style sheets week3
      < http://cat-ti-tude.com/edu/cssweek3-1.html >   
  2. Applying Style Sheets to Part of Documents 
    < http://cs.senecac.on.ca/~amaskara/int222/cssfiles/stylesheetPres5.html >   
  3. Chapter 23 - What are Style Sheets? colorful tutor  
    < http://csciwww.etsu.edu/sullivan/csci1710/Lecturestylesheets.htm >       
  4. CSS Pointers Group
      <http://css.nu/>   
  5. css pointers group
      < http://css.nu/examples/font-family.html >   
  6. css pointers group
      < http://css.nu/includes/ >   
  7. CSS Bugs and Workarounds
      <http://css.nu/pointers/bugs.html>   
  8. CSS Pointers Menu
      <http://css.nu/pointers/index.html>   
  9. Lesson 12c: CMSC 157: Internet Programming CSS: Block Elements, Positioning, and Layers  
    < http://faculty.ccbc.cc.md.us/~bhoffm30/instructional/compsci/cmsc157/lessons/12/styleC.html#div >       
  10. style sheets definitions
      < http://glassdog.com/design-o-rama/css/page2.html >   
  11. adding css
      < http://glassdog.com/design-o-rama/css/page3.html >   
    Learning to add style to your pages by adding style to your pages, Part Three.
  12. using css
      < http://glassdog.com/design-o-rama/css/page4.html >   
  13. Lesson #3 - Introduction to Style Sheets
      < http://gracie.santarosa.edu/~ltrettin/5851b/stylesheets/w3css_frames.shtml#intro >   
  14. Why you should switch to cascading style sheets?
      < http://html.miningco.com/library/weekly/aa051801a.htm >   
  15. in-line style sheets
      < http://it.maconstate.edu/tutorials/HTML/html10/html10-01.htm >   
  16. PDF file Penn State check pages 13 & 14 for CSS tutorial
      <A href=" http://its.psu.edu/training/resources/handouts/html2/html2.pdf>   
  17. w3c validator
      <http://jigsaw.w3.org/css-validator/l>   
  18. quick reference formatting tags including division and span
      < http://members.tripod.com/~nu_b1/code/html/format.htm >   
  19. Some important new tags for use with css
      < http://sequoia.seq.org/teach/kelly/divspan.html >   
  20. cycling banners
      <http://sequoia.seq.org/teach/kelly/javascript/banner.html>   
  21. utah edu div/span tags.
      < http://umed.med.utah.edu/medinfo/deans/lesson/div_span_style.htm >   
  22. fear of stylesheets..
      < http://www.alistapart.com/stories/fear/ >   
  23. HTML tutorial
      < http://www.amittai.com/prose/tutorial.html#toc >   
  24. Web design cascading style sheet examples
      <http://www.artic.edu/webspaces/viscom4570/dhtml/css_examples.shtml?dhtml>   
  25. Index DOT Css THE Advanced CSS Resource
      <http://www.blooberry.com/indexdot/css/>   
  26. in-line css example
      < http://www.blooberry.com/indexdot/css/examples/cssinline.htm >   
    css html line by line explanation.
  27. Intro to css
      < http://www.cpc.unc.edu/services/computer/presentations/23jun1999.html >   
  28. HTML and Web Pages
      < http://www.creighton.edu/~csc107/Chapters/02-Supplemental.html >   
    David Reed Creighton University Chapter 2: HTML and Web Pages Supplemental Material and Exercises
  29. HTML TagWriter 3.7
      < http://www.dr-lex.34sp.com/tagwriter/docs/Tutorial.html#StylesNew >   
  30. style sheets introductions
      < http://www.glassdog.com/design-o-rama/css/page3.html >   
  31. style sheets introductions
      <http://www.groan-zone.net/css.html>   
    (For Internet Explorer 4.0 and Netscape Communicator only.)
  32. Style sheets part7
      < http://www.groan-zone.net/css/css7.html >   
    Part 7 - Positioning Properties
  33. WDG Web Design Group! Cascading Style Sheets
      <http://www.htmlhelp.com/reference/css/>   
    Part 7 - Positioning Properties
  34. WDG Web Design Group! CSS CHECKUP!
      < http://www.htmlhelp.com/tools/csscheck/ >   
  35. CSS Frequently Asked Questions
      <http://www.hwg.org/resources/faqs/cssFAQ.html>   
  36. course: What is the difference between div and span tags?
      < http://www.jetler.com/lvs/css/css3.html >   
    neat backgruond partchment like.
  37. CSS/edge: tutorial, examine css
      < http://www.meyerweb.com/eric/css/edge/index.html >   
  38. how do I..?using cascading style sheets.
      < http://www.people.virginia.edu/~jfo/asee/casquik.htm >   
  39. Making a Web Page Series of pages
      < http://www.randsonline.co.uk/webpage/index.htm >   
    For Carol and Geraldine (and anyone else who wants to play)
  40. Stylesheets Tutorials
      < http://www.rcc.ryerson.ca/profdev/handson/cssheets/css-2.htm >   
  41. Introduction to Style sheets
      < http://www.santarosa.edu/~ltrettin/classes/8442B/stylesheets/w4css_styles.html >   
  42. uwgb.edu Week 2 Basic Cascading Style Sheets (CSS1)
      < http://www.uwgb.edu/mielkeb/cs331/week2.htm >   
  43. The World Wide Web Consortium (W3C) tutorials
      < http://www.w3.org/ >   
  44. The World Wide Web Consortium (W3C) index
      <http://www.w3.org/Help/siteindex>   
  45. The World Wide Web Consortium (W3C) What are style sheets?
      <http://www.w3.org/Style/>   
  46. (w3c) css home page
      < http://www.w3.org/Style/CSS/ >   
  47. CSS Tutorial
      <http://www.w3schools.com/css/default.asp>   
  48. Index DOT Css THE Advanced CSS Resource
      <http://www.webreview.com/style/css1/charts/mastergrid.shtml>   
  49. Style Sheet Reference Guide Master Compatibility Chart
      <http://www.webreview.com/style/css1/charts/mastergrid.shtml>   
  50. The complete CSS Guide toc
      <http://www.westciv.com/style_master/academy/css_tutorial/toc.htmll>   
  51. Self-paced Courses >> CSS Level 1
      <http://www.westciv.com/courses/course_info/css_level1/index.html>   
  52. 10 minute guide to html style sheets.
      < http://www.zacker.com/10minguide/l06-1.html >   

    [Go to Top of Page]

    Table of Contents
    Modified:
    links checked 11/28/02