Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 STILL CHAPTER 4 More Style

2 Topics How to specify “style” for beautifying your content?  Using tag and style attributes and values Separate file for.css How to reference images? Using 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/http://www.w3schools.com/css/ Lets look at style issues

3 Style tag How to specify a style item? In the head section using {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 body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; font-style: italic; } CSS example! This is a paragraph.

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

6 body {background-color: lightblue;} CSS example! This is a paragraph.

7 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

8 References to other html files Link text My Resume Local link, relative path name. W3C CSE dept Web page.

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


Download ppt "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."

Similar presentations


Ads by Google