90 likes | 228 Vues
More Style . Still Chapter 4. Topics. How to specify “style” for beautifying your content? Using <style> tag and style attributes and values Separate file for . css How to reference images? Using < img > tag How to separate the style items into another file?
E N D
More Style Still Chapter 4
Topics • How to specify “style” for beautifying your content? • Using <style> tag and style attributes and values • Separate file for .css • How to reference images? Using <img > tag • How to separate the style items into another file? • Move only the style attributes to another file that has .css as type • A css file does NOT include tags • How to reference files within your computer directory and files out on the web? • Using href , relative pathnames and absolute pathnames • We will look at examples for these. • Also see http://www.w3schools.com/css/ • Lets look at s
Style tag How to specify a style item? In the head section using <style> </style> {attribute: value;} Example tag_name{background-color: orange} There can be more style specification for each tag h1 { color:orange; text-align:center; }
Css within the html file <!DOCTYPE html> <html> <head> <style> body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; font-style: italic; } </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html>
Separate html and css files Lets separate them out File1.html File1.css
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="ex2.css"> <style type="text/css"> body {background-color: lightblue;} </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html>
The css file body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; font-style: italic; }
References to other html files <a href="url">Link text</a> <a href=“resume.html">My Resume</a> Local link, relative path name. <a href="http://www.cse.buffalo.edu">W3C</a> CSE dept Web page.
Summary Lets try all these examples. Also lets discuss Lab 1