CSS - Standaard CSS basis


Als je met regelmaat websites maakt kan het handig zijn om hier al een aantal standaard bestanden voor klaar te zetten waar je elke keer mee begint. Bijzonder handig kan bijvoorbeeld een standaard CSS bestand zijn waarin alvast een aantal standaard regels zijn opgenomen die telkens weer terugkeren zoals opsommingen, koppen en links.

Hieronder een voorbeeld die als basis gebruikt kan worden. Met deze code hoef je tevens alle standaard paddings, margins en borders op die bepaalde elementen hebben.

Basis CSS Templates

Een vergelijkbare basis is ook verwerkt in de standaard CSS templates hier te vinden op de website. Dit zijn kant en klare templates die opgebouwd zijn met behulp van HTML en CSS waarmee je de basis van een website hebt. Het overzicht: CSS Templates.

De gehele code hieronder, deze kun je dan aanpassen qua kleuren etc. naar wens. Je kunt de onderstaande code ook als bestand downloaden via de link hieronder.

/* reset */

body, div, table, tbody, thead, tfoot, td, th, span, ul, ul li, ol, ol li, em, header, hgroup, footer, aside, article, section, video, audio, strong, b, i, fieldset, form, label, legend, input, button, select, textarea, dt, dl, dd, blockquote, small, code, object, iframe, address, small, caption, img, hr, h1, h2, h3, h4, h5, h6, p {
margin:0px;
padding:0px;
vertical-align:top;
list-style-type:none;
border:0px solid #ffffff;
border-collapse:collapse;
border-spacing:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
text-align:left;
}

/* body */

body {
background-image:url(../images/background.png);
background-repeat:no-repeat;
background-position:top center;
background-color:#b40963;
}

/* links */

a:link {
color:#FF6600;
text-decoration:underline;
outline: none;
}

a:visited {
color:#FF6600;
text-decoration:underline;
outline: none;
}

a:hover {
color:#666666;
text-decoration:underline;
outline: none;
}

a:active {
color:#FF6600;
text-decoration:underline;
outline: none;
}

/* margins */

ul,
ol,
table,
object,
iframe,
hr {
margin:0px 0px 15px 0px;
}

/* forms */

input,
select {
vertical-align:middle;
}

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

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

input[type=submit],
button,
.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;
}

/* aligns */

.alignleft {
float:left;
margin:0px 5px 0px 0px;
}

.alignright {
float:right;
margin:0px 0px 0px 5px;
}

/* horizontal rule */

hr {
color:#cccccc;
border:none;
border-top:1px solid #cccccc;
height:1px;
}

/* container */

div#container {
margin:0px auto;
width:950px;
}

/* header */

header {
}

/* navigation */

nav {
}

/* footer */

footer {
}

/* text */

P {
margin-bottom:15px;
}

P.align-left {
text-align:left;
}

P.align-center {
text-align:right;
}

P.align-right {
text-align:right;
}

H1,
H2 {
margin-bottom:15px;
font-size:14px;
font-weight:bold;
font-style:normal;
}

H2 {
margin-bottom:0px;
}

H3,
H4,
H5,
H6 {
margin-bottom:15px;
font-size:12px;
font-weight:bold;
font-style:normal;
}

H4 {
margin-bottom:0px;
}