CSS, siglas de “Cascade Style Sheet”, son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. El html posee ciertas limitaciones a la hora de aplicarle forma a un documento. Pero con las hojas de estilo, somos capaces de superar esas limitaciones. Las CSS complementan al lenguaje HTML, dándole […]
Cómo incluir estilos CSS
CSS Directas Las CSS directas se usan para poder incluir CSS a una parte del texto concreta. Para ello debemos utilizar la etiqueta “style”. Observa el siguiente código de ejemplo: “X” sería la etiqueta html a la que se le ha aplicado el estilo, mediante el parámetro “style”. “X” puede ser un párrafo (<p>), una capa con […]
Clases y selectores CSS
Formas de definir clases CSS A continuación vamos a explicarte como definir los estilos de los tags dentro de la etiqueta “style”. Existen varias formas: Si queremos definir un estilo, a todas las etiquetas de un determinado tipo que se encuentren en el documento, lo escribiremos de la siguiente manera: Observa como primero indicamos la […]
Pseudoclases
Las pseudoclases son las diferentes clases o los diferentes estilos que podemos darle a un enlace. El navegador por defecto le otorga un estilo diferente a los enlaces con respecto al texto restante. Pero nosotros podemos definir ese estilo mediante las pseudoclases. Las diferentes posibilidades de las pseudoclases CSS son las siguientes: Link CSS a:link […]
Unidades de medida CSS
font-size es un estilo que nos indica el tamaño de la fuente. Esta clase la explicaremos más adelante, en el artículo de estilos de fuente. Ahora lo que vamos a ver son las diferentes unidades de medida en CSS que podemos encontrar. Pixels en CSS: px Las medidas se miden en pixels. Se escribe de […]
Estilos de fuentes
Los siguientes estilos se pueden aplicar a las fuentes. Podemos cambiar el tamaño del texto, el color del mismo, su anchura, su estilo e incluso su tipo de letra. Vamos a verlos más detenidamente: Estilo CSS font color Este estilo lo usamos para darle color al texto. Lo podemos indicar como nombre del color o […]
Texto y párrafos en CSS
Los siguientes estilos se aplican a los párrafos. Podemos cambiar el alto de la línea, darle una decoración al párrafo, alinearlo, etc. Vamos a verlos más detalladamente a continuación. Estilo CSS text-decoration Este estilo lo utilizaremos para darle un aspecto diferente al párrafo. Así podremos subrayarlo (underline), sobrerayarlo (overline) o tacharlo (line-through). A continuación podremos […]
CSS background (fondo)
Estilo CSS background-color background-color nos ayuda a determinar el color de fondo de un determinado estilo. Por ejemplo, en el siguiente código podrás comprobar como le hemos puesto al fondo del estilo un color rojo. Y el resultado lo podemos ver visualmente a continuación: Estilo CSS background-image Gracias a este estilo, en lugar de un […]
Bordes CSS
Estilo CSS border-color Este estilo nos permite indicar el color del borde del elemento al que se lo aplicamos. Este color se le indica con el modo RGB o con el nombre del color. Podemos aplicar el color a todos los bordes con el atributo “border-color” o podemos indicar el color de cada borde mediante […]
Margin CSS y padding CSS
Estilo CSS margin-bottom Gracias a este atributo indicaremos el tamaño que tendrá el margen de la parte inferior de la página. La indicación será mediante unidades de medida de CSS. Estilo CSS margin-top Gracias a este atributo indicaremos el tamaño que tendrá el margen de la parte superior de la página. La indicación será mediante […]
Float CSS y clear CSS
Float CSS El estilo “float” sirve para alinear un elemento, haciendo que el texto de alrededor del mismo se agrupe entorno a dicho elemento. Sus posibles valores son “left” (para alinear el elemento a la izquierda) y “right” (para alinearlo a la derecha).Un elemento con float CSS debe tener definida su anchura. De no ser […]
Position, left y top
Estilo CSS position Position en el estilo determina una posición para esa capa. Esta posición puede ser estática, absoluta o relativa. A continuación vamos a pasar a explicarte las tres: Valor “position: static” La posición “static” es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados estáticamente se van colocando uno […]
Width CSS y height CSS
Estilo width CSS y height CSS Estas dos propiedades sirven para definir el ancho y el largo de la capa. Si no le indicamos ningún valor a estas propiedades, el comportamiento del elemento vendrá determinado por el navegador. En caso de determinar una anchura CSS y una altura CSS al elemento y éste no caber […]
Diseño por capas: z-index CSS
Estilo CSS z-index Mediante el estilo z-index CSS podemos ordenar los elementos de nuestra página web a nuestro gusto. z-index crea una capa nueva que tiene un nivel o una altura diferente al resto de las capas. Observa el siguiente código: Lo primero que observamos es que la capa posee una posición. Y es que estas […]
Visibility y display CSS
Estilo visibility CSS El estilo CSS visibility de una capa controla si ésta será visualizada o no. Para determinar eso, posee dos valores: “visible” y “hidden”. La característica de este estilo es que aunque el elemento no sea visible, continúa ocupando su espacio en el flujo del HTML. Todo lo contrario ocurre con el estilo “display”, […]
Overflow CSS
Estilo CSS overflow Como ya hemos dicho en un artículo anterior, este estilo especificará al navegador el trato que tiene que darle a un texto que no cabe en el espacio que le hemos especificado. Los valores de este estilo pueden ser cuatro: Visible: El navegador expandirá el tamaño del documento hasta que encaje todo […]
Scroll CSS
La etiqueta css “scrollbar” es una excelente forma de darle un toque personalizado a nuestra página web de una forma sencilla. Gracias a esta etiqueta podemos cambiar el color de la barra desplazadora y configurar totalmente los colores de la misma. Esta etiqueta deberemos incluirla entre las etiquetas <head> </head>. Vamos a ver cuál sería […]