HTML

<h2>CSS Snippets </h2>
<h3>CSS - JQuery - XHTML</h3>

CSS

h2  {
position: relative;
top: 5px;
left: 5px;
font: italic 72pt times, serif;
color: #FC0;
}

h3 {
position: relative;
top: -60px;
font: bold 18pt times, sans-serif;
color: #000;
margin-left: 20px;
}

CSS

em {
  white-space: nowrap;
}

HTML

In de <header>

<link rel="stylesheet" type="text/css" href="normaal.css" title="normaal">
<link rel="alternate stylesheet" type="text/css" href="groter.css" title="groter">
<link rel="alternate stylesheet" type="text/css" href="giga.css" title="gigant">
<script type="text/javascript" src="styleswitcher.js"></script>

Style Switcher links

<a title="normaal" onclick="setActiveStyleSheet('normaal'); return false;" href="#">a</a>
<a title="groter" onclick="setActiveStyleSheet('groter'); return false;" href="#">A</a>
<a title="gigantisch" onclick="setActiveStyleSheet('gigant'); return false;" href="#">A+</a>

JavaScript

styleswitcher.js

<![CDATA[
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
]]>

CSS

Normaal

body {
font-size : 1.5em;
background-color : #CCCC33;
}

Groter

body {
font-size : 1.8em;
background-color : #99CC66;
}

Giga

body {
font-size : 2.3em;
background-color : #99CC66;
}

• uppercase: Alle letters worden groot geschreven = GROOT
• lowercase: Alle letters worden kleine geschreven = klein
• capitalize: Alle beginletters worden groot geschreven = Groot

HTML

<p class="uppercase">This is some text in uppercase.</p>
<p class="lowercase">This is some text in lowercase.</p>
<p class="capitalize">This is some text in capitalize.</p>

CSS

p.uppercase {
text-transform:uppercase;
}
p.lowercase {
text-transform:lowercase;
}
p.capitalize {
text-transform:capitalize;
}

Text indent

HTML

<h1>Ik word verborgen</h1>

CSS

h1 {
text-indent:-9999px; /*Verberg tekst, aanwezig voor SEO*/
margin:0 auto;
width:403px;
height: 82px;
background:transparent url("images/logo.gif") no-repeat 0 0;
}

download afbeelding (png 1×200 pixel 163 bytes) (44)

HTML

<h2>tekst onder png steken</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Ut congue suscipit urna. Ut adipiscing mi vitae sem. Nam vehicula. Aliquam leo enim, mollis nec, sagittis quis, cursus ut, lectus. Maecenas porttitor, nulla id convallis sodales, ligula diam ultrices sapien, ac condimentum ligula risus a purus. Curabitur id purus. Aliquam tortor tortor, fermentum sit amet, condimentum venenatis, dignissim eget, magna. Suspendisse fermentum tincidunt leo. Nulla facilisi. Phasellus a nibh quis neque blandit rhoncus. Suspendisse ultrices est ac massa. Etiam porttitor leo. Integer blandit. Aliquam diam mi, laoreet in, elementum id, fringilla sit amet, libero. Aenean commodo. Curabitur blandit mollis nisi. Nullam vitae nunc. Cras molestie. Maecenas elit.</p>
<p>Donec purus sapien, sagittis eu, fringilla at, lobortis vel, enim. Aliquam erat volutpat. Nulla feugiat. Aliquam erat volutpat. Aliquam nisl lacus, faucibus sed, eleifend consequat, pharetra ut, justo. Etiam et nibh eu tellus ultrices commodo. Nam molestie, metus a molestie ultricies, ligula sem egestas lectus, ac volutpat nisi eros vel risus. Etiam rutrum. Nunc suscipit mi in lectus. Integer in lectus. Donec ut magna ac erat varius ornare. Phasellus elementum turpis ac velit. Ut elementum pulvinar nisl. Sed pretium. Nulla risus. </p>
<p>Curabitur posuere dapibus velit. In adipiscing. Donec risus. Sed venenatis condimentum purus. Phasellus mi sem, accumsan et, ultrices et, commodo id, metus. Integer a diam. Etiam tincidunt, ante eu ultrices fermentum, magna felis mollis lorem, in lobortis nibh orci at lorem. Nunc adipiscing diam in tortor. Fusce aliquet nibh nec orci. Proin sodales. Quisque eros ligula, egestas eu, adipiscing eu, posuere a, sem. Suspendisse sollicitudin. Vivamus quis nibh a quam congue aliquet. Nulla nulla risus, interdum interdum, ultricies sed, sodales a, nisl. Ut nunc pede, tempus in, pellentesque sit amet, viverra at, odio. Donec eget urna id dui luctus pellentesque. Vestibulum tempus justo nec libero sodales feugiat. Vivamus rhoncus ligula at eros. </p>
<p>Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.</p>
<div class="fade"><!-- --></div>

CSS

body {
font-family:"Lucida Grande",Arial;
font-size:13px;
}
p {
line-height: 18px;
color: #333;
}
.fade{
background: url(fade.png) repeat-x 0 bottom;
display: block;
height: 200px;
position: relative;
z-index: 10;
margin-top: -200px;
}

HTML

<h1>Effect op tekst<span></span></h1>

CSS

h1 {
    position:relative;
    color:#000;
    font-family: Georgia;
    float: left;
}
h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:transparent url('images/image.png') repeat-x 0 0;
  }

HTML

<div class="liner">
<p>inhoud komt hier</p>
</div>

CSS

div.liner {
height:100px;
border: 1px solid #888;
}
div.liner *{
margin: 0;
}
div.liner p {
line-height:100px;
}

CSS

/* --------------------------------------------------------------
   Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, code, del,
dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
background: #fff;
margin: 1.5em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight:400;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: none;
}
input,textarea {
margin: 0;
}
/* Removes Firefox imposed outline */
a { outline: none; }
/* Clearing floats without extra markup  */
.wrapper {
display: inline-block;
}
.wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .wrapper { height: 1%; }
.wrapper { display: block; }
/* --------------------------------------------------------------
   Typography
-------------------------------------------------------------- */
/* This is where you set your desired font size. The line-heights
and vertical margins are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 75%; }
/* Default fonts and colors. */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea {
font-family: Helvetica, Arial, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em; }
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }
abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: italic; }
del { color: #000; }
a { color: #009; text-decoration: none; }
a:hover { text-decoration: underline; }
blockquote { margin: 1.5em; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; }

CSS

body {font-size:62.5%}

Standaarden na toepassen van deze regel

Zo nu is alles 10px, en met alles bedoel ik ook alles, zelfs h1 tot h6 etc…, dus vanaf nu is 1em = 10px

0.8em = 8px
1em = 10px
1.2em = 12px
2em = 20px