Learning CSS Styling Techniques for Web Development
undefined
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 .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
Lets look at style issueshttp://www.w3schools.com/css/
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.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
Explore the process of specifying styles in HTML content, referencing images, separating style attributes into CSS files, and linking HTML and CSS files for effective web design. Learn about the use of tags, image references, separating styles, and more through practical examples and explanations.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
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
