Spring 2009 Kevin Cole Gallaudet University 2009.02.17 Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.02.17
Style External (separate) stylesheet file: <link rel="stylesheet" type="text/css" href="...css" /> Internal (in <head>...</head>) style sheet: <style>...</style> Style attribute: <element style="...">
Internal style sheet ... <head> <style> body {background-color: #fbc75a;} p {margin: 1em 5em 1em 5em; font-weight: bold;} </style> </head> page1.html is in the Desktop folder. The first <img .../> uses a file in Pictures The second <img.../> uses a file that is on a remote web server. The link to page3.html must specify the folder name also. If the src="..." or href="..." does not start with http:// or /, then the file location is relative to the location of the file that has the src= or href=.
"quick" styles ... <h1 style="font-size: 50px;">Styled H1</h1> <p style="color: red; border: thin solid black;">This style only works on this paragraph</p> <p>This paragraph has no special style applied to it</p> page1.html is in the Desktop folder. The first <img .../> uses a file in Pictures The second <img.../> uses a file that is on a remote web server. The link to page3.html must specify the folder name also. If the src="..." or href="..." does not start with http:// or /, then the file location is relative to the location of the file that has the src= or href=.
Don't overuse quick styles Styles within a tag can be hard for a designer to remember and organize. Often, the style will be applied to more than one tag. Results: Lots of repeated style properties. A better way: class attribute
class attribute ... <head> <style> .biblio {background-color: #fbc75a;} .intro {font-size: 20%;} </style> </head> <body> <p class="intro">This paper is about blah.</p> <p>Some more information.</p> ... <p class="biblio">Books and authors.</p> page1.html is in the Desktop folder. The first <img .../> uses a file in Pictures The second <img.../> uses a file that is on a remote web server. The link to page3.html must specify the folder name also. If the src="..." or href="..." does not start with http:// or /, then the file location is relative to the location of the file that has the src= or href=.