CSS es el lenguaje que usamos para diseñar un documento HTML. CSS describe como se deben mostrar los elementos HTML.
¿Que significa CSS?
CSS se utiliza para definir estilos para sus páginas web, incluido el diseño, el diseño y las variaciones en la visualización para diferentes dispositivos y tamaños de pantalla.
Veamos un ejemplo:
h1 { p { body {
background-color: lightblue;
}
color: white;
text-align: center;
}
font-family: verdana;
font-size: 20px;
}
¡HTML NUNCA tuvo la intención de contener etiquetas para formatear una página web!
HTML se creó para describir el contenido de una página web, como:
Etiqueta = h1 - Esta etiqueta es para un encabezado
Etiqueta = p - Esta etiqueta es para un párrafo.
Cuando se agregaron etiquetas como font y atributos de color a la especificación HTML 3.2, se inició una pesadilla para los desarrolladores web. El desarrollo de grandes sitios web, donde se agregaban fuentes e información de color a cada página, se convirtió en un proceso largo y costoso.
Para resolver este problema, el World Wide Web Consortium (W3C) creó CSS.
CSS eliminó el formato de estilo de la página HTML.
¡CSS ahorra mucho trabajo!
Las definiciones de estilo normalmente se guardan en archivos .css externos.
Con un archivo de hoja de estilo externo, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Selector Declaración Declaración
h1 {color:blue; font-size:12px;}
Propiedad : Valor Propiedad : Valor
El selector apunta al elemento HTML al que desea aplicar estilo.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Varias declaraciones de CSS se separan con punto y coma ( ; ) y los bloques de declaración están rodeados por llaves.{ }
Por ejemplo:
p {
color: red;
text-align: center;
}
Explicación del ejemplo:
p Es un selector en CSS (apunta al elemento HTML que desea aplicar estilo: p ).color Es una propiedad y red es el valor de la propiedad.text-align Es una propiedad y centeres el valor de la propiedad.Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML que desea aplicar estilo. Podemos dividir los selectores de CSS en cinco categorías:
El selector de id de CSS
El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se utiliza para seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, escriba un carácter de almohadilla (#), seguido de la identificación del elemento.
La siguiente regla CSS se aplicará al elemento HTML con id = "tittle_1":
#tittle_1{
color: red;
text-align: center;
}
Nota: ¡ Un nombre de identificación no puede comenzar con un número !
El selector de clases de CSS
El selector de clases selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un punto ( . ), Seguido del nombre de la clase.
En este ejemplo, todos los elementos HTML con class = "center" serán rojos y alineados al centro:
.center{
color: red;
text-align: center;
}
Nota:¡ El nombre de una clase no puede comenzar con un número!
El selector universal de CSS
El selector universal ( * ) selecciona todos los elementos HTML de la página.
La siguiente regla CSS afectará a todos los elementos HTML de la página:
*{
color: blue;
text-align: center;
}
Hay tres formas de insertar una hoja de estilo:
CSS externo
Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
Cada página HTML debe incluir una referencia al archivo de hoja de estilo externo dentro del elemento link, dentro de la sección del encabezado.
Una hoja de estilo externa se puede escribir en cualquier editor de texto y se debe guardar con una extensión .css.
El archivo .css externo no debe contener etiquetas HTML.
Así es como se ve el archivo "mystyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Nota: No agregue un espacio entre el valor de la propiedad y la unidad (como margin-left: 20 px;). La forma correcta es: margin-left: 20px;
CSS interno
Se puede utilizar una hoja de estilo interna si una sola página HTML tiene un estilo único.
El estilo interno se define dentro del elemento style, dentro de la sección de head.
CSS interno
Los estilos en línea se definen dentro del atributo "style" del elemento relevante.
Orden en cascada
¿Qué estilo se utilizará cuando haya más de un estilo especificado para un elemento HTML?
Todos los estilos de una página se convertirán en una "cascada" en una nueva hoja de estilo "virtual" según las siguientes reglas, donde el número uno tiene la máxima prioridad:
Los comentarios se utilizan para explicar el código y pueden ayudar cuando edite el código fuente en una fecha posterior.
Los navegadores ignoran los comentarios.
Se coloca un comentario CSS dentro del style elemento y comienza /* y termina con */
/* This is a single-line comment */
p {
color: red;
}
Se pueden agregar comentarios donde quiera en el código y pueden abarcar varias líneas también:
/* This is
a multi-line
comment */
p {
color: red; /* Set text color to red */
}
Propiedades de borde CSS
Las propiedades border de CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.
Tengo bordes por todos lados
Tengo un borde inferior rojo
Tengo bordes redondeados
Tengo un borde izquierdo azul
Estilos de borde
La propiedad border-style especifica qué tipo de borde mostrar.
Se permiten los siguientes valores:
dotted- Define un borde punteado.dashed- Define un borde con lineas cortas continuas.solid- Define un borde sólido.double- Define un borde doble.groove- Define un borde acanalado en 3D. El efecto depende del valor del color del borde.ridge- Define un borde estriado en 3D. El efecto depende del valor del color del borde.inset- Define un borde insertado en 3D. El efecto depende del valor del color del borde.outset- Define un borde inicial 3D. El efecto depende del valor del color del borde.none- No define ningún borde.hidden- Define un borde oculto.Las propiedades margin de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.
Con CSS, tienes control total sobre los márgenes. Existen propiedades para establecer el margen para cada lado de un elemento (superior, derecha, inferior e izquierda).
CSS tiene propiedades para especificar el margen para cada lado de un elemento:
margin-topmargin-rightmargin-bottommargin-leftTodas las propiedades de los márgenes pueden tener los siguientes valores:
Las propiedades padding de CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
Con CSS, tienes control total sobre el padding. Existen propiedades para configurar el relleno para cada lado de un elemento (superior, derecha, inferior e izquierda).
La propiedad padding es una propiedad abreviada de las siguientes propiedades de padding individuales:
padding-toppadding-rightpadding-bottompadding-leftPues así es como funciona:
Si la propiedad padding tiene cuatro valores:
padding: 25px 50px 75px 100px;