1. CSS element Selector
<!DOCTYPE html> <html> <head> <style> p { text-align: center; color: white; } .paral{ background-color: blue; border: 2px solid red; } #para1 p{ color:white; } </style> </head> <body> <div class="paral"> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
<!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html>
<!DOCTYPE html> <html> <head> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html>
<!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color:red; } body{ background-color: #dbbd66; } </style> </head> <body> <h1>Hello World!</h1> <h2>How are You!</h2> <p>How do you do...</p> </body> </html>