09/27/05 CISC103 Lecture Notes Chapter 6 of Pink Book Section 6.2 Inline Styles

This is some 10 pixel red text

Pizza ToppingSalad Dressing
MushroomBlue Cheese
As a reminder: with attributes of HTML tags, we use attributeName="value" border="10" But with CSS properties: propertyName: value; color: red; The colors are listed in Appendix B of your pink book. Three ways of using CSS: (1) inline (6.2 in pink book) (2) embedded style sheets (6.3 in pink book)... example of that is the Calendar for CISC103 (3) linked style sheet (6.5 in pink book) Embedded Style Sheets ===================== http://copland.udel.edu/~pconrad/cisc103/05F/info/cisc103.05F.cal.html An embedded style sheet is directly in the HTML document, in a element nested inside the element. An advantage is that your entire web page can be represented in a single file. A disadvantage is.... I have style sheet information in each of several files... the HTML file for my CISC103 calendar, the HTML file for my CISC181 calendar, etc. etc. a different HTML file for each course, each with its own embedded style sheet. If I want to change the color for a course, e.g. if the CISC103 book changes from pink to green, I would have to update the embedded style sheets in multiple HTML files. Better than updating every single tag... But not as good as updating in only one place for the entire site. Linked Style Sheets Note: a link element is NOT used for hypertext linking! Q: For hypertext linking, we use what element? A: We use an "a" element, with an "href" attribute... If we go to the file: http://interactivemedia.udel.edu/participants.html which is linked to from the main page: http://interactivemedia.udel.edu/index.html We see that the SAME style sheet is used! An important concept is "relative URL" vs. "absolute URL" If we download the files from interactivemedia.udel.edu index.html participants.html stylesheet.css and locate them all in the same directory on our hard disk, because they all use "relative URLs" to refer to each other, they will all still remain linked together. If I click in the link on one, it will take me to the other. These are relative URLs: Home Participants These are absolute URLs: Home Participants