CSS - Standaard tags opmaken


Handig met CSS is dat je standaard HTML tags kan vormgeven. Deze opmaak wordt dan altijd toegepast op al deze aangegeven elementen. Zo kun je dan bijvoorbeeld aangeven dat alle afbeeldingen automatisch een rand moeten krijgen van 1px in de kleur oranje.

Dit doe je dan als volgt.

img {
        border:1px solid #FF0000;
}


Zoals dit met afbeeldingen (img) kan kun je dit op deze manier ook doen voor andere elementen zoals div's (div), tabelcellen (td), opsommingen (ul), links (a), inputs (input), buttons (button) en tekstvelden (textarea) en zo nog een groot aantal andere elementen.

In de CSS kun je dan aangeven dat bijvoorbeeld schuingedrukte tekst ook altijd vetgedrukt moet zijn of een bepaalde kleur moet hebben etc. Dit geef je dan aan in de CSS zoals hieronder waarin schuingedrukte tekst altijd de rode kleur heeft en vetgedrukt is.

i {
        color:#FF0000;
        font-weight:bold;
}


strong {
        color:#FF0000;
        font-weight:bold;
}


Hieronder nog een aantal andere voorbeelden zoals invoervelden en buttons.

input {
        width:200px;
        border:1px solid #808080;
        background-color:#FFF;
}

textarea {
        width:200px;
        border:1px solid #808080;
        background-color:#FFF;
}

input[type=submit],
button {
        width:200px;
        border:1px solid #808080;
        background:none;
        background-color:#004c9;
        cursor:hand;
        cursor:pointer;
}

input[type=checkbox],
input[type=radio] {
        float:left;
        width:12px;
        height:12px;
        margin-top:2px;
        margin-right:10px;
}

select {
        width:200px;
        height:20px;
        border:1px solid #808080;
}