Esses exemplos ajudarão a solidificar sua compreensão sobre como aplicar CSS no desenvolvimento de páginas web.

1: Seletores e Propriedades

HTML:

<div id="uniqueArticle" class="content">
    <p>Parágrafo com <span class="highlight">texto destacado</span>.</p>
</div>

CSS:

#uniqueArticle {
    border: 2px solid blue;
}

.content p {
    color: gray;
}

.highlight {
    color: red;
    font-weight: bold;
}

p {
    font-size: 16px;
}

Descrição: Este exemplo demonstra o uso de seletores de ID (#uniqueArticle), classe (.content e .highlight), e elemento (p) para aplicar estilos específicos, como cor de texto, tamanho de fonte e peso da fonte.

Exemplo 2: Box Model

HTML:

<div class="box">Conteúdo da caixa</div>

CSS:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    background-color: lightgray;
}

Descrição: Este exemplo ilustra o Box Model, aplicando margin, border, padding, e background-color a um elemento <div>, destacando como o espaço é calculado ao redor e dentro do elemento.

Exemplo 3: Flexbox

HTML:

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS:

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-container div {
    width: 60px;
    eight: 60px;
    background-color: teal;
    color: white;
    text-align: center;
    line-height: 60px;
}

Descrição: Este exemplo mostra como utilizar Flexbox para alinhar três caixas dentro de um container, distribuindo o espaço igualmente entre eles e alinhando-os verticalmente no centro.

Exemplo 4: Grid