CSS ID Selectors

Using CSS ID selectors to style a paragraph and a wrapper div

by Alan Jones

HTML

<div id="wrapper">
  <h1>
    Show Me Your ID!
  </h1>
  <p id="mainPara">
    If I had any ID I wouldn't be showing it to the likes of you! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum nunc ante, in consectetur felis ultricies in. Curabitur ullamcorper gravida mollis.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum nunc ante, in consectetur felis ultricies in. Curabitur ullamcorper gravida mollis.
  </p>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Bevan|Nothing+You+Could+Do';
#wrapper {
  font-family: 'Nothing You Could Do', cursive;
  background-color:#ff3;
}

h1 {
  font-family: 'Bevan', cursive;
}
p {padding:20px 3%;}
#mainPara { font-size:1.4em; background-color: #568; color:#fff; border-radius:10px; margin: 0 2%;}