CSS - CSE Buffalo

Download Report

Transcript CSS - CSE Buffalo 

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 style issues
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.css
File1.html
<!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