Download presentation
Presentation is loading. Please wait.
Spring 2009 Kevin Cole Gallaudet University
Similar presentations
Presentation on theme: "Spring 2009 Kevin Cole Gallaudet University"— Presentation transcript:
1
Spring 2009 Kevin Cole Gallaudet University 2009.02.17
Web Design I Spring 2009 Kevin Cole Gallaudet University
2
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="...">
3
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 or /, then the file location is relative to the location of the file that has the src= or href=.
4
"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 or /, then the file location is relative to the location of the file that has the src= or href=.
5
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
6
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 or /, then the file location is relative to the location of the file that has the src= or href=.
Similar presentations