still chapter 4 more style. topics how to specify “style” for beautifying your content? using...
TRANSCRIPT
STILL CHAPTER 4
More Style
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
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;}
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>
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
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