Documentos de Académico
Documentos de Profesional
Documentos de Cultura
<style>
h2 {
color: red;
}
</style>
clases: estilos reutilizables que se agregan a los elementos HTML ya sea h1-h6, p,
head, body, a, etc.*
en tu elemento CSS style, los nombres de clase comienzan con un punto. En el
atributo "class" de tus
elementos HTML, el nombre de la clase no lleva punto delante.
<h2 class="blue-text">Hola</h2> EJ:
<style>
.blue-text(clase) {
color: blue;
}
</style>
font-family: establece una fuente que debe usar un elemento HTML ya sea...* tambien
se puede especificar fuentes
web no standar y personalizadas para usarlas en nuestro sitio web como por ejemplo
en Google Fonts:
"Nombre-de-la-fuente" es opcional, y es el modo de especificar una fuente de
reserva o "fallback font" en caso de que la
otra fuente especificada no esté disponible. Cuando una fuente no está disponible
en el sistema, puedes indicarle
al navegador que "degrade" a otra fuente alternativa (Nombre-de-la-fuente vendria a
ser la alternativa)
width: ancho de un elemento HTML ya sea...* Por ejemplo, si queremos crear una
clase CSS llamada larger-image que
le asigne a los elementos HTML un ancho de 500 píxeles, usamos el siguiente código:
<style>
.larger-image {
width: 500px;
}
</style>
.green-background {
background-color: green;
}
id: Además de las clases, cada elemento HTML también puede tener un atributo id.
Puedes usar un id para dar
estilo a un elemento específico. Los atributos id deben ser únicos, por lo tanto no
son reutilizables.
Los id's utilizan # para asignarle propiedades a comparacion de las clases que
utilizan . para signarles propiedades.
EJ:
#nombre-del-id {
background-color: green;
}
<h2 id="nombre-del-id" (en este caso, el h2 que tiene el id tendria un background
verde)
.ejemplo-padding-border-margin {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}
.ejemplo-padding {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.ejemplo-margin {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.ejemplo-padding-margin {
background-color: crimson;
color: #fff;
padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;
}
Selector de atributos [attr=value]: Este selector busca estilos que tengan un valor
de atributo específico.
Por ejemplo, el código a continuación cambia los márgenes de todos los elementos
que tengan el atributo type
con el valor radio:
[type='radio'] {
margin: 20px 0px 20px 0px;
}
.ejemplo-padding-em {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em;
}
Para aplicar múltiples atributos de clase a un elemento HTML debes dejar un espacio
entre ellos, como se muestra a
continuación:
class="class1 class2"
No importa el orden en que las clases estén enlistadas dentro del elemento HTML.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text" style="color: white">Hello World!</h1>
Color RGB
Blue (azul) rgb(0, 0, 255)
Red (rojo) rgb(255, 0, 0)
Orchid (color orquídea) rgb(218, 112, 214)
Sienna (siena) rgb(160, 82, 45)
body {
background-color: rgb(255, 165, 0);
}
Las Variables CSS son una manera poderosa de modificar varias propiedades de
estilos CSS a la vez,
cambiando su valor en un único sitio. Para crear una variable CSS, solo tienes que
darle un nombre
que comience con dos guiones (--) y asignarle un valor
<style>
.ejemplo {
--ejemplo-variable1: black;
--ejemplo-variable2: gray;
--ejemplo-variable3: yellow;
}
</style>
background: var(--ejemplo-variable);
Esto cambiará el fondo de cualquier elemento que utilice esta variable a "gray"
(gris) porque ese es el
valor de la variable --ejemplo-variable.
<style>
.penguin {
--ejemplo-variable: gray;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
</style>
Cuando utilices tu variable como valor de una propiedad CSS, puedes adjuntar un
valor de respaldo o "fallback",
que será utilizado por el navegador si la variable dada no es válida.
Para hacer uso de la herencia, las variables CSS suelen ser definidas en el
elemento :root.
<style>
:root {
--ejemplo-variable1: gray;
--ejemplo-variable2: pink;
--ejemplo-variable3: orange;
}
</style>
text-align: justify; hace que todas las líneas de texto, excepto la última línea,
se encuentren con los lados
izquierdo y derecho de la caja.
text-align: center; centra el texto
text-align: right; alinea el texto hacia la derecha
text-align: left; (opción por defecto) alinea el texto hacia la izquierda.
.ejemplo {
outline: 2px solid blue;
}
Pseudo-elementos: no forman parte del DOM pero se pueden ver cambios visuales. Los
pseudo-elementos se aplican
a los elementos.
Sintaxis
Sintaxis