Cascading+Style+Sheets_Exercises.pdf - Cascading Style Sheets(CSS Exercise \u2013 1(Selectors <!DOCTYPE html> <html> <!ELEMENT SELECTOR> <head> <style> p

Cascading+Style+Sheets_Exercises.pdf - Cascading Style...

This preview shows page 1 - 3 out of 4 pages.

Cascading Style Sheets (CSS) Exercise 1(Selectors) <!DOCTYPE html> <html> <!ELEMENT SELECTOR> <head> <style> p { text-align: center; color: red; } #para1 { text-align: center; color: red; } p.center { text-align: center; color: red; } p.large { font-size: 300%; } /* Test with all selectors */ </style> </head> <body> <p>Element Selector</p> <p>Umm Al Qura University</p> <p>University College Jamoum</p> <p>Makkah</p> <p>id Selector</p> <p id="para1">Hello World!</p> <p>Class Selector</p>
Image of page 1
<h1 class="center">Red and center-aligned heading</h1> <p class="center">This paragraph will be red and center-aligned.</p> <p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> </body> </html> Exercise 2 (Group Assign) <!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> Exercise 3 (Style sheet external) <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Exercise
Image of page 2
Image of page 3

You've reached the end of your free preview.

Want to read all 4 pages?

  • Winter '19

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture