CSS experiments

nothing to see here. just messing around

by sym3tri

HTML

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
    </head>
    <body>
        
        <div>
            <h2>stuff</h2>
            <p>one</p>
            <p>two</p>
            <blockquote>
                <p>two point five (in blockquote) with more text than the others so lets see how this looks</p>
            </blockquote>
            <p>three</p>
            <p>four</p>
            <p>five</p>
            <p>six</p>
        </div>
        
    </body>
</html>

CSS

body {
    font-size: 14px;
    font-family: 'Actor', sans-serif;
}

div {
    -webkit-column-count: 2
}

h2 {
    font-weight: bolder;
    font-size: 2em;
    color: #fff;
    text-shadow: 0 0 3px #666;
}

blockquote {
    text-indent: 1em;
    padding-left: 2em;
    font-style: italic;
}

p {
    text-align: justify;
    text-indent: 1em;
}

p:nth-of-type(2n){
    background-color: #ccc;
}

p:first-child {

}