<!DOCTYPE html>
<html>
<head>
    <style>
        /* Element selektori */
        p { color: #333; line-height: 1.6; }
        /* Class selektori */
        .muhim { color: #E84D3D; font-weight: bold; }
        .ramka { border: 2px solid #2E86AB; padding: 10px; border-radius: 8px; }
        /* ID selektori */
        #sarlavha { color: #1B3A5C; border-bottom: 3px solid #D4A533; padding-bottom: 5px; }
        /* Guruhlash */
        h2, h3 { color: #2E86AB; }
        /* Hover */
        .tugma { display: inline-block; padding: 10px 20px; background: #2E86AB; color: white; border-radius: 8px; cursor: pointer; transition: 0.3s; }
        .tugma:hover { background: #1B3A5C; transform: scale(1.05); }
    </style>
</head>
<body>
    <h1 id="sarlavha">CSS Selektorlar</h1>
    <p>Oddiy paragraf.</p>
    <p class="muhim">Muhim paragraf!</p>
    <div class="ramka">
        <h2>Ramka ichida</h2>
        <p>Bu matn ramka ichida.</p>
    </div>
    <br>
    <span class="tugma">Ustimga kel!</span>
</body>
</html>