Selector

by StefanG

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Selectors Exercise</title>
    <link rel="stylesheet" type="text/css" href="selectors.css">
  </head>

  <body>
    <h1>Selectors Exercise</h1>

    <p>PARAGRAPH NOT INSIDE A DIV</p>

    <div>
      <section>
        <p> I am a paragraph in a section </p>
      </section>
      <p class="hello">I am a paragraph with a class</p>
      <p id="special">I am a paragraph with an ID</p>

      <h2>I am an awesome h2</h2>


      <p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi.</p>

    </div>

  </body>

</html>

CSS

body {
  background: #bdc3c7;
  font-family: monospace;
}

h1 {
  color: #9b59b6;
}

h2 {
  color: purple;
}

/* Make all <h2> elements orange */
h2 {
  color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/
li {
  color: blue;
}

/*Change the background on every paragraph to be yellow*/
p {
  background: yellow;
}

/*Make all inputs have a 3px red border*/
input {
  border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/
.hello {
  background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special {
  border: 2px solid blue;
}

/*Make all the <p>'s that are directly nested inside of divs 25px font(font-size: 25px)*/

div>p {
  font-size: 25px;
}

/*Make all the <p>'s that are not directly nested inside of divs color gray*/
div p {
  color: gray;
}

/*Make only inputs with type 'text' have a pink background*/
input[type='text'] {
  background: pink;
}