What is CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
What is CSS? Principles of Styling with CSS | HTML 101 https://www.youtube.com/watch?v=rIhqDtyqDwY
CSS Examples Hello World! Smaller heading! This is a paragraph.
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>
<!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>
CSS Examples http://bus2226w16.com/stuhtml/3207/responsive-image.html
<!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="http://bus2226w16.com/stuhtml/3207/image/night2.jpg" width="460" height="345"> </body> </html>
<!DOCTYPE html> <html> <head> <style> img { <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="http://bus2226w16.com/stuhtml/3207/image/night2.jpg" width="460" height="345"> </body> </html>
Upload your responsive-image.html
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
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; }
</style> </head> <body> </body> </html> <p><b><a href=“#" target="_blank">This is a link</a></b></p> </body> </html>
Upload your bu1.html
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>
<!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>
Upload your bu2.html