Download presentation
Presentation is loading. Please wait.
1
What is CSS
2
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup language.
3
What is CSS? Principles of Styling with CSS | HTML 101
4
CSS Examples Hello World! Smaller heading! This is a paragraph.
5
Make a css-1.html <!DOCTYPE html> <html> <head>
<style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
6
<!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; }
7
</style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
8
CSS Examples
9
<!DOCTYPE html> <html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { width: 100%; height: auto; } </style> </head> <body> <p>Resize the browser window to see how the image will scale.</p> <img src=" width="460" height="345"> </body> </html>
10
<!DOCTYPE html> <html> <head> <style> img {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { width: 100%; height: auto; }
11
</style> </head> <body>
<p>Resize the browser window to see how the image will scale.</p> <img src=" width="460" height="345"> </body> </html>
12
Upload your responsive-image.html
13
CSS Links 1 Make a bu1.html <!DOCTYPE html> <html>
<head> <style> a { color: hotpink; } </style> </head> <body> <p><b><a href=“#" target="_blank">This is a link</a></b></p> </body> </html> Make a bu1.html
14
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; }
15
</style> </head> <body> </body> </html>
<p><b><a href=“#" target="_blank">This is a link</a></b></p> </body> </html>
16
Upload your bu1.html
18
CSS Links 2 Make a bu2.html <!DOCTYPE html> <html>
<head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; </style> </head> <body> <a href=“#" target="_blank">This is a link</a> </body> </html>
19
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; }
20
a:hover, a:active { background-color: red; } </style> </head> <body> <a href=“#" target="_blank">This is a link</a> </body> </html>
21
Upload your bu2.html
Similar presentations
