Estilos que debes conocer para crear tu pagina web

Cuando queremos crear una pagina web ya sea por que queremos aprender o porque es una tarea escolar debemos tener almenos unos conocimientos basicos sobre html y css, en este apartado yo les enseñare algunas de las cosas basicas que deben saber para poder crear su pagina web :

.MiClase{
        width: 200px ;/*Esto es el ancho que le daremos a nuestro elemento*/
        height: 150px; /*Esto es el alto que le daremos al elemento*/
        background-color: #0094ff; /*Esto es un color de fondo, en caso de querer utilizar una imagen: background-image: url()*/
        padding: 10px;/*Con esto le doy un margen desde el borde para que el texto no quede casi saliendo*/
        margin-left: auto;
        margin-right:auto;
        /*Con los ultimos dos estoy centrando nuestro elemento*/
        }

Al darle nuestro estilo creado a uno de nuestros elementos nos quedaria de esta manera :

<div class="MiClase"><p>un parrafo</p></div>

un parrafo

Ahora bien si quisieramos darle algo de efectos a nuestros elementos todo lo que debemos hacer es usar

.Tuclase:hover{}

esto hara que la etiqueta cambie su estilo al pasar el raton

Para los ejemplos utilizaremos los estilos de la siguiente clase

.clase1{
        width: 150px;
        height: 150px;
        background:#1481ea; /*Color azul*/
        transition: all ease-in-out 0.4s; /*Esto lo agrego para suavisar la transición*/
        }

Ejemplo 1: Cambiar el color de la forma

.clase1:hover{
        background-color: #09b126 /*De azul a un color verde*/
        }

Ejemplo 2: Cambiar el Tamaño de la forma

.clase1:hover{
        width: 180px;
        height: 180px;
        }

Ejemplo 3: Cambiar de ser un cuadro a un circulo de la forma

.clase1:hover{
        border-radius: 50%;
        }

Ejemplo 4: Cambiar de ser un cuadro a un circulo de la forma

.clase1:hover{
        border-radius: 50%;
        }

Ejemplo 5: Cambiar de ser un cuadro a un circulo de la forma con giros

.clase1:hover{
        border-radius: 50%;
        transform: rotate(360deg)
        }

Podria interesarte:

• Crear Slider CSS
• Crear Diseño Parallax
• Etiquetas en HTML
• Crear un Menu Horizontal