• stylus
  • tricky
  • using bas64 string for svg
  • system font stack
• bootstrap
  • using boostrap sytles
• alert
  • bootstrap alert
  • callout
• kbd
• border
  • padding
  • border-style
• font
• selector
  • attribute selectors
  • debug tooltips in inspect
  • references

[!NOTE|label:references:]

• Buttons
  • hover me

stylus

[!TIP|label:references:]

• * marslo/global-fonts | * global fonts ( marslo ) | click to install
• * marslo/google-gruvbox | * gruvbox google ( marslo ) | click to install
• * userstyle.org: marslo
  • Google - Clean Dark (marslo)
  • Kubernetes.io Dark theme (marslo)
  • New Dev's Dark StackOverflow (marslo)
  • GitHub Ice Dark (marslo)
• touhidulshawan/gruvbox-google
• Factral/GoogleTranslateDarkTheme
• Google Translate Dark Theme But better

• google-gruvbox | google gruvbox

  

  

• font-ubuntu | marslo ( ubuntu )

  • gerrit comments:

    

    

    

tricky

• :not(a[class*="btn"]) == :is(a:not([class*="btn"])
  • i.e.:

    h2 > :not(a[class*="btn"]),
    h2 > :is(a:not([class*="btn"]),
    

using bas64 string for svg

• original

  background-image: url("https://path/to/icon.svg")
  

• using data:image/svg+xml;base64

  • generate bas64 encoded string

    $ cat icon.svg | base64
    

  • using bas64 string in css

    background-image: url(background-image: url("data:image/svg+xml;base64,......")
    

system font stack

[!TIP|label:references:]

• #665 - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
  • -apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  • system-ui represents the default UI font on a given platform.
  • BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.
  • Segoe UI targets Windows and Windows Phone.
  • Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.
• The New System Font Stack?
• System Font Stack

body {
  font-family: -apple-system,
               system-ui,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               "Helvetica Neue",
               Arial,
               sans-serif
}

/* Wordpress 4.6 */
body {
   font-family: -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Oxygen-Sans,
                Ubuntu,
                Cantarell,
                "Helvetica Neue",
                sans-serif;
}

/** github **/
body {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Helvetica,
               Arial,
               sans-serif,
               "Apple Color Emoji",  /* Emojis*/
               "Segoe UI Emoji",     /* Emojis*/
               "Segoe UI Symbol";    /* Emojis*/
}

• explain

  | FONT | DEVICE TARGETED | |--------------------------------------|-----------------------------------------| | -apple-system (San Francisco) | iOS Safari, macOS Safari, macOS Firefox | | BlinkMacSystemFont (San Francisco) | macOS Chrome | | Segoe UI | Windows | | Roboto | Android, Chrome OS | | Oxygen / Oxygen-Sans | KDE | | Fira Sans | Firefox OS | | Droid Sans | Older versions of Android | | Ubuntu | Ubuntu | | Cantarell | GNOME | | Helvetica Neue | macOS versions < 10.11 | | Arial | Any | | sans-serif | Any |

• comparison between the font stacks used by sites

  | WORDPRESS | MEDIUM | GHOST | GITHUB | |----------------------|----------------------|----------------------|----------------------| | -apple-system | -apple-system | -apple-system | -apple-system | | BlinkMacSystemFont | BlinkMacSystemFont | BlinkMacSystemFont | BlinkMacSystemFont | | "Segoe UI" | "Segoe UI" | "Segoe UI" | "Segoe UI" | | Roboto | Roboto | Roboto | Roboto | | Oxygen-Sans | Oxygen | Oxygen | Helvetica | | Ubuntu | Ubuntu | Ubuntu | Arial | | Cantarell | Cantarell | Cantarell | sans-serif | | "Helvetica Neue" | Open Sans | "Fira Sans" | | | sans-serif | Helvetica Neue" | "Droid Sans" | | | | sans-serif | "Helvetica Neue" | | | | | sans-serif | |

bootstrap

using boostrap sytles

[!NOTE|style:callout]

• bootstrap 4.x

  <head>
  <link href="https://getbootstrap.com/docs/4.0/assets/css/docs.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  

• bootstap 5.x

  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
      <!-- Bootstrap JS Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
  

• 4.x

  <!doctype html>
  <html lang="en">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
      <title>Hello, world!</title>
    </head>
    <body>
      <h1>Hello, world!</h1>
  
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
  </html>
  

• 5.x

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>original bootstrap 5.x alert</title>
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
      <h1>Hello, world!</h1>
      <!-- Bootstrap JS Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
  </html>
  

alert

bootstrap alert

• bootstrap alert 4.x

• bootstrap alert 5.x

bootstrap 5.x :root

:root{
  --bs-blue:#0d6efd;
  --bs-indigo:#6610f2;
  --bs-purple:#6f42c1;
  --bs-pink:#d63384;
  --bs-red:#dc3545;
  --bs-orange:#fd7e14;
  --bs-yellow:#ffc107;
  --bs-green:#198754;
  --bs-teal:#20c997;
  --bs-cyan:#0dcaf0;
  --bs-black:#000;
  --bs-white:#fff;
  --bs-gray:#6c757d;
  --bs-gray-dark:#343a40;
  --bs-gray-100:#f8f9fa;
  --bs-gray-200:#e9ecef;
  --bs-gray-300:#dee2e6;
  --bs-gray-400:#ced4da;
  --bs-gray-500:#adb5bd;
  --bs-gray-600:#6c757d;
  --bs-gray-700:#495057;
  --bs-gray-800:#343a40;
  --bs-gray-900:#212529;
  --bs-primary:#0d6efd;
  --bs-secondary:#6c757d;
  --bs-success:#198754;
  --bs-info:#0dcaf0;
  --bs-warning:#ffc107;
  --bs-danger:#dc3545;
  --bs-light:#f8f9fa;
  --bs-dark:#212529;
  --bs-primary-rgb:13,110,253;
  --bs-secondary-rgb:108,117,125;
  --bs-success-rgb:25,135,84;
  --bs-info-rgb:13,202,240;
  --bs-warning-rgb:255,193,7;
  --bs-danger-rgb:220,53,69;
  --bs-light-rgb:248,249,250;
  --bs-dark-rgb:33,37,41;
  --bs-white-rgb:255,255,255;
  --bs-black-rgb:0,0,0;
  --bs-body-color-rgb:33,37,41;
  --bs-body-bg-rgb:255,255,255;
  --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-font-size:1rem;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.5;
  --bs-body-color:#212529;
  --bs-body-bg:#fff;
  --bs-border-width:1px;
  --bs-border-style:solid;
  --bs-border-color:#dee2e6;
  --bs-border-color-translucent:rgba(0, 0, 0, 0.175);
  --bs-border-radius:0.375rem;
  --bs-border-radius-sm:0.25rem;
  --bs-border-radius-lg:0.5rem;
  --bs-border-radius-xl:1rem;
  --bs-border-radius-2xl:2rem;
  --bs-border-radius-pill:50rem;
  --bs-link-color:#0d6efd;
  --bs-link-hover-color:#0a58ca;
  --bs-code-color:#d63384;
  --bs-highlight-bg:#fff3cd
}

• warning

  • 5.x

    <div style="--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius); padding-right:3rem; -bs-alert-color:#664d03;--bs-alert-bg:#fff3cd;--bs-alert-border-color:#ffecb5">
      <h4 style="color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Warning Alert !</h4>
      This is a warning alert with <a href="#" style="font-weight:700; color:#523e02">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-warning alert-dismissible fade show">
        <h4 class="alert-heading">Warning Alert !</h4>
        This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

  • 4.x

    <div style="position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; color:#856404; background-color:#fff3cd; border-color:#ffeeba">
      <h4 style="font-size: 1.5rem; color:inherit">Warning Alert !</h4>
      This is a warning alert with <a href="#" style="color:#533f03">an example link</a>. Give it a click if you like.
    </div>
    
    <!-- 5.x colors -->
    <div style="position:relative; padding:1rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.375rem; padding-right:3rem; color:#664d03; background-color:#fff3cd; border-color:#ffecb5">
      <h4 style="font-size: 1.5rem; color: #523e02; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Warning Alert !</h4>
      This is a warning alert with <a href="#" style="font-weight:700; color:#523e02">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-warning" role="alert">
        <h4 class="alert-heading">Warning Alert !</h4>
        This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

• success

  • 5.x

    <div style="--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius); padding-right:3rem; --bs-alert-color:#0f5132;--bs-alert-bg:#d1e7dd;--bs-alert-border-color:#badbcc">
      <h4 style="color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Success Alert !</h4>
      This is a success alert with <a href="#" style="font-weight:700; color:#0c4128">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-success alert-dismissible fade show">
        <h4 class="alert-heading">Success Alert !</h4>
        This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

  • 4.x

    <div style="position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; color:#155724; background-color:#d4edda; border-color:#c3e6cb">
      <h4 style="color:inherit">Success Alert !</h4>
      This is a success alert with <a href="#" style="color:#0b2e13">an example link</a>. Give it a click if you like.
    </div>
    
    <!-- 5.x color -->
    <div style="position:relative; padding:1rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.375rem; padding-right:3rem; color:#0f5132; background-color:#d1e7dd; border-color:#badbcc">
      <h4 style="font-size: 1.5rem; color: inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Success Alert !</h4>
      This is a success alert with <a href="#" style="font-weight:700; color:#0c4128">an example link</a>. Give it a click if you like.
    </div>
    

  • original

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Success Alert !</h4>
      This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    

• danger

  • 5.x

    <div style="--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius); padding-right:3rem; --bs-alert-color:#842029;--bs-alert-bg:#f8d7da;--bs-alert-border-color:#f5c2c7">
      <h4 style="color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Danger Alert !</h4>
      This is a danger alert with <a href="#" style="font-weight:700; color:#6a1a21">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-danger alert-dismissible fade show">
        <h4 class="alert-heading">Danger Alert !</h4>
        This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

  • 4.x

    <div style="position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; color:#721c24; background-color:#f8d7da; border-color:#f5c6cb">
      <h4 style="font-size: 1.5rem; color:inherit">Danger Alter !</h4>
      This is a danger alert with <a href="#" style="color:#491217">an example link</a>. Give it a click if you like.
    </div>
    
    <!-- 5.x color -->
    <div style="position:relative; padding:1rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.375rem; color:#842029; background-color:#f8d7da; border-color:#f5c2c7">
      <h4 style="font-size: 1.5rem; color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Danger Alert !</h4>
      This is a danger alert with <a href="#" style="font-weight:700; color:#6a1a21;">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-danger" role="alert">
        <h4 class="alert-heading">Danger Alert !</h4>
        This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

• primary

  • 5.x

    <div style="--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius); padding-right:3rem; --bs-alert-color:#084298;--bs-alert-bg:#cfe2ff;--bs-alert-border-color:#b6d4fe">
      <h4 style="color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Primary Alert !</h4>
      This is a primary alert with <a href="#" style="font-weight:700; color:#06357a">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-primary alert-dismissible fade show">
        <h4 class="alert-heading">Primary Alert !</h4>
        This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

  • 4.x

    <div style="position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; color:#004085; background-color:#cce5ff; border-color:#b8daff">
      <h4 style="font-size: 1.5rem; color:inherit">Primary Alert !</h4>
      This is a primary alert with <a href="#" style="color:#002752">an example link</a>. Give it a click if you like.
    </div>
    
    <!-- 5.x color -->
    <div style="position:relative; padding:1rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.375rem; padding-right:3rem; color:#084298; background-color:#cfe2ff; border-color:#b6d4fe">
      <h4 style="font-size: 1.5rem; color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Primary Alert !</h4>
      This is a primary alert with <a href="#" style="font-weight:700; color:#06357a">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-primary" role="alert">
        <h4 class="alert-heading">Primary Alert !</h4>
        This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

• info

  • 5.x

    <div style="--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius); padding-right:3rem; --bs-alert-color:#055160;--bs-alert-bg:#cff4fc;--bs-alert-border-color:#b6effb">
      <h4 style="color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Info Alert !</h4>
      This is a info alert with <a href="#" style="font-weight:700; color:#04414d">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-info alert-dismissible fade show">
        <h4 class="alert-heading">Info Alert !</h4>
        This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

  • 4.x

    <div style="position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb">
      <h4 style="font-size: 1.5rem; color:inherit">Info Alter !</h4>
      This is a info alert with <a href="#" style="color:#062c33">an example link</a>. Give it a click if you like.
    </div>
    
    <!-- 4.x style 5.x color -->
    <div style="position:relative; padding:1rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.375rem; padding-right:3rem; color:#055160; background-color:#cff4fc; border-color:#b6effb">
      <h4 style="font-size: 1.5rem; color:inherit; margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2">Info Alert !</h4>
      This is a info alert with <a href="#" style="font-weight:700; color:#04414d">an example link</a>. Give it a click if you like.
    </div>
    

    • original

      <div class="alert alert-info" role="alert">
        <h4 class="alert-heading">Info Alert !</h4>
        This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
      

callout

• callout

• default

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: 0.25rem; border-radius: 0.25rem; border-left-color: #6c757d;">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #6c757d;">Default Callout</h4>
    This is a default callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-default">
      <h4>Default Callout</h4>
      This is a default callout.
    </div>
    

• primary

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #007bff">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #007bff">Primary Callout</h4>
    This is a primary callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-primary">
      <h4>Primary Callout</h4>
      This is a primary callout.
    </div>
    

• warning

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #f0ad4e">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #f0ad4e">Warning Callout</h4>
    This is a warning callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-warning">
      <h4>Warning Callout</h4>
      This is a warning callout.
    </div>
    

• danger

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #d9534f">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #d9534f">Danger Callout</h4>
    This is a danger callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-danger">
      <h4>Danger Callout</h4>
      This is a danger callout.
    </div>
    

• succeed

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #28a745">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #28a745">Succeed Callout</h4>
    This is a succeed callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-success">
      <h4>Success Callout</h4>
      This is a success callout.
    </div>
    

• info

  <div style="display: block; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #5bc0de">
    <h4 style="margin-top: 0; margin-bottom: 0.25rem; color: #5bc0de">Info Callout</h4>
    This is info callout.
  </div>
  

  • original

    <div class="bd-callout bd-callout-info">
      <h4>Info Callout</h4>
      This is an info callout.
    </div>
    

kbd

kbd {
  margin: 0px 0.1em;
  padding: 0.1em 0.6em;
  border-radius: 3px;
  border: 1px solid #ccc;
  color: #333;
  line-height: 1.4;
  font-size: 12px;
  display: inline-block;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;
  background-color: rgb(247, 247, 247);
  text-shadow: 0 1px 0 #fff;
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

• bootstrap kbd

  kbd {
    font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:1em;
    padding:.2rem .4rem;
    font-size:87.5%;
    color:#fff;
    background-color:#212529;
    border-radius:.2rem
  }
  kbd kbd {
    padding:0;
    font-size:100%;
    font-weight:700;
  }
  

• or

  kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 25%);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 25%);
  }
  

• or for html

  <a href="#" style="margin:0px 0.1em;padding:0.1em 0.6em;border-radius:3px;border:1px solid #ccc;color:#333;line-height:1.4;font-size:12px;display:inline-block;box-shadow:0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;background-color:rgb(247, 247, 247);text-shadow:0 1px 0 #fff;">button</a>
  
  <!-- or -->
  <a href="#" style="margin:0px 0.1em;padding:0.1em 0.6em;border-radius:3px;border:1px solid #ccc;box-shadow:0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;text-shadow:0 1px 0 #fff;line-height:1.4;font-size:12.0px;background-color:rgb(247,247,247);display:inline-block;color:rgb(51,51,51);">click me</a>
  

border

[!NOTE|label:references:]

• padding
• border-*
  • border-style
• CSS Borders

padding

/*       + top, right, bottom, left   */
padding: 1px;

/*        + top, bottom               */
/*        |  + right, left            */
padding: 1px 2px;

/*        + top                       */
/*        |  + right, left            */
/*        |  |   + bottom             */
padding: 1px 2px 3px;

/*        + top                       */
/*        |  + right                  */
/*        |  |   + bottom             */
/*        |  |   |   + left           */
padding: 1px 2px 3px 4px;

border-style

/*            + top, right, bottom, left */
border-style: dotted;

/*            + top, bottom              */
/*            |      + right, left       */
border-style: dotted dashed;

/*            + top                      */
/*            |      + right, left       */
/*            |      |      + bottom     */
border-style: dotted dashed solid;

/*            + top                      */
/*            |      + right             */
/*            |      |      + bottom     */
/*            |      |      |     + left */
border-style: dotted dashed solid groove;

font

selector

[!TIP|references:references] references:

• CSS 属性选择器详解
• Attribute selectors
• CSS Selector Reference
• CSS selectors
  • Basic selectors
    • Class selector : .name
    • ID selectors : #name
    • Attribute selector : [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value]
  • Grouping selectors
  • Combinators
    • Child combinator: ul > li
    • General sibling combinator: p ~ span
    • Adjacent sibling combinator: h2 + p
    • Column combinator: col || td
    • Pseudo elements: p::first-line
  • Pseudo-classes and pseudo-elements
  • Structure of a selector
• [Pseudo-classes] (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
  • Tree-structural pseudo-classes
    • :root
    • :first-child
    • :last-child
  • User action pseudo-classes
    • :hover
    • :active
  • Functional pseudo-classes
    • :is()
    • :not()
    • :where()
    • :has()

attribute selectors

• [attr] : Represents elements with an attribute name of attr.
• [attr=value] : Represents elements with an attribute name of attr whose value is exactly value.
• [attr~=value] : Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
• [attr|=value] : Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
• [attr^=value] : Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
• [attr$=value] : Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

• [attr*=value] : Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

• example

  <ul>
    <li><a href="#internal">Internal link</a></li>
    <li><a href="http://example.com">Example link</a></li>
    <li><a href="#InSensitive">Insensitive internal link</a></li>
    <li><a href="http://example.org">Example org link</a></li>
    <li><a href="https://example.org">Example https org link</a></li>
  </ul>
  

  a { color: blue; }
  
  /* Internal links, beginning with "#" */
  a[href^="#"] { background-color: gold; }
  
  /* Links with "example" anywhere in the URL */
  a[href*="example"] { background-color: silver; }
  
  /* Links with "insensitive" anywhere in the URL, regardless of capitalization */
  a[href*="insensitive" i] { color: cyan; }
  
  /* Links with "cAsE" anywhere in the URL, with matching capitalization */
  a[href*="cAsE" s] { color: pink; }
  
  /* Links that end in ".org" */
  a[href$=".org"] { color: red; }
  
  /* Links that start with "https" and end in ".org" */
  a[href^="https"][href$=".org"] { color: green; }
  

• another example

  • sample code

    .dh-tl-tl {}
    .dh-tl-tr {}
    .dh-tl-br {}
    .dh-tl-bl {}
    .dh-tr-tl {}
    ...
    .dh-br-tl {}
    ...
    .dh-bl-tl {}
    ...
    

  • elegant way

    [class^="dh-"][class$="-tl"] { color: red;    }
    [class^="dh"][class$="-tr"]  { color: orange; }
    [class^="dh"][class$="-bl"]  { color: green;  }
    [class^="dh"][class$="-br"]  { color: blue;   }
    

debug tooltips in inspect

[!NOTE|label:references:]

• Freeze screen in chrome debugger / DevTools panel for popover inspection?

1. select the element in the inspector
2. select Event-Liseners tab in right panel
3. delete the mouseover event
4. re-hover the element in web page

references