Global CSS - 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

Apresentação

Estilo padrão que pode ajudar na criação de nossos websites. Possui estilos específicos para elementos que usamos como footer, classes de fontes, botões, entre outros.


Código completo:

<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 {
        font-family: 'Open Sans', sans-serif;
    }
    
    a {
        outline: none;
        transition: 0.3s ease;
        text-decoration:none;
    }
    
    ul {
        list-style: none;
        padding: 0px;
    }

    /* FONT ALIGN */
    
    .text-center {
        text-align: center;
    }
    
    .text-right {
        text-align: right;
    }
    
    .text-left {
        text-align: left;
    }
    
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
    
    /* FONT WEIGHTS */

    .f-light {
      font-weight: 200;
    }
      
    .f-light-300 {
      font-weight: 300;
    }
      
    .f-regular {
      font-weight: 400;
    }
    
    .f-bold {
        font-weight: 700;
    }  
      
    .f-black {
      font-weight: 900;
    }

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

    .f-20 {
        font-size: 20px;
    }

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

    .c-light {
        color: white;
    }
    
    .c-dark {
        color: #000
    }

    .c-grey {
        color: #ccc;
    }

    .c-primary {
        color: #0198db;
    }

    .c-secondary {
        color: #163d4f;
    }
    
      /* FORM GLOBAL CSS */
      
      label {
        display: block;
        font-size: 14px;
        color: #4A596B;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .form-control {
        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;
      }
      
      .form-control: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;
    }
    
    
    /* FOOTER */
    
    footer {
        background-color: #ECECEC;
    }
    
    footer .box-institutional {
        background-color: #163d4f;
    }
    
    footer h2 {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: 0px;
    }
    
    footer a {
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s ease;
        color: #fff;
        display: block;
        line-height: 30px;
    }
    
    footer a:hover {
        color: #0198db;
    }
    
    footer a i {
        margin-right: 10px;
    }
    
    footer p {
        color: #fff;
    }
    
    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    footer ul li {
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    
    footer ul li + li {
        margin-top: 10px;
    }
    
    footer ul li img {
        margin-right: 10px;
    }
    
    /* Copyright */
      
      .copyright {
        background-color: #0198db;
        color: #fff;
      }
      
      .copyright a {
        display: inline-block;
        font-size: 14px;
        color: #fff;
        font-weight: bold;
      }
      
      .copyright p {
        display: inline-block;
        color: white;
        margin: 0;
      }
      
      .copyright .box-validations {
        display: inline-block;
        float: right;
      }
      
      .copyright img {
        max-width: 40px;
        height: auto;
      }
    
    /* BREADCRUMBS */
    
    .breadcrumbs {
        background-color: #f9f9f9;
        display: flex;
    }
    
    .breadcrumbs ol {
        list-style: none;
        padding: 0px;
        display: flex;
    }
    
    .breadcrumbs h2 {
        margin-bottom: 0px;
    }
    
    .breadcrumbs li a {
        font-size: 14px;
        color: #163d4f;
    }
    
    .breadcrumbs li a:hover {
        color: #107cac;
    }
    
    .breadcrumbs a strong {
        margin-left: 5px;
    }
    
    /* GLOBAL MEDIA QUERY FOR MOBILE */
    
    @media (max-width: 992px) {
        .copyright .box-validations {
          float: none;
          display: block;
        }
        
        footer {
            text-align: left;
        }
        
        footer ul li {
            justify-content: flex-start;
        }
        
        .footer-column-3 {
            border-bottom: solid 1px #104b66;
            margin: 10px 0px;
            padding-bottom: 10px;
        }
        
        .footer-column-2 {
            border-bottom: solid 1px #104b66;
            padding-bottom: 10px;
        }
        
        footer ul li + li {
            margin-top: 2px;
        }
        
        .footer-logo {
            margin-bottom: 20px;
        }
        
        .footer-logo img {
            max-width: 250px;
        }
    }

</style>

Você também pode gostar de ler

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

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

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

001. Footer Clássico - Comp. Interago

Em 10/06/2022 às 09h38 - Atualizado em 16/08/2022 às 09h09