1 / 9

More Style

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?

nellie
Download Presentation

More Style

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More Style Still Chapter 4

  2. 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

  3. 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; }

  4. 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>

  5. Separate html and css files Lets separate them out File1.html File1.css

  6. <!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>

  7. 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; }

  8. 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.

  9. Summary Lets try all these examples. Also lets discuss Lab 1

More Related