Created
November 8, 2023 12:20
-
-
Save CodeLeom/5b7cbc1de74def7b581be4a725d8e40d to your computer and use it in GitHub Desktop.
explaining Inheritance in html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Inheritance</title> | |
| <style> | |
| /* color default is black */ | |
| html { | |
| color: green; | |
| } | |
| article a { | |
| color: black; | |
| } | |
| .tawa { | |
| display: inline-block; | |
| padding: 2px 4px; | |
| text-decoration: underline; | |
| background: coral; | |
| font: inherit; | |
| text-align: center; | |
| } | |
| strong { | |
| font-weight: 900; | |
| color: yellow; | |
| } | |
| .container { | |
| font-weight: 500; | |
| color: chocolate; | |
| } | |
| .container strong { | |
| font-weight: inherit; | |
| color: initial; | |
| } | |
| /* global styles for all paragraph element */ | |
| p { | |
| margin-top: 20px; | |
| color:skyblue; | |
| border: 1px solid black; | |
| width: 700px; | |
| height: 300px; | |
| } | |
| /* paragph global style ends here*** */ | |
| section p { | |
| color: unset; | |
| margin-top: unset; | |
| } | |
| div p { | |
| all: unset; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Let's Discuss Inheritance</h1> | |
| <a href="!#">Click Me</a> | |
| <article> | |
| <a href="!#"> I say Click Me na</a> | |
| </article> | |
| <p style="color: teal">Lorem ipsum dolor sit.</p> | |
| <h3>Inheritance Keywords</h3> | |
| <ol> | |
| <li>Inherit</li> | |
| <li>initial</li> | |
| <li>unset</li> | |
| <li>all</li> | |
| </ol> | |
| <h4>I am Talking about <strong>The Strong</strong> Word</h4> | |
| <section class="container"> | |
| <p>I am inside the container </p> | |
| <strong>I am a Strong Element inside the container</strong> | |
| </section> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam unde nam vitae optio corporis incidunt ad, doloremque nihil obcaecati consectetur placeat autem? Tenetur, velit. Enim sunt nisi officia sequi ex.</p> | |
| <section> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint deserunt ea, at delectus accusamus molestiae ipsum suscipit, ratione repellendus sed quis ab quod! Facere? | |
| </p> | |
| </section> | |
| <div> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet maiores debitis, illum doloremque recusandae praesentium distinctio sint iure illo aut similique aperiam, sunt amet? | |
| </p> | |
| </div> | |
| <p>is it working?</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment