Google Ads

Same class, different tag HTML Id HTML Examples – HTML Code

 

 
 
  1. <style>
  2. .city {
  3. background-color: tomato;
  4. color: white;
  5. padding: 10px;
  6. }
  7. </style>

 

 
 
  1. <h2 class="city">Paris</h2>
  2. <p class="city">Paris is the capital of France.</p>

 

Try Your Self ->

 


Multiple classes HTML Id HTML Examples – HTML Code

 

 
 
  1. <style>
  2. span.note {
  3. font-size: 120%;
  4. color: red;
  5. }
  6. </style>

 

 
 
  1. <h1>My <span class="note">Important</span> Heading</h1>
  2. <p>This is some <span class="note">important</span> text.</p>

 

Try Your Self ->

 


Access elements with a specified class name, with JavaScript HTML Id HTML Examples – HTML Code

 

 
 
  1. <style>
  2. .cities {
  3. background-color: black;
  4. color: white;
  5. margin: 20px;
  6. padding: 20px;
  7. }
  8. </style>

 

 
 
  1. <div class="cities">
  2. <h2>London</h2>
  3. <p>London is the capital of England.</p>
  4. </div>
  5. <div class="cities">
  6. <h2>Paris</h2>
  7. <p>Paris is the capital of France.</p>
  8. </div>
  9. <div class="cities">
  10. <h2>Tokyo</h2>
  11. <p>Tokyo is the capital of Japan.</p>
  12. </div>

 

Try Your Self ->

 


Style an element with a specific id HTML Id HTML Examples – HTML Code

 

 
 
  1. <style>
  2. #myHeader {
  3. background-color: lightblue;
  4. color: black;
  5. padding: 40px;
  6. text-align: center;
  7. }
  8. </style>

 

 
 
  1. <h1 id="myHeader">My Header</h1>

 

Try Your Self ->

 


Same class, different tag HTML Classes HTML Examples – HTML Code

 

 
 
  1. <style>
  2. .city {
  3. background-color: tomato;
  4. color: white;
  5. padding: 10px;
  6. }
  7. </style>

 

 
 
  1. <h2>Same Class, Different Tag</h2>
  2. <p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>
  3. <h2 class="city">Paris</h2>
  4. <p class="city">Paris is the capital of France.</p>

 

Try Your Self ->

 


Multiple classes HTML Classes HTML Examples – HTML Code

 

 
 
  1. <style>
  2. span.note {
  3. font-size: 120%;
  4. color: red;
  5. }
  6. </style>

 

 
 
  1. <h1>My <span class="note">Important</span> Heading</h1>
  2. <p>This is some <span class="note">important</span> text.</p>

 

Try Your Self ->

 


Access elements with a specified class name, with JavaScript HTML Classes HTML Examples – HTML Code

 

 
 
  1. <style>
  2. .cities {
  3. background-color: black;
  4. color: white;
  5. margin: 20px;
  6. padding: 20px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="cities">
  12. <h2>London</h2>
  13. <p>London is the capital of England.</p>
  14. </div>
  15. <div class="cities">
  16. <h2>Paris</h2>
  17. <p>Paris is the capital of France.</p>
  18. </div>
  19. <div class="cities">
  20. <h2>Tokyo</h2>
  21. <p>Tokyo is the capital of Japan.</p>
  22. </div>

 

Try Your Self ->

 


Style all elements with a specified class name HTML Classes HTML Examples – HTML Code

 

 
 
  1. <style>
  2. .cities {
  3. background-color: black;
  4. color: white;
  5. padding: 20px;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <h2>The class Attribute</h2>
  11. <p>Use CSS to style an element with the class name "cities":</p>
  12. <div class="cities">
  13. <h2>London</h2>
  14. <p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  15. <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  16. </div>

 

Try Your Self ->

 


Styling <span> elements HTML Block and inline elements HTML Examples – HTML Code

 

 
 
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>My <span style="color:red">Important</span> Heading</h1>
  5. </body>
  6. </html>

 

Try Your Self ->

 


Styling <div> elements HTML Block and inline elements HTML Examples – HTML Code

 

 
 
  1. <div style="background-color:black;color:white;padding:20px;">
  2. <h2>London</h2>
  3. <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  4. <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  5. </div>

 

Try Your Self ->

 

"