CSS - Selector Basics - Child, Sibling, Descendant - VSMag

by barzik

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.5.3.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>Baseball Today</title>
  </head>
<body>
<header>
    <h1>Baseball Today</h1>
    <span id="tagline">Today's News</span>
    <nav>
        <ul>
            <li><a href="#/now">Now</a></li>
            <li><a href="#/scores">Scores</a></li>
            <li><a href="#/standings">Standings</a></li>
            <li><a href="#/statistics">Statistics</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
  <h1>Jeter Reaches 3000 hits!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lorem ut tellus blandit accumsan. Quisque sit amet tortor mauris. Donec quis elit ante. Vestibulum gravida neque in justo consectetur ac consequat orci sodales. Proin non massa ut elit vulputate tristique sed at nunc. </p>

        <p>In ultricies tincidunt sem, sollicitudin dignissim massa scelerisque a. Aenean ac massa nisl, sed bibendum urna. Proin dolor tortor, dapibus quis viverra at, luctus ut nulla. Donec nisl magna, dapibus aliquet blandit id, tempus elementum urna. <span class="callout">In hac habitasse platea dictumst.</span> Donec eget risus eget est sollicitudin gravida. In sit amet odio mi, id interdum ipsum. Sed molestie felis neque. Nunc cursus metus felis, id convallis ipsum. In quis ullamcorper ante. Pellentesque in quam vel risus lobortis sollicitudin. Proin vel dui diam, ut cursus nulla. Nam lacus dui, interdum rhoncus feugiat non, tristique sed nisl. </p>
    
        <p>Donec in mi velit. Mauris vitae justo et purus condimentum volutpat. Donec nulla purus, sagittis et sollicitudin id, feugiat non metus. Duis auctor congue nisi, vel pretium sem tincidunt nec. In eget elit a lacus vulputate malesuada ut a augue. Nunc nibh dolor,...

CSS

html {
    height: 100%;
    padding-left: 7%;
    padding-right: 7%;
}

body {
    background: #f5f5f5;
    font-size: 18px;
    margin: 7% auto;
}

body h1 {
    font-family: 'Segoe UI';
    padding: 1px;
    text-transform: uppercase;
}

body > header > h1 {
    font-size: 200%;
    margin: 2%;
    text-shadow: rgba(0,0,0,.4) 3px 3px 12px;
    text-align: center;
}

#tagline {
    text-shadow: rgba(0,0,0,.4) 3px 3px 12px;
    text-align: center;
    margin-top: -2%;
    display: block;    
}

body > header > nav {
    border-bottom: solid 1px rgba(0, 0, 0, .2);
    margin-bottom: 2%;
    padding: 2%;
}

nav > ul > li {
        text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
        text-transform: lowercase;
        font-size: 150%;
        display: inline;
        margin-right: 5%;
    }

    body > header > nav > ul > li:last-child {
        margin-right: 0; 
    }

        body > header > nav > ul > li > a {
            color: #ffa500;
            text-decoration: none;
        }

body > section > article > h1 {
    font-size: 125%;
    margin-bottom: 1px;
    text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
}

body > section > article > p {
    font-family: 'Segoe UI Light';
    font-size: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
    text-align:justify;
}

body > section > article > h1 + p {
    font-style: italic; 
    font-size: 110%;
}

.callout{
    font-weight: bold;
}


a {
    padding-bottom: 2px;
    text-decoration: none;
}

    a:hover {
        opacity: .8;
    }

    a:active, a:focus {
        position: relative;
        top: 1px;
    }