-
-
Save joskid/09d1fa5ce20839f594d4370186b0e46e to your computer and use it in GitHub Desktop.
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>CSS Classes vs Ids</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 24px; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | |
| font-weight: 100; | |
| line-height: 1.6; | |
| } | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| nav, | |
| header, | |
| main, | |
| footer { | |
| padding: 1rem 2rem; | |
| } | |
| nav { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-evenly; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| line-height: 1; | |
| } | |
| h2 { | |
| font-size: 2.4rem; | |
| } | |
| h3 { | |
| font-size: 1.8rem; | |
| font-weight: 100; | |
| } | |
| .subhead { | |
| color: #999; | |
| } | |
| p { | |
| font-size: 1rem; | |
| margin: 1.5rem 0; | |
| } | |
| .mainnav a { | |
| color: orange; | |
| } | |
| .container { | |
| background-color: rosybrown; | |
| } | |
| #four .four { | |
| font-size: 7rem; | |
| color: rebeccapurple; | |
| /* page specific variations of styles */ | |
| } | |
| body main.main h2 { | |
| /* higher specificity means harder to override */ | |
| } | |
| .main h2 { | |
| /* easier too override */ | |
| } | |
| </style> | |
| </head> | |
| <body id="three"> | |
| <div class="container"> | |
| <nav class="mainnav"> | |
| <a class="one" href="#">Link 1</a> | |
| <a class="two" href="#">Link 2</a> | |
| <a class="three" href="#">Link 3</a> | |
| <a class="four" href="#">Link 4</a> | |
| </nav> | |
| <header> | |
| <h1>CSS Classes vs Ids</h1> | |
| <h3 class="subhead">Noice</h3> | |
| </header> | |
| <main class="main"> | |
| <h2 id="level2">Sub Title</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis | |
| praesentium, dolore quam dolor, qui ipsa quasi sapiente necessitatibus | |
| reprehenderit, aliquam vero id vitae explicabo voluptatum totam ad | |
| dolores eveniet rerum? | |
| </p> | |
| <p> | |
| Esse qui magnam culpa doloremque alias deserunt. Excepturi ipsam | |
| beatae cupiditate nihil! Ipsam neque illum dolorum, veniam voluptates, | |
| amet porro unde repudiandae praesentium consequatur placeat? Molestiae | |
| laboriosam repellat quod laudantium. | |
| </p> | |
| <p> | |
| Voluptatum tempora eius quis nam earum? Optio ullam, ducimus | |
| cupiditate repellat vitae earum ipsam veniam in mollitia culpa | |
| adipisci itaque ratione minus iure sit libero, dolorum quos veritatis | |
| inventore. Laudantium! | |
| </p> | |
| </main> | |
| <footer> | |
| <p class="subhead">© 2020 Turkey Stuff Inc.</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment