Funciones de las propiedades en CSS

Pink Code!
Nov 2 · 3 min read

Las propiedades más usadas en nuestras hojas de estilos en CSS, tienen sus funciones específicas. Conozcamos algunas y aprendamos, juntos, a usarlas.


Width y Height:

Definen el ancho y alto, respectivamente, de un elemento, por ejemplo:

width: 20px;
height: 20px;

Background y Background-color:

Estos definen el color de fondo de un elemento, pueden usarse, prácticamente por igual. Además, con background, puede definirse como fondo de un elemento, alguna dirección o url, veamos el ejemplo en ambos casos:

background-color: purple;background: url("rose.png");

Color:

Color, define el color de un texto. En CSS, estos colores que utilizaremos, se pueden escribir de tres formas distintas, en sistema hexadecimal, con sus respectivos nombres o en RGB (red, green, blue).

Sistema hexadecimal: En este caso el blanco se escribe #FFFFFF y negro #000000. En internet podemos encontrar distintas páginas que nos proporcionan una gama entera de colores y podemos copiar su número en sistema hexadecimal.

Nombres respectivos de cada color: escribiremos básicamente “black”. “red”, “pink”, “blue”.

RGB: Por su siglas que significan red (rojo), green (verde), blue (azul), donde cada colores un valor que colocaremos entre 0 y 255, para indicar su intensidad. Por ejemplo, para el color azul, escribiríamos rgb(0, 0, 255). Además de esto, también podemos agregar un valor para el porcentaje de transparencia que queramos para nuestro color o combinación, por ejemplo, rgb(0, 0, 255, 0.5), con esto indicamos una transparencia del 50% en nuestro color azul.

Border:

Border, indicará en nuestra hoja de estilos, precisamente el estilo y color del borde de un elemento, por ejemplo, si queremos que nuestro elemento tenga un borde de línea sólida y de color violeta, escribiríamos lo siguiente:

border: 4px solid violet;

Border-radius:

Con border-radius, de forma muy sencilla, indicaremos que tan redondeado, queremos el borde de nuestro elemento. Así:

boder-radius: 30px;

Margin:

Define los márgenes de un elemento, por ejemplo, si queremos que algún elemento tenga 5px de margen en todos sus lados, debemos escribir:

margin: 5px;

Además, margin puede utilizarse para definir, lado por lado, los márgenes de los elementos, en sus variaciones como margin-top, margin-right, margin-bottom, margin-left, para el margen superior, derecho, inferior e izquierdo, respectivamente.

Padding:

Con padding, podemos definir la distancia que nos parezca apropiada entre el margen y el contenido de un elemento, podría funcionar como una especie de “margen interno”, y de igual manera, lo utilizamos en el sentido de las manecillas del reloj, superior, derecho, inferior e izquierdo, por ejemplo, para definir el padding de un elemento cuyas medidas sean, 1px, para el lado superior, 2px para el lado derecho, 3px, para el lado inferior y 4px para el lado izquierdo, lo escribiremos así:

padding: 1px 2px 3px 4px;

Sin embargo, como en el margin, podemos usar sus variaciones para los lados como padding-top, padding-right, padding-bottom y paddingleft.

Font-size:

Para el tamaño de la fuente que estamos utilizando.

font-size: 20px;

Font-family:

Define la tipografía de la fuente que queremos utilizar para nuestro documento. En internet, podremos encontrar, además, algunas páginas de las que podemos sacar las fuentes que nos gusten.

font-family: 'Roboto', sans-serif; 

Pink Code!

Written by

Soy estudiante de Ingeniería en informática y ahora también soy una nueva blogger.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade