Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <section id="hero"> <h2>Hero</h2> <p>ID selector wins with highest specificity.</p> </section> <article class="card highlight"> <h2>Highlighted Card</h2> <p>Two class selectors provide medium specificity.</p> </article> <section class="card"> <h2>Section Card</h2> <p>Type + class selector has lower specificity.</p> </section> </body> </html>
/* Score: (0,1,0,0) */ #hero { background: #0ea5e9; color: #0f172a; padding: 16px; border-radius: 12px; margin-bottom: 12px; } /* Score: (0,0,2,0) */ .card.highlight { background: #f0f9ff; color: #0f172a; padding: 16px; border-radius: 12px; margin-bottom: 12px; } /* Score: (0,0,1,1) */ section.card { background: #fff; color: #0f172a; padding: 16px; border-radius: 12px; border: 1px solid #cbd5f5; }
