tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web
gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar
selector {
property: value;
}
p {
color: black;
}
style
attribuut:
...
<body style="background-color: #f7ba5a">
<p style="font-size: 18px; margin-left: 20px">
...
<style>
blok in de <head>
:
...
<head>
...
<style>
p {
font-size: 18px;
margin-left: 20px
}
body {
background-color: #f7ba5a;
}
</style>
</head>
...
...
<head>
...
<link rel="stylesheet" href="css/styles.css">
...
</head>
...
p {
font-size: 18px;
margin-left: 20px;
}
body {
background-color: #f7ba5a;
}
...
<head>
...
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/home.css">
...
</head>
...
@media all {
body {
background-color: white;
}
}
@media (min-width: 480px) {
body {
background-color: #ddd;
}
}
@media (min-width: 600px) {
body {
background-color: #bbb;
}
}
@media (min-width: 768px) {
body {
background-color: #999;
}
}
/**
* Main styles
*
* @author Rogier van der Linde
*/
p {
color: black; /* all paragraphs black */
}
p { line-height:1.3; color: #333 }
.box {
background-color: #666;
font-size: 12px;
padding: 10px 20px;
}
@media (min-width: 800px) {
.box {
padding: 0;
}
}
p {
color: #333;
line-height: 1.3;
}
.box {
background-color: #666;
font-size: 12px;
padding: 10px 20px;
}
@media (min-width: 800px) {
.box {
padding: 0;
}
}
p {
/* tag selector; selecteert <p> */
}
.message {
/* class selector; selecteert <... class="message"> */
}
.message.error {
/* multiple class selector; selecteert <... class="message error"> */
}
#lnk-login {
/* id selector; selecteert <... id="lnk-login"> */
}
* {
/* universele selector; selecteert alle elementen */
}
id
attribuut moet uniek zijn, dus een id selector kan maar één element selecteren
class
attribuut hoeft niet uniek te zijn, dus deze selector kan meerdere elementen selecteren
a:hover {
/* selecteert hovered link */
}
textarea:focus {
/* selecteert focused <textarea> */
}
input[type=email]:invalid {
/* selecteert invalid <input type="email"> */
}
input:disabled {
/* selecteert disabled <input> */
}
a::first-letter {
/* selecteert de eerste letter van <a> */
}
::selection {
/* selecteert het deel geselecteerd door de gebruiker */
}
li::before {
content: url(../img/bullet.png); /* injecteer een afbelding aan het begin */
/* meer properties van de nieuwe content */
}
li::after {
content: "some text"; /* injecteer tekst aan het einde */
/* meer properties van de nieuwe content */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
li {
list-style: none; /* verwijder standaardbullets */
}
li::before {
content: "👉";
font-size: 12px;
margin-right: 5px;
}
li::after {
content: "👈";
font-size: 12px;
margin-left: 5px;
}
h1 + p {
/* selecteert <p> direct volgend op een <h1> */
}
li + li {
/* selecteert alle <li>'s behalve de eerste */
}
li:first-child {
/* selecteert een <li> die de eerste child is van zijn parent */
}
#content > section {
/* selecteert <section> direct genest in <... id="content"> */
}
tr:nth-child(odd) {
/* selecteert oneven <tr>'s */
}
section:nth-child(3n+1) {
/* selecteert <section>'s nummer 1, 4, 7... */
}
select[multiple] { ... } /* "heeft", b.v. <select multiple> */
input[type=button] { ... } /* "is", b.v. <input type="button"> */
a[title*=flower] { ... } /* "bevat", b.v. <a title="...flower..."> */
img[src^=https://] { ... } /* "begint met", b.v. <img src="https://..."> */
a[href$=".pdf"] { ... } /* "eindigt met", b.v. <a href="....pdf"> */
p.message {
/* tag-class selector; selecteert <p class="message"> */
}
nav#mainmenu {
/* tag-id selector; selecteert <nav id="mainmenu"> */
}
#mainmenu.open {
/* id-class selector; selecteert <... id="mainmenu" class="open"> */
}
input {
color: blue;
}
#mainmenu a:hover {
color: blue;
}
p.formpar {
color: blue;
}
input, #mainmenu a:hover, p.formpar {
color: blue;
}
#leftcol p { /* paragrafen genest in het element met id="leftcol" */
...
}
nav li.active a { /* links genest in list items met class="active" genest in nav element */
...
}
selector {
property 1: waarde 1;
property 2: waarde 2;
property 3: waarde 3;
...
}
p {
color: red;
font-size: 10px;
margin-bottom: 6px;
}
body {
background-image: url(../img/bg.jpg);
background-position: right;
background-repeat: repeat-y;
}
.box {
margin-top: 6px;
margin-right: 15px;
margin-bottom: 6px;
margin-left: 15px;
}
body {
background: url(../img/bg.jpg) repeat-y right; /* image, repeat, position */
}
.box {
margin: 6px 150x 6px 150x; /* top, right, bottom, left */
}
p {
font-family: Arial, Verdana, "sans serif";
}
body {
background-image: url(img/bg.jpg);
}
<style>
attribuut hebben altijd de hoogste prioriteitdiv#idtest {
font-size: 12px;
}
div.ctest {
font-size: 14px;
}
<div id="idtest" class="ctest">...</div>
12px
body {
color: #00b;
font-family: courier;
border: 5px solid black;
}
...
<body>
<h2>This is line 1</h2>
<p>This is line 2</p>
</body>
</html>
<h2>
en <p>
erven color
en font
over van <body>
, maar niet border
.some-element {
/* kijk nog niet teveel naar de CSS; merk op hoe de properties gesorteerd zijn van a-z */
background-color: #A2C355;
border: 2px solid #A2C355;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: 18px;
padding: 9px 24px;
text-decoration: none;
text-transform: uppercase;
transition: background 0.15s, color 0.15s ease-in-out;
}
body header > nav.top ul li a {
...
}
div#wrapper {
...
}
header > nav a {
...
}
#wrapper {
...
}
start.css
: alle CSS gemeenschappelijk voor alle sites
common.css
alle CSS gemeenschappelijk voor alle pagina's van deze site
index.css, contact.css
... alle pagina-specifieke CSS
products.html
wordt dan:
...
<head>
...
<link rel="stylesheet" href="css/start.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/products.css">
...
</head>
...
start.css
(of reset.css
als je wil) bevat alle universeel herbruikbare CSS; een voorbeeld:
/**
* Generic styles for site <site-name>
*
* @author Rogier van der Linde <rogier.vanderlinde@odisee.be>
*
*/
/* nuttig voor alle sites */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
common.css
bevat alle CSS gemeenschappelijk voor alle pagina's:
/**
* Common styles for site <site-name>
*
* @author Rogier van der Linde <rogier.vanderlinde@odisee.be>
*
*/
/* ===========================================
General
=========================================== */
/* general layout */
.wrapper {
margin: 0 auto;
min-width: 320px;
max-width: 960px;
padding: 0 10px;
}
/* element styles */
body {
font-size: 13px; /* standard font size */
font-family: verdana, Arial, Helvetica, sans-serif;
/* ... */
}
a {
/* ... */
}
p {
/* ... */
}
h1, h2, h3, h4 {
/* ... */
}
/* class styles */
.more {
/* ... */
}
.bigger {
/* ... */
}
/* ===========================================
Header
=========================================== */
/* general */
/* ... */
/* logo */
/* ... */
/* main menu */
/* ... */
/* ===========================================
Content
=========================================== */
/* ...content styles... */
/* ===========================================
Doormat
=========================================== */
/* general */
/* ... */
/* left column */
/* ... */
/* middle column */
/* ... */
/* right column */
/* ... */
/* ===========================================
Footer
=========================================== */
/* ...footer styles... */
/* ===========================================
Media queries
=========================================== */
@media (min-width: 30em) { /* 30 * 16 = 480px */
/* your media queries here */
/* ... */
}
@media (min-width: 50em) { /* 50 * 16 = 800px */
/* your media queries here */
/* ... */
}
products.css
, gebruik je dezelfde structuur:
/**
* Page-specific styles for the products page
*
* @author Rogier van der Linde <rogier.vanderlinde@odisee.be>
*
*/
/* ===========================================
General
=========================================== */
/* general layout */
/* ... */
/* element styles */
/* ... */
/* class styles */
/* ... */
/* ===========================================
Content
=========================================== */
/* ...content styles... */
/* ===========================================
Media queries
=========================================== */
@media (min-width: 30em) { /* 30 * 16 = 480px */
/* your media queries here */
/* ... */
}
@media (min-width: 50em) { /* 50 * 16 = 800px */
/* your media queries here */
/* ... */
}
common.css
verder op te splitsen in meer CSS bestanden:
...
<head>
...
<link rel="stylesheet" href="css/start.css">
<!-- begin common styles -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/menus.css">
<link rel="stylesheet" href="css/footer.css">
<!-- end common styles -->
<link rel="stylesheet" href="css/index.css">
...
</head>
...
<head>
<head>
verlichten door common.css
te behouden, en van daaruit linken naar de deelbestanden layout.css
, header.css
enz... met @import
:
...
<head>
...
<link rel="stylesheet" href="css/start.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
...
</head>
...
@import "theme.css";
@import "layout.css";
@import "header.css";
@import "menus.css";
@import "footer.css";
...
<main>
...
<section>
<h3>Onze producten</h3>
<div id="products">
<div class="product">
<h4>Bijzettafel</h3>
<img src="img/prod1.jpg" class="visual" alt="...">
<p>price: €499,-</p>
<p class="description">...beschrijving hier...</p>
</div>
<div class="product">
...
</div>
...
</div>
</section>
</main>
main > section {
...
}
#products {
...
}
.product h4 {
...
}
.visual {
...
}
.description {
...
}
#products .visual + p {
...
}
main > section { /* als je een div in de HTML tussenvoegt, klopt deze regel niet meer */
...
}
#products { /* waar staat dit element? main content, sidebar...? */
...
}
.product h4 { /* als we een h5 gebruiken i.p.v. een h4, klopt deze regel niet meer */
...
}
.description { /* te algemeen; andere elementen zouden ook de class="description" kunnen hebben */
...
}
#products .visual + p { /* specifiek geneog, maar lange en zware selector */
...
}
block__element--modifier
conventie:
<main>
...
<section class="main__products">
<h3 class="products__title">Our products</h3>
<div class="products__wrapper">
<div class="products__product">
<h4 class="product__title">Magazine table</h3>
<img class="product__visual" src="img/prod1.jpg" alt="...">
<p class="product__price">price: €499,-</p>
<p class="product__description">...description here...</p>
</div>
<div class="products__product products__product--highlighted">
...
</div>
...
</div>
</section>
</main>
.main__products {
...
}
.products__wrapper {
...
}
.products__product {
...
}
.product__title {
...
}
.product__visual {
...
}
.product__description {
...
}
.product__price {
...
}
.products__product--highlighted {
...
}