CSS - Inleiding

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Zie ook div & float.

CSS of Cascaded Style Sheets is een opmaaktaal voor de vormgeving van webpagina's. Door CSS te gebruiken, kunnen vormgeving en inhoud onafhankelijk van elkaar bepaald worden.

Locatie van CSS-code

Er zijn drie manieren om css-code te incorporeren in een pagina, waarbij de eerste twee internal style sheets heten:

Binnen het <head>-element;
Middels het style-attribuut, direct toegepast op een html-element dat met het style-element overweg kan;
Middels een external style sheet, de gebruikelijke manier.

<head>-element

Voorbeeld:

<html>
 <head>
  <style type="text/css">
   body {
    color:#000000
   }
  </style>
 <head>
 <body>
  Hello world!
 </body>
</html>

Een nog iets completer voorbeeld, want inclusief een div-statement:

<html>
<head>

<style type="text/css">

	div#blub{
		color:#f00;
    	background-color: #0f0;
   }
   
</style>
  
</head>
<body>

	<div id="blub">
		Hello, world!

	</div>		
	
</body>
</html>

Deze vorm van interne style sheets zijn erg handig voor testen, en natuurlijk voor e-mailhandtekeningen in Thunderbird.

style-attribuut

Voorbeeld:

<td style="font-family: verdana; color: #ff0000;"> Cel 1,2 </td>

External style sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tabbed navigation</title>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
</head>

Hoe het werkt

Regels - Rules

CSS bestaat uit regels of rules. Bv.:

h1{font-family: arial;}

Met

h1 de selector
Het gedeelte binnen accolades de declaratie
font-family de eigenschap of property
arial de value of waarde
Een declaratie eindigt met een ";", ook als de regel maar één declaratie bevat.

Het voorbeeld hierboven specificeert lettertype Arial voor alle h1-headings. De eigenschap is font-family. Niet font.

Simple selector - Enkelvoudige selector

Regels die rechtstreeks worden toegepast op html-elementen, heten simple selectors. Het voorbeeld hierboven betreft een enkelvoudige selector.

Inheritance - Overerving

Inheritance of overerving wil zeggen, dat een regel die is toegepast op een bepaald element, automatisch ook wordt toegepast op elementen die daarbinnen vallen. Bv.: Als je iets defineert voor het body-element, geldt dat ook voor bv. li-elementen daarbinnen. Echter, indien er een meer specifieke regel voorbijkomt, krijgt die de voorkeur.

Universele selector

 *{ }

Is de universele selector, of universal selector. Het heeft betrekking op alle elementen in het betreffende html-document. Handig om standaardwaarden te defineren. Voorbeeld:

*{
	font-family: verdana;
	color: #101010;
	background-color: #f0f0f0;
}

De universele selector werkt net iets anders dan de het toepassen van regels op het <body>-element: Dit laatste geval werkt via overervering, en de universele selector niet.

Type selector

Een type selector is een regel waarin meerdere eigenschappen in één keer een waarde krijgt. Bv.:

page, heading, paragraph {color: #000000;}

Ik weet alleen niet of de betreffende elementen standaard html-elementen zijn, of klassen van elementen. Waarschijnlijk zijn het gewoon html-elementen.

Een selector kan daarnaast meerder declaraties bevatten. Dat geldt zowel voor simple selectors als type selectors. Bv.:

h1, h2, h3{
  color:#0000000;
  background-color:#FFFFFF;
}

Class selectors

Nu wordt het interessant: In HTML kun je klasses (classes) defineren, en die toepassen op HTML-elementen. Een klasse is niet veel anders dan een label:

In CSS verwijs je naar een klasse mbv. een punt + naam van de klasse, bv. .mijnklasse
In HTML-code verwijs je naar een klasse middels class="naam" binnen een declaratie, bv. <a class="mijnklasse">

<style>
   .intro 
   {
       background-color: yellow;
   }
</style>

<p> Dit is een paragraaf zonder klasse</p>
<p class="intro"> Dit is een paragraaf die geassocieerd is met klasse 'intro'</p>

Klasse toegepast op een specifiek element

Je kunt klasses toepassen op specifieke HTML-elementen. Bv.:

<style>
   div.intro
   {
       background-color: yellow;
   }
</style>

<p class="intro"> Dit is een paragraaf met klasse</p>
<div class="intro"> Dit is een div met klasse</p>

In dit geval krijgt alleen de tweede regel een gele achtergrond, omdat de betreffende klasse alleen is gedefineerd voor het div-element.

ID selectors vs. Class selectors

ID selectors zijn het broertje van klasseselectoren. Op het eerste gezicht lijken ze sprekend op elkaar, maar er is één cruciaal verschil: Een ID is uniek: Het kan slechts éénmalig op een pagina worden gebruikt. Gebruik ID's daarom alleen als je iets uniek wilt identificeren. Een voorbeeld zijn sublinks op een pagina, zoals http://yourdomain.com#comments - De ID comments moet uniek zijn!

Voorbeelden van het juiste gebruik van id's & classes:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

<li id="comment-27299" class="item">

ID selectors

Het gebruik van ID selectors is vrijwel hetzelfde als voor klasses:

CSS: Gebruik een "#" ipv. een "."
HTML: gebruik "id=" ipv. "class=".

p#abstract{
	background-color: #ff0000;
}

en de toepassing daarvan in html-code:

<p id="abstract"> Dankzij id-selector heeft deze zin een rode achtergrond </p>

Selector attributes

Hierboven hebben we gezien dat er diverse soorten selectors bestaan. De gewenste selector geef je aan middels het selector attribute. Dat kan op verschillende manieren, zoals we al zagen rondom ids en klassen. Voor mee mogelijkheden, zie Jon Duckett, p. 208-209.

Commentaarregels

Net als in HTML bestaat er basically één keyword voor commentaarregels, en helaas is ook dit een paired keyword, bestaande uit een opening tag en een closing tag. Voorbeelden:

/* Dit is één commentaarregel */

/* Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. 
   In at nisl ligula, 
   non sagittis orci. */

/* Lorem ipsum dolor sit amet, 
 * consectetur adipiscing elit. 
 * In at nisl ligula, 
 * non sagittis orci.
 */

#mijnlabel
{
 float:none /* Lorem ipsum */
}

Precedence

Veel van de hoofdstukken in dit artikel gaan over precedence, oftewel: In welke situatie krijgt welke regel voorrang? Ik maak regelmatig de fout dat ik denk dat datgene wat onderaan in het style.css-bestand, automatisch gekozen wordt.

Niet verkeerd: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Box-model

CSS is gebaseerd op een box-model: Zo'n beetje alle objecten zijn vierkanten. Als je dat weet, wordt het een stuk gemakkelijker om CSS toe te passen.

Zie Jon Duckett, p. 302-320.

Div

Zie artikel Div

Nested DIV's

http://www.ezineasp.net/post/HTML-Nested-Div-Positioning-Using-CSS-Position-Styles.aspx

Meer CSS

Block- en inline objecten: http://netmechanic.com/news/vol6/css_no16.htm
Float: De float-property bepaald of een object naar links of rechts moet 'drijven', of niet - http://www.w3schools.com/css/pr_class_float.asp & Jon Duckett: Web Programming, p. 416
Achtergronden: Jon Duckett, p. 323-330
Opsommingen: Jon Duckett, p. 330-334
Tabellen: Jon Duckett, p. 334-343
Generated Content: Jon Duckett, p. 343-347
Cursor property: Jon Duckett, p. 347-348
Display property: Jon Duckett, p. 348
Visibility of Boxes: Jon Ducket, p. 348-349
@import: p. 349
@charset: p. 350
!important: p. 351
Positioning: p. 351-367

Floats & Clear

HTML-bestand. Er is een div Wrapper nodig, om de hoofdgedeeltes bij elkaar te houden. Andres kun je Content niet naar rechts laten floaten zonder dat-ie te ver naar rechts gaat

Bijbehorende CSS-code

Resultaat

Fixed layout

Oftewel: Een fixed layout met een sheet

http://webdesign.about.com/od/css/ht/htcsscenterfix.htm

Tools

Referenties:

Frameworks:

Casus: Header zonder hyperlink-streep (1)

Dit was een raar probleem: Hoe krijg ik zoiets aan de praat als als:

a:hover text-decoration: none

Ik kon het niet in een div krijgen. Zoiets als dit werkt namelijk niet:

div#logo{
   font-size: 150%;    
   font-family: Palatino,"Palatino Linotype","URW Palladio L",Georgia,"Times New Roman",Times, serif;
   color: #808285;
   a:hover{text-decoration:non};
}

De oplossing: Een aparte klasse toevoegen:

a.logo{
   text-decoration: none;
}

En in het betreffende sjabloon zoiets als:

<a class="logo" href="<?php bloginfo('url'); ?>">
   <div id="logo">
      Titel van de site
   </div>
</a>

Dus een div binnen een klasse, waarbij de klasse de streep wegtovers.

Casus: Header zonder hyperlink-streep (2)

Hetzelfde probleem, maar nu iets ingewikkelder. Dit is de oorspronkelijke code in een WordPress-header-sjabloon:

<hgroup>
   <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" 
      title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</hgroup>

En ik kreeg het niet aan de praat met de volgende css-toevoeging:

h1.site-title{
	text-decoration: none;
}

Dat lukte pas na deze aanpassingen:

<hgroup>
   <h1 class="site-title"><a class="site-title" href="<?php echo home_url( '/' ); ?>" 
      title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</hgroup>

en

a.site-title{
	text-decoration: none;
}

Dus blijkbaar moet ik echt het 'a'-element associëren met de klasse, en in die klasse specifiek het 'a'-element benoemen. Of zoiets. Het werkt.

Zie ook

CSS - Multiple Selectors