Recetas CSS¶

Tipos de selectors en CSS¶

/* Give the <body> element a background of #bdc3c7*/
body {
  background: #bdc3c7;
}

/* Make the <h1> element #9b59b6*/
h1 {
  color: #9b59b6;
}

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

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

/*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 #0000ff;
}

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


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

/* Give both <p>'s inside the 3rd <div> a pink background*/
div:nth-of-type(3) p {
  background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
div:nth-of-type(3) p:nth-of-type(2) {
  border: 5px solid white;
}


/* Make the <em> in the 3rd <div> element white and 
20px font(font-size:20px)*/
div:nth-of-type(3) em {
  color: white;
  font-size: 20px;
}


/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/

/*Make all "checked" checkboxes have a left margin of 
50px(margin-left: 50px)*/
input[type=checkbox]:checked {
  margin-left: 50px;
}


/* Make the <label> elements all UPPERCASE without changing the 
HTML(definitely look this one up*/
label {
  text-transform: uppercase; 
}

/*Make the first letter of the element with id 'special' green 
and 100px font size(font-size: 100)*/
#special:first-letter {
  color: green; 
  font-size: 100px
}


/*Make the <h1> element's color change to blue when hovered over */
h1:hover {
  color: blue;
}

/*Make the <a> element's that have been visited gray */
a:visited {
  color: gray;
}

Ejemplos¶

Luna creciente¶

<style>
.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;

  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0px 0px blue; 
}

</style>
<div class="center"></div>

Dibujo de un corazón¶

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg) ;
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

Última actualización: August 15, 2021