still chapter 4 more style. topics how to specify “style” for beautifying your content? using...

9
STILL CHAPTER 4 More Style

Upload: scott-beasley

Post on 29-Dec-2015

214 views

Category:

Documents


2 download

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

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

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

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

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

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

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

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

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

Summary

Lets try all these examples.Also lets discuss Lab 1