Global CSS - ATUALIZADO - Estilo para dar os primeiros passos ao criar um site

Atributos e valores de estilo padrão com reset e alguns elementos específicos usados em nossos sites

 <style>
 
    /* GLOBAL CSS */
    
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        margin: 0px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    input.formInput::placeholder,
    input.formTextArea::placeholder,
    input.formLink::placeholder,
    a.formLink,
    textarea,
    label {
        font-family: 'Open Sans', sans-serif;
    }

    a {
        outline: none;
        transition: 0.3s ease;
        text-decoration:none;
    }
    
    ul {
        list-style: none;
        padding: 0px;
    }

    /* FONT ALIGN */
    
    .textCenter {
        text-align: center;
    }
    
    .textRight {
        text-align: right;
    }
    
    .textLeft {
        text-align: left;
    }
    
    .imgFluid {
        max-width: 100%;
        height: auto;
    }
    
    /* FONT WEIGHTS */

    .fLight {
      font-weight: 200;
    }
      
    .fLight300 {
      font-weight: 300;
    }
      
    .fRegular {
      font-weight: 400;
    }
    
    .fBold {
        font-weight: 700;
    }  
      
    .fBlack {
      font-weight: 900;
    }

    /* FONT SIZES */
    
    .f45 {
        font-size: 45px;
    }
    
    .f30 {
        font-size: 30px;
    }

    .f20 {
        font-size: 20px;
    }

    .f16 {
        font-size: 16px;
    }
    
    /* DEFAULT COLORS */

    .cLight {
        color: white;
    }
    
    .cCark {
        color: #000
    }

    .cGrey {
        color: #ccc;
    }

    .cPrimary {
        color: #0198db;
    }

    .cSecondary {
        color: #163d4f;
    }
    
      /* FORM GLOBAL CSS */
      
      label {
        display: block;
        font-size: 14px;
        color: #4A596B;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .formControl {
        width: 98%;
        background-color: #f9f9f9;
        border: none;
        border-radius: 5px;
        padding: 10px 5px;
        margin-bottom: 10px;
        outline: none;
        box-shadow: 5px 5px 20px #f6f6f6 inset;
      }
      
      .formControl:focus {
          box-shadow: 0 0 3px 2px #c9daf9bf;
      }
      
      textarea {
          height: 80px;
      }
    
    /* BUTTONS */
    
    .btn-default {
        width: auto;
        background-color: #0198db;
        border-radius: 5px;
        font-weight: 500;
        padding: 10px 15px;
        display: inline-block;
        align-items: center;
        border: none;
        font-size: 14px;
        transition: 0.2s ease;
        color: #fff;
        cursor: pointer;
    }
    
    .btn-default:hover {
        background-color: #00638E;
    }
    
    /* BREADCRUMBS */
    
  .sectionBreadcrumbs {
    background-color: #f9f9f9;
    padding-block: 15px;
  }
  .sectionBreadcrumbs .container {
    display: flex;
    justify-content: space-between;
  }
  .sectionBreadcrumbs .container h1.pageIdentify {
    font-size: 20px;
  }
  .sectionBreadcrumbs .container ol#breadcrumb {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0px;
  }
  .sectionBreadcrumbs .container ol#breadcrumb li {
    display: flex;
    gap: 10px;
  }
  .sectionBreadcrumbs .container ol#breadcrumb li a {
    color: #000;
  }
  .sectionBreadcrumbs .container ol#breadcrumb li a:hover {
    color: #0098db;
  }
  .sectioNBreadcrumbs .container #pageName {
    text-transform: capitalize;
  }
  @media (max-width: 772px) {
    .sectionBreadcrumbs .container {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
    }
  }

</style>

Você também pode gostar de ler

Exemplo de artigo com multi títulos, mas usando só o principal

Em 01/04/2025 às 14h41 - Atualizado em 22/04/2025 às 15h41

Guia da Extensão #13 - Avaliação e Comentários

Em 01/04/2025 às 14h35 - Atualizado em 01/04/2025 às 14h41

Teste de matéria ao vivo

Em 05/11/2024 às 16h12 - Atualizado em 07/02/2025 às 11h01

Extensão #14 WebStories ou histórias web

Em 23/07/2024 às 09h28 - Atualizado em 11/11/2024 às 10h34

Guia da Extensão #13 - Avaliação e Comentários

Em 26/05/2024 às 21h39 - Atualizado em 23/09/2024 às 09h36

Call to Action - Website Inicial - App ou Botão

Em 22/07/2022 às 10h21 - Atualizado em 07/10/2022 às 11h02

Modelo Página de Contato - Websites Iniciaiss

Em 22/07/2022 às 09h09 - Atualizado em 07/10/2022 às 10h29

.htaccess com principais funcionalidades

Em 23/06/2022 às 20h16 - Atualizado em 16/08/2022 às 09h09

003. Header Clássico + Topbar + Search - Comp. Interago

Em 09/06/2022 às 17h55 - Atualizado em 16/08/2022 às 09h09