اعمال نشدن پراپرتی vertical-align در استایل اکسترنال

درود

خواستم بدونم چرا بعضی از پراپرتی‌ها مثل vertical-align و background-color از فایل css فراخونده نمیشن و باید در تگ style قرار داده بشن؟

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جلسه هفتم</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <style>
        /* .test-1 {
            font-size: 24px;
            color: blue;
            background-color: yellow;
            padding: 10px;
        }
        .test-2 {
            font-size: 24px;
            vertical-align: -10px;
        } */
    </style>
</head>
<body>
    <span class="material-symbols-outlined">key</span>
    <a href="https://www.google.com/search?q=skar+face&oq=skar+face&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIPCAEQLhgKGIMBGLEDGIAEMgkIAhAAGAoYgAQyCQgDEAAYChiABDIJCAQQLhgKGIAEMgkIBRAAGAoYgAQyCQgGEC4YChiABDIJCAcQABgKGIAEMgkICBAAGAoYgATSAQkxNDcyM2owajeoAgiwAgE&sourceid=chrome&ie=UTF-8"
        target="_blank"><i class="material-symbols-outlined test-1">face</i></a>
    <button class="test-3"><i class="material-symbols-outlined test-2">search</i>جست و جو</button>
</body>
</html>

.test-1 {
            font-size: 24px;
            color: blue;
            background-color: yellow;
            padding: 10px;
        }
        .test-2 {
            font-size: 24px;
            vertical-align: -50px;
        }