Created
September 5, 2022 14:07
-
-
Save prof3ssorSt3v3/f07ce268709cddabbdf253c8c8a13e91 to your computer and use it in GitHub Desktop.
Code from video about : vs ::
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 http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>: vs :: in CSS</title> | |
| <link rel="stylesheet" href="main.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>: vs :: in CSS</h1> | |
| </header> | |
| <main> | |
| <section class="links"> | |
| <a | |
| href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" | |
| >Pseudo Classes MDN</a | |
| > | |
| vs | |
| <a | |
| href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" | |
| >Pseudo Elements MDN</a | |
| > | |
| <p> | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum alias | |
| facilis provident aperiam dolorem omnis est autem reiciendis enim | |
| magnam. Doloremque ipsam ad, corrupti nesciunt qui consectetur quos | |
| eum autem! | |
| </p> | |
| </section> | |
| </main> | |
| </body> | |
| </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
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 20px; | |
| font-family: sans-serif; | |
| font-weight: 300; | |
| } | |
| body { | |
| min-height: 100vh; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| } | |
| a:hover { | |
| color: black; | |
| } | |
| a:active { | |
| color: gold; | |
| } | |
| p { | |
| color: rebeccapurple; | |
| } | |
| p::first-letter { | |
| font-size: 4rem; | |
| } | |
| p::after { | |
| content: "hello"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment