Introducción a CSS

CSS es el lenguaje que usamos para diseñar una página web.

¿Qué es CSS?
 CSS significa hojas de estilo en cascada
 CSS describe cómo se deben mostrar los elementos HTML en la pantalla, el papel o en otros medios
 CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez
 Las hojas de estilo externas se almacenan en archivos CSS

¿Por qué usar CSS?

CSS se usa 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.

Ejemplo de CSS
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

CSS resolvió un gran problema

HTML NUNCA tuvo la intención de contener etiquetas para formatear una página web.

HTML fue creado para describir el contenido de una página web, como:

<h1>Este es un encabezado</h1>

<p>Esto es un párrafo.</p>

Cuando se agregaron etiquetas como <font> y atributos de color a la especificación HTML 3.2, comenzó una pesadilla para los desarrolladores web. El desarrollo
de grandes sitios web, donde se añadía información de fuentes y colores 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!

Sintaxis CSS
Una regla CSS consta de un selector y un bloque de declaración.

Sintaxis CSS
El selector apunta al elemento HTML que desea diseñar.

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 CSS se separan con punto y coma, y los bloques de declaración están rodeados por llaves.

Ejemplo
En este ejemplo, todos los elementos <p> estarán alineados al centro, con un color de texto rojo:

p {
color: red;
text-align: center;
}

Ejemplo explicado

 P es un selector en CSS (apunta al elemento HTML que desea diseñar: <p>).

 colores una propiedad, y redes el valor de la propiedad
 text-alignes una propiedad, y centeres el valor de la propiedad

Selectores de CSS
Un selector de CSS selecciona los elementos HTML que desea diseñar.

Selectores de CSS
Los selectores de CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea diseñar.

Podemos dividir los selectores de CSS en cinco categorías:

  Selectores simples (seleccionar elementos basados en nombre, id, clase)
 Selectores combinadores (seleccionar elementos en función de una relación específica entre ellos)
 Selectores de pseudoclase (seleccionar elementos en función de un determinado estado)
 Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
 Selectores de atributos (seleccionar elementos en función de un atributo o valor de atributo)

El selector de elementos CSS

El selector de elementos selecciona elementos HTML en función del nombre del elemento.

Ejemplo
Aquí, todos los elementos <p> en la página estarán alineados al centro, con un color de texto rojo:

p {
text-align: center;
color: red;
}

El selector de ID de CSS
El selector de id usa 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 usa para seleccionar un elemento único.

Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.

Ejemplo
La siguiente regla CSS se aplicará al elemento HTML con id="para1":

#para1 {
text-align: center;
color: red;
}
Nota: ¡ Un nombre de identificación no puede comenzar con un número!

El selector de clases CSS

El selector de clase selecciona elementos HTML con un atributo de clase específico.

Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), seguido del nombre de la clase.

Ejemplo
En este ejemplo, todos los elementos HTML con class="center" estarán en rojo y alineados al centro:

.center {
text-align: center;
color: red;
}

También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.

Ejemplo
En este ejemplo, solo los elementos <p> con class="center" estarán en rojo y alineados al centro:

p.center {
text-align: center;
color: red;
}

Los elementos HTML también pueden referirse a más de una clase.

Ejemplo
En este ejemplo, el elemento <p> se diseñará de acuerdo con class="center" y class="large":

<p class="center large">This paragraph refers to two classes.</p>

Nota: ¡ Un nombre de 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.

Ejemplo
La siguiente regla CSS afectará a todos los elementos HTML de la página:

* {
text-align: center;
color: blue;
}

El selector de agrupación CSS

El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.

Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
Será mejor agrupar los selectores, para minimizar el código.

Para agrupar selectores, separe cada selector con una coma.

Ejemplo
En este ejemplo, hemos agrupado los selectores del código anterior:

h1, h2, p {
text-align: center;
color: red;
}

Todos los selectores simples de CSS

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

 * * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

Cómo agregar CSS

Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo.

Tres formas de insertar CSS

Hay tres formas de insertar una hoja de estilo:

 CSS externo
 CSS interno
 CSS en línea

CSS externo
¡Con una hoja de estilo externa, puede cambiar la apariencia 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 de encabezado.
Ejemplo
Los estilos externos se definen dentro del elemento <link>, dentro de la sección <head> de una página HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Una hoja de estilo externa se puede escribir en cualquier editor de texto y debe guardarse con una extensión .css.

El archivo .css externo no debe contener ninguna etiqueta HTML.

Así es como se ve el archivo "mystyle.css":

"miestilo.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:

Incorrecto (espacio): margin-left: 20 px;
Correcto (sin espacio):margin-left: 20px;
CSS interno
Se puede usar 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 cabecera.

Ejemplo
Los estilos internos se definen dentro del elemento <style>, dentro de la sección <head> de una página HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS en línea
Se puede usar un estilo en línea para aplicar un estilo único a un solo elemento.
Para usar estilos en línea, agregue el atributo de estilo al elemento relevante. El atributo de estilo puede contener cualquier propiedad CSS.

Ejemplo
Los estilos en línea se definen dentro del atributo "estilo" del elemento relevante:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Sugerencia: un estilo en línea pierde muchas de las ventajas de una hoja de estilo (al mezclar contenido con presentación). Utilice este método con
moderación.

Múltiples hojas de estilo

Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilo leída.

Suponga que una hoja de estilo externa tiene el siguiente estilo para el elemento <h1>:

h1 {
color: navy;
}
Luego, suponga que una hoja de estilo interna también tiene el siguiente estilo para el elemento <h1>:

h1 {
color: orange;
}

Ejemplo
Si el estilo interno se define después del enlace a la hoja de estilo externa, los elementos <h1> serán "naranjas":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Ejemplo
Sin embargo, si el estilo interno se define antes del enlace a la hoja de estilo externa, los elementos <h1> serán "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Orden en cascada
¿Qué estilo se utilizará cuando haya más de un estilo especificado para un elemento HTML?

Todos los estilos en una página "caerán en cascada" en una nueva hoja de estilo "virtual" según las siguientes reglas, donde el número uno tiene la prioridad
más alta:

1. Estilo en línea (dentro de un elemento HTML)

2. Hojas de estilo externas e internas (en la sección de cabecera)
3. predeterminado del navegador

Por lo tanto, un estilo en línea tiene la prioridad más alta y anulará los estilos externos e internos y los valores predeterminados del navegador.
Comentarios CSS
Los comentarios CSS no se muestran en el navegador, pero pueden ayudar a documentar su código fuente.

Comentarios CSS
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.

Un comentario CSS se coloca dentro del <style>elemento y comienza /*y termina con */:

Ejemplo
/* This is a single-line comment */
p {
color: red;
}

Puedes agregar comentarios donde quieras en el código:

Ejemplo
p {
color: red; /* Set text color to red */
}

Los comentarios también pueden abarcar varias líneas:

Ejemplo
/* This is
a multi-line
comment */

p {
color: red;
}

Comentarios HTML y CSS

En el tutorial de HTML, aprendió que puede agregar comentarios a su fuente HTML usando la <!--...-->sintaxis.

En el siguiente ejemplo, usamos una combinación de comentarios HTML y CSS:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>
Colores CSS
Los colores se especifican utilizando nombres de color predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.

Nombres de colores CSS

En CSS, se puede especificar un color usando un nombre de color predefinido:

Tomate

Naranja

DodgerBlue

MedioMarVerde

Gris
 PizarraAzul

Violeta

Gris claro

CSS/HTML admite 140 nombres de colores estándar .

Color de fondo CSS

Puede establecer el color de fondo para los elementos HTML:

Hola Mundo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Color de texto CSS
Puede establecer el color del texto:

Hola Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Color del borde CSS

Puede establecer el color de los bordes:

Hola Mundo
Hola Mundo
Hola Mundo
Ejemplo
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Valores de color CSS

En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:

Igual que el nombre del color "Tomate":

RGB (255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Igual que el nombre del color "Tomate", pero 50% transparente:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Ejemplo
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Colores CSS RGB

Un valor de color RGB representa las fuentes de luz ROJA, VERDE y AZUL.

Valor RGB
En CSS, un color se puede especificar como un valor RGB, utilizando esta fórmula:

rgb ( rojo, verde , azul )

Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.

Por ejemplo, rgb(255, 0, 0) se muestra como rojo, porque el rojo se establece en su valor más alto (255) y los demás se establecen en 0.

Para mostrar negro, configure todos los parámetros de color en 0, así: rgb (0, 0, 0).

Para mostrar el blanco, configure todos los parámetros de color en 255, así: rgb (255, 255, 255).

Experimente mezclando los valores RGB a continuación:

RGB (255, 99, 71)

ROJO

255

VERDE
 99

AZUL

71

Ejemplo

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes de luz:

Ejemplo

rgb(60, 60, 60)

rgb(90, 90, 90)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(210, 210, 210)

rgb(240, 240, 240)

Fondos CSS
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.

En estos capítulos, aprenderá acerca de las siguientes propiedades de fondo de CSS:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background(propiedad abreviada)

color de fondo CSS

La background-colorpropiedad especifica el color de fondo de un elemento.

Ejemplo
El color de fondo de una página se establece así:

body {
background-color: lightblue;
}

Con CSS, un color suele especificarse mediante:

 un nombre de color válido, como "rojo"

 un valor HEX - como "#ff0000"
  un valor RGB - como "rgb(255,0,0)"

Mire Valores de color CSS para obtener una lista completa de posibles valores de color.

Otros elementos
Puede establecer el color de fondo para cualquier elemento HTML:

Ejemplo
Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

Opacidad / Transparencia
La opacitypropiedad especifica la opacidad/transparencia de un elemento. Puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:

opacidad 1

opacidad 0.6
 opacidad 0.3

opacidad 0.1

Ejemplo
div {
background-color: green;
opacity: 0.3;
}

Nota: Al usar la opacitypropiedad para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto
puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer.

Transparencia usando RGBA

Si no desea aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, use valores de color RGBA . El siguiente ejemplo establece la
opacidad para el color de fondo y no para el texto:

100% de opacidad

60% de opacidad

30% de opacidad

10% de opacidad

Aprendió de nuestro Capítulo de colores CSS , que puede usar RGB como un valor de color. Además de RGB, puede usar un valor de color RGB con
un canal alfa (RGB A ), que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa ). El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente
opaco).

Sugerencia: aprenderá más sobre los colores RGBA en nuestro Capítulo de colores CSS .
Ejemplo
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Inténtalo tú mismo "

La propiedad de color de fondo CSS

Property Description

background-color Sets the background color of an element

Imagen de fondo CSS

Imagen de fondo CSS
La background-imagepropiedad especifica una imagen para usar como fondo de un elemento.

De forma predeterminada, la imagen se repite para que cubra todo el elemento.

Ejemplo
Establecer la imagen de fondo para una página:
body {
background-image: url("paper.gif");
}

Ejemplo
Este ejemplo muestra una mala combinación de texto e imagen de fondo. El texto es difícilmente legible:

body {
background-image: url("bgdesert.jpg");
}

Nota: cuando utilice una imagen de fondo, utilice una imagen que no interfiera con el texto.

La imagen de fondo también se puede configurar para elementos específicos, como el elemento <p>:

Ejemplo
p {
background-image: url("paper.gif");
}

La propiedad de imagen de fondo CSS

Property Description

background-image Sets the background image for an element

Repetición de imagen de fondo CSS
Repetición de fondo CSS
Por defecto, la background-imagepropiedad repite una imagen tanto horizontal como verticalmente.

Algunas imágenes deben repetirse solo horizontal o verticalmente, o se verán extrañas, como esta:

Ejemplo
body {
background-image: url("gradient_bg.png");
}

Si la imagen de arriba se repite solo horizontalmente ( background-repeat: repeat-x;), el fondo se verá mejor:

Ejemplo
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Sugerencia: para repetir una imagen verticalmente, configurebackground-repeat: repeat-y;

Repetición de fondo CSS: sin repetición

La propiedad también especifica mostrar la imagen de fondo solo una vez background-repeat:

Ejemplo
Mostrar la imagen de fondo solo una vez:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

En el ejemplo anterior, la imagen de fondo se coloca en el mismo lugar que el texto. Queremos cambiar la posición de la imagen, para que no perturbe
demasiado el texto.

Posición de fondo CSS

La background-positionpropiedad se utiliza para especificar la posición de la imagen de fondo.

Ejemplo
Coloque la imagen de fondo en la esquina superior derecha:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Las propiedades de posición y repetición de fondo CSS

Property Description

background-position Sets the starting position of a background image

 background-repeat Sets how a background image will be repeated

Archivo adjunto de fondo CSS

Adjunto de fondo CSS
La background-attachmentpropiedad especifica si la imagen de fondo debe desplazarse o ser fija (no se desplazará con el resto de la página):

Ejemplo
Especifique que la imagen de fondo debe ser fija:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Ejemplo
Especifique que la imagen de fondo debe desplazarse con el resto de la página:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

La propiedad de archivo adjunto de fondo CSS

 Property Description

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

Taquigrafía de fondo CSS

Fondo CSS - Propiedad abreviada
Para acortar el código, también es posible especificar todas las propiedades de fondo en una sola propiedad. Esto se llama una propiedad abreviada.

En lugar de escribir:

body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Puedes usar la propiedad abreviada background:

Ejemplo
Use la propiedad abreviada para establecer las propiedades de fondo en una declaración:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

No importa si falta uno de los valores de propiedad, siempre que los demás estén en este orden. Tenga en cuenta que no usamos la propiedad background-
attachment en los ejemplos anteriores, ya que no tiene un valor.

Todas las propiedades de fondo CSS

Property Description

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

background-clip Specifies the painting area of the background

background-color Sets the background color of an element

background-image Sets the background image for an element

 background-origin Specifies where the background image(s) is/are positioned

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-size Specifies the size of the background image(s)

Bordes CSS
Las propiedades de borde de CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.

Tengo fronteras en todos los lados.

Tengo un borde inferior rojo.

Tengo bordes redondeados.

Tengo un borde izquierdo azul.

Estilo de borde CSS
La border-stylepropiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

 dotted- Define un borde punteado

 dashed- Define un borde discontinuo
 solid- Define un borde sólido
 double- Define un borde doble
 groove- Define un borde ranurado 3D. El efecto depende del valor del color del borde.
 ridge- Define un borde estriado 3D. El efecto depende del valor del color del borde.
 inset- Define un borde de inserción 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

La border-stylepropiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Ejemplo
Demostración de los diferentes estilos de borde:

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Resultado:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Nota: ¡ Ninguna de las OTRAS propiedades de borde CSS (sobre las que aprenderá más en los próximos capítulos) tendrá NINGÚN efecto a menos que border-
stylese establezca la propiedad!
Color del borde CSS
Color del borde CSS
La border-colorpropiedad se utiliza para establecer el color de los cuatro bordes.

El color se puede configurar mediante:

 nombre - especifique un nombre de color, como "rojo"

 HEX: especifique un valor HEX, como "#ff0000"
 RGB: especifica un valor RGB, como "rgb(255,0,0)"
 HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"
 transparente

Nota: si border-colorno se establece, hereda el color del elemento.

Ejemplo
Demostración de los diferentes colores de borde:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
Resultado:

Red border

Green border

Blue border

Colores laterales específicos

La border-colorpropiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Ejemplo
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Valores hexadecimales
El color del borde también se puede especificar mediante un valor hexadecimal (HEX):

Ejemplo
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}

Valores RGB
O usando valores RGB:

Ejemplo
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}

Valores HSL
También puede usar valores HSL:

Ejemplo
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

Lados del borde CSS

❮ AnteriorPróximo ❯

Borde CSS - Lados individuales

De los ejemplos de las páginas anteriores, ha visto que es posible especificar un borde diferente para cada lado.

En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho, inferior e izquierdo):

Ejemplo
p {
border-top-style: dotted;
border-right-style: solid;
 border-bottom-style: dotted;
border-left-style: solid;
}

Resultado:

Different Border Styles

Inténtalo tú mismo "

El ejemplo anterior da el mismo resultado que este:

Ejemplo
p {
border-style: dotted solid;
}

Inténtalo tú mismo "

Pues así es como funciona:

Si la border-stylepropiedad tiene cuatro valores:

 estilo de borde: punteado sólido doble punteado;

o el borde superior está punteado
o el borde derecho es sólido
o borde inferior es doble
o el borde izquierdo está discontinuo

Si la border-stylepropiedad tiene tres valores:

 estilo de borde: doble sólido punteado;

o el borde superior está punteado
o los bordes derecho e izquierdo son sólidos
o borde inferior es doble

Si la border-stylepropiedad tiene dos valores:

  estilo de borde: sólido punteado;
o los bordes superior e inferior están punteados
o los bordes derecho e izquierdo son sólidos

Si la border-stylepropiedad tiene un valor:

 estilo de borde: punteado;

o los cuatro bordes están punteados

Ejemplo
/* Four values */
p {
border-style: dotted solid double dashed;
}

/* Three values */
p {
border-style: dotted solid double;
}

/* Two values */
p {
border-style: dotted solid;
}

/* One value */
p {
border-style: dotted;
}

La border-stylepropiedad se utiliza en el ejemplo anterior. Sin embargo, también funciona con border-width y border-color.
Propiedad de borde abreviado CSS
Borde CSS - Propiedad abreviada
Como vio en la página anterior, hay muchas propiedades a considerar cuando se trata de bordes.

Para acortar el código, también es posible especificar todas las propiedades de borde individuales en una propiedad.

La borderpropiedad es una propiedad abreviada para las siguientes propiedades de borde individuales:

 border-width
 border-style(requerido)
 border-color

Ejemplo
p {
border: 5px solid red;
}

Resultado:

Some text

También puede especificar todas las propiedades de borde individuales para un solo lado:

Borde izquierdo
p {
border-left: 6px solid red;
}

Resultado:
Some text

Borde inferior
p {
border-bottom: 6px solid red;
}

Resultado:

Some text

Bordes redondeados CSS

Bordes redondeados CSS
La border-radiuspropiedad se usa para agregar bordes redondeados a un elemento:

Borde normal

borde redondo

Borde más redondo

Borde más redondo

Ejemplo
p {
border: 2px solid red;
border-radius: 5px;
}
Todas las propiedades de borde CSS
Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius Sets all the four border-*-radius properties for rounded corners

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

 border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

Márgenes CSS
❮ AnteriorPróximo ❯

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.

Este elemento tiene un margen de 70px.

Inténtalo tú mismo "

Márgenes CSS
Las marginpropiedades CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.

Con CSS, tienes control total sobre los márgenes. Hay propiedades para establecer el margen de cada lado de un elemento (superior, derecho, inferior e
izquierdo).

Margen - Lados individuales

CSS tiene propiedades para especificar el margen de cada lado de un elemento:

 margin-top
 margin-right
 margin-bottom
 margin-left

Todas las propiedades de margen pueden tener los siguientes valores:

 auto - el navegador calcula el margen

 longitud : especifica un margen en px, pt, cm, etc.
 % - especifica un margen en % del ancho del elemento contenedor
 heredar: especifica que el margen debe heredarse del elemento principal

Sugerencia: se permiten valores negativos.

Ejemplo
Establezca diferentes márgenes para los cuatro lados de un elemento <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Inténtalo tú mismo "

ANUNCIO

Margen - Propiedad abreviada

Para acortar el código, es posible especificar todas las propiedades de margen en una propiedad.

La marginpropiedad es una propiedad abreviada para las siguientes propiedades de margen individuales:

 margin-top
 margin-right
 margin-bottom
 margin-left

Pues así es como funciona:

Si la marginpropiedad tiene cuatro valores:

 margen: 25px 50px 75px 100px;

o margen superior es 25px
o margen derecho es 50px
o margen inferior es 75px
o margen izquierdo es 100px
Ejemplo
Utilice la propiedad abreviada margin con cuatro valores:

p {
margin: 25px 50px 75px 100px;
}

Inténtalo tú mismo "

Si la marginpropiedad tiene tres valores:

 margen: 25px 50px 75px;

o margen superior es 25px
o los márgenes derecho e izquierdo son 50px
o margen inferior es 75px

Ejemplo
Utilice la propiedad abreviada margin con tres valores:

p {
margin: 25px 50px 75px;
}

Inténtalo tú mismo "

Si la marginpropiedad tiene dos valores:

 margen: 25px 50px;

o los márgenes superior e inferior son 25px
o los márgenes derecho e izquierdo son 50px

Ejemplo
Utilice la propiedad abreviada margin con dos valores:
p {
margin: 25px 50px;
}

Inténtalo tú mismo "

Si la marginpropiedad tiene un valor:

 margen: 25px;
o los cuatro márgenes son 25px

Ejemplo
Utilice la propiedad abreviada margin con un valor:

p {
margin: 25px;
}

Inténtalo tú mismo "

El valor automático
Puede establecer la propiedad de margen para autocentrar horizontalmente el elemento dentro de su contenedor.

Entonces, el elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los márgenes izquierdo y derecho.

Ejemplo
Usar margen: automático:

div {
width: 300px;
margin: auto;
 border: 1px solid red;
}

Inténtalo tú mismo "

El valor heredado
Este ejemplo permite que el margen izquierdo del elemento <p class="ex1"> se herede del elemento principal (<div>):

Ejemplo
Uso del valor heredado:

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

Inténtalo tú mismo "

Todas las propiedades de margen CSS

Property Description
 margin A shorthand property for setting all the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

Colapso de margen CSS

❮ AnteriorPróximo ❯

A veces dos márgenes colapsan en un solo margen.

Colapso de margen
 Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes.

¡Esto no sucede en los márgenes izquierdo y derecho! ¡Solo márgenes superior e inferior!

Mira el siguiente ejemplo:

Ejemplo
Demostración del colapso del margen:

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

Inténtalo tú mismo "

En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50 px y el elemento <h2> tiene un margen superior establecido en 20 px.

El sentido común parecería sugerir que el margen vertical entre <h1> y <h2> sería un total de 70px (50px + 20px). Pero debido al colapso del margen, el
margen real termina siendo 50 px.

Ponte a prueba con ejercicios

Ejercicio:
Agregue un margen izquierdo de 20 píxeles al elemento <h1>.

<estilo>
h1 {
 : 20 píxeles;
}
</estilo>

<cuerpo>
<h1>Este es un encabezado</h1>
<p>Esto es un párrafo</p>
<p>Esto es un párrafo</p>
</cuerpo>

Enviar respuesta "

Comience el ejercicio

Todas las propiedades de margen CSS

Property Description

margin A shorthand property for setting all the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element