still chapter 4 more style. topics how to specify “style” for beautifying your content? using...
TRANSCRIPT
![Page 1: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/1.jpg)
STILL CHAPTER 4
More Style
![Page 2: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/2.jpg)
Topics
How to specify “style” for beautifying your content? Using <style> tag and style attributes and values
Separate file for .cssHow to reference images? Using <img > tagHow 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 style issues
![Page 3: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/3.jpg)
Style tag
How to specify a style item?In the head section using <style> </style>{attribute: value;}Exampletag_name{background-color: orange}There can be more style specification for each tagh1{color:orange;text-align:center;}
![Page 4: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/4.jpg)
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>
![Page 5: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/5.jpg)
Separate html and css files
Lets separate them out
File1.html
File1.css
![Page 6: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/6.jpg)
<!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>
![Page 7: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/7.jpg)
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;font-style: italic;}
The css file
![Page 8: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/8.jpg)
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.
![Page 9: STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content? Using tag and style attributes and values Separate file for.css](https://reader035.vdocuments.us/reader035/viewer/2022072014/56649e7e5503460f94b810d3/html5/thumbnails/9.jpg)
Summary
Lets try all these examples.Also lets discuss Lab 1