Hoy vamos a hacer un curso CSS. Para comenzar y vamos a definir algunos conceptos. Un archivo CSS (hoja de estilo en cascada) te permite separar el contenido HTML de tu sitio web (X) de su estilo.
Foto de: Pixabay
Como siempre usas tu archivo HTML para organizar el contenido, pero toda la presentación (fuentes, colores, fondo, bordes, formato de texto, efectos de enlace, etc.) se realiza dentro de un CSS.
Curso CSS
En este punto tienes algunas opciones de cómo utilizar el CSS internamente o externamente.
Hoja de estilo interna.
Vamos a explorar el método interno. De esta manera simplemente estarías colocando el código CSS dentro de las etiquetas <head> </ head> de cada archivo (X) HTML que desees diseñar con el CSS. El formato para esto se muestra en el ejemplo siguiente:
Con este método cada archivo (X) HTML contiene el código CSS necesario para el estilo de la página. Lo que significa que cualquier cambio que desees hacer en una página, tendrá que ser hecho a todas las demás.
Este método puede ser bueno si necesitas diseñar sólo una página o si deseas que las distintas páginas tengan diferentes estilos.
Hoja de estilo externa
A continuación exploraremos el método externo. Se puede crear un archivo CSS externo con cualquier editor de texto o HTML, asi como “Bloc de notas” o “Dreamweaver“. Un archivo CSS que no contiene HTML, sólo CSS.
Simplemente guárdalo con la extensión de archivo .css. Puedes vincular al archivo externamente colocando uno de los siguientes enlaces en la sección principal de cada archivo HTML que desees diseñar con el archivo CSS.
s<.clomi/npkrintfrulel2l.h=tm”lstylesheet” type=”text/css” href=“Path To stylesheet.css” />
O también puedes utilizar el método @import como se muestra a continuación:
<style type=”text/css”>@import url(Path To stylesheet.css)</style>
Cualquiera de estos métodos se consigue colocando uno u otro en la sección de cabeza como se muestra en el ejemplo siguiente.
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” /> </head>
<body>
o
<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css) </style>
</head>
<body>
Mediante el uso de una hoja de estilo externa, todos los archivos HTML (X) se enlazan a un archivo CSS para diseñar las páginas. Esto significa que si necesitas modificar el diseño de todas tus páginas, solo necesitas editar un archivo .css para realizar cambios globales en todo tu sitio web.
¿Estás entendiendo la idea? ¡Es bastante genial!…
Por eso decidí traerte este curso de CSS para principiantes para que combinándolo con uno de HTML puedas comenzar a hacer tu sitio web en 1, 2 x 3…
Orden de conexión en cascada
Antes he explicado cómo enlazar a un archivo CSS interna o externamente. Si has podido captar la idea es que estoy haciendo un buen trabajo. Si no, no te preocupes, hay un largo camino por recorrer antes de que terminemos.
Asumiendo que hayas entendido algo de todo esto. Te estarás preguntando probablemente, bien ¿ Podría hacer ambos? La respuesta es sí. Puedes tener tanto interno, externo y ahora espera un minuto que hay una ¡Tercera manera!
Sí! estilos en línea, también.
Estilos en línea
Los estilos en línea se definen como el archivo (X) HTML que van junto con el elemento al que deseas agregarle un estilo.
<P style = “color: # ff0000;”> Algunos textos rojos </ p>
Algún texto rojo
Los estilos en línea NO permitirán que el usuario cambie los estilos de elementos o texto formateado de esta manera
¿Cuál es mejor?
Con todas estas diversas formas de insertar CSS en tus archivos (X) HTML, ahora puedes estarte preguntando cuál es la mejor y si uso más de un método, ¿En qué orden se cargan estas diferentes formas en mi navegador?
Todos los diversos métodos se convertirán en una nueva hoja de estilo “pseudo” en el siguiente orden:
- 1. Estilo en línea (dentro de (X) elemento HTML)
- 2. Hoja interna de estilo (dentro de la etiqueta <head>)
- 3. Hoja de estilo externa
En cuanto a qué camino es mejor, depende de lo que quieras hacer. Si solo tienes un archivo de estilo, lo colocarás dentro de las etiquetas <head> </ head> (interno).
Aunque si estás planeando manejar el estilo de múltiples archivos, el método de archivo externo es el camino a seguir.
La elección entre los métodos <link related => & the @import es completamente tuya. Mencionaré que el método @import puede tardar un segundo más en leer el archivo CSS en Internet Explorer que la opción <link related =>.
Usuarios con Discapacidades
El uso de hojas de estilo externas puede beneficiar a los usuarios que sufren de discapacidades. Por ejemplo, un usuario puede desactivar su hoja de estilo o sustituir uno de los propios para aumentar el tamaño del texto, cambiar los colores y así sucesivamente.
Usuarios avanzados
Cambiar las hojas de estilo es beneficioso no sólo para los usuarios con discapacidades, sino también para los usuarios avanzados que necesitan características particulares sobre cómo leer sus documentos en la Web.
Problemas con el navegador
Descubrirás que a medida que ahondes más en el mundo de CSS todos los navegadores no se cargan igualmente. CSS va a comportarse diferente en muchos navegadores causando dolores de cabeza numerosos.
Curso CSS: Sintaxis CSS
La sintaxis para CSS es diferente a la del marcado HTML (X). Aunque no es demasiado confusa. Una vez que le echas un vistazo te das cuenta de esto. Ella consta de sólo 3 partes.
Selector {property: value}
El selector es el elemento (X) HTML que desees diseñar. La propiedad es el título de la propiedad real y el valor es el estilo que aplica a esa propiedad.
Cada selector puede tener varias propiedades y cada propiedad dentro de ese selector puede tener valores independientes. La propiedad y el valor se separan con dos puntos y se incluyen dentro de entre corchetes.
Las propiedades múltiples están separadas por un punto y coma. Los valores múltiples dentro de una propiedad se separan por comas y si un valor individual contiene más de una palabra, lo rodea con comillas. Como se muestra abajo.
cuerpo {
Fondo: #eeeeee;
Font-family: “Trebuchet MS”, Verdana, Arial, serif;
}
Como se puede ver en el código anterior he separado el color de la familia de fuentes con un punto y coma. Separo las distintas fuentes con comas y contenía el “Trebuchet MS” dentro de las comillas.
La herencia
Cuando anidas un elemento dentro de otro, el elemento anidado heredará las propiedades asignadas al elemento que lo contiene. A menos que modifiques los valores de los elementos internos de forma independiente.
Por ejemplo, una fuente declarada en el cuerpo será heredada por todo el texto del archivo sin importar el elemento que lo contenga, a menos que declare otra fuente para un elemento anidado específico.
Cuerpo {font-family: Verdana, serif;}
Ahora todo el texto dentro del archivo (X) HTML se establecerá en Verdana.
Si querías diseñar cierto texto con otra fuente, como h1 o párrafo entonces podrías hacer lo siguiente.
H1 {fuente-familia: Georgia, sans-serif;} p {font-family: Tahoma, serif;}
Ahora todas las etiquetas <h1> dentro del archivo se establecerán en Georgia y todas las etiquetas <p> se establecerán en Tahoma, dejando el texto dentro de otros elementos sin cambios desde la declaración del cuerpo de Verdana.
Hay instancias en las que los elementos anidados no heredan las propiedades de elementos que contienen. Por ejemplo, si el margen del cuerpo está establecido en 20 píxeles, los otros elementos dentro del archivo no heredarán el margen del cuerpo de forma predeterminada.
Asi:
Cuerpo {margin: 20px;}
Combinación de selectores
Puedes combinar elementos dentro de un selector de la siguiente manera:
H1, h2, h3, h4, h5, h6 {
Color: # 009900;
Fuente-familia: Georgia, sans-serif;
}
Como se puedes ver en el código anterior he agrupado todos los elementos de encabezado en un selector. Cada una está separada por una coma.
El resultado final del código establece todos los encabezados en verde y en la fuente especificada. Si el usuario no tiene la primera fuente que declaró debe ir a otra fuente sans-serif que el usuario haya instalado en la computadora.
Etiquetas de comentarios
Los comentarios se pueden utilizar para explicar por qué agregaste ciertos selectores dentro de su archivo CSS. Con el fin de ayudar a otros para que puedan ver tu archivo o para ayudarte a recordar lo que estabas pensando en una fecha anterior.
Puedes agregar comentarios que serán ignorados por los navegadores de la siguiente manera.
/ * Este es un comentario * /
Observarás que comienza con una / (barra diagonal) y con un * (asterisco) luego pones tu comentario y luego la etiqueta de cierre que está justo hacia atrás desde la etiqueta de apertura
* (asteriscos) y luego la / (barra diagonal)
Las clases
El selector de clases te permite crear estilos de elementos dentro del mismo elemento (X) HTML de forma diferente.
Similares a lo que he mencionado en la introducción sobre estilos en línea. Excepto en las clases, el estilo se puede sobreescribir cambiando las hojas de estilo.
Puedes utilizar el mismo selector de clases una y otra vez dentro de un archivo (X) HTML. Simplemente, esta frase que estás leyendo se define en mi archivo CSS con lo siguiente:
font-size: small;
color: #333333 }
Digamos que quisieras cambiar la palabra “oración” a verde en negrita y vas a dejar el resto de la frase sin tocar. Haría lo siguiente a mi (X) archivo HTML.
<P>
Para decirlo más sencillamente, esta <span class = “greenboldtext”> oración </ span> que estás leyendo está diseñada en mi archivo CSS por lo siguiente.
</ P>
Entonces en mi archivo CSS añadiría este selector de estilo:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
El resultado final sería similar al siguiente:
Para decirlo más sencillamente, esta frase que estás leyendo está diseñada en mi archivo CSS por lo siguiente.
Ten en cuenta que un selector de clases comienza con un período (.). La razón por la que lo llamé “greenboldtext” es por ponerlo solo de ejemplo. Puedes nombrarlo como quieras.
Te animo a usar nombres selectores que sean descriptivos. Puedes reutilizar la clase “greenboldtext” tantas veces como desees.
Propiedades de texto CSS
Puedes establecer el color del texto con lo siguiente:
Color: value;
Los valores posibles son
- Nombre del color – ejemplo: (rojo, negro …)
- Número de hexadecimal – ejemplo: (# ff0000, # 000000) Código de color RGB – ejemplo: (rgb (255, 0, 0), rgb (0, 0, 0))
- Espaciado de letras
Puedes ajustar el espacio entre letras de la siguiente manera.
Establecer el valor en 0, impide que el texto se justifique.
Puedes utilizar valores negativos.
letter-spacing: value;
Los valores posibles son
- Normal
- Length
Como ves a continuacion con este ejemplo:
Estas letras están espaciadas en 5px.
Texto alineado
Puedes alinear texto con lo siguiente:
Text-align: value;
Los valores posibles son
- Izquierda
- derecha
- centrado
- justificado
Un ejemplo:
Este texto está alineado a la izquierda.
Este texto está alineado en el centro.
Este texto está alineado a la derecha.
Este texto está justificado.
Decoración de texto
Puedes decorar texto con lo siguiente:
Text-decoration: valor;
Los valores posibles son
- Ninguno
- subrayar
- Sobre la línea
Lo que es lo mismo:
Este texto está subrayado.
Este texto está sobreimpreso.
Este texto tiene una línea a través de él.
Guión de texto
Puedes sangrar la primera línea de texto en un elemento (X) HTML con lo siguiente:
Text-indent: valor;
Los valores posibles son:
- Length
- Percentage
Transformación de texto
Puedes controlar el tamaño de las letras en un elemento (X) HTML con lo que viene a continuación:
Text-transform: valor;
Los valores posibles son
- Ninguno
- Capitalizar
- Minúsculas
- Mayúsculas
Ejemplos:
Esta Primera Carta En Cada Palabra Está Capitalizada, Aunque No Está En Mi Archivo.
ESTE TEXTO ES TODO MAYÚSCULAS, AUNQUE ES TODO BAJO EN MI ARCHIVO.
Este texto es todo en minúsculas. Aunque todo está en mayúsculas en mi archivo.
Espacio Blanco
Puedes controlar el espacio en blanco en un elemento (X) HTML con lo siguiente:
- Word-spacing: value;
- Normal
Espaciado de palabras
Puedes ajustar el espacio entre palabras de la siguiente manera. Puedes utilizar valores negativos.
word-spacing: value;
Los valores posibles son
- Longitud
- Normal
Ejemplo:
Estas palabras están espaciadas en 5px.
Fuente
font: italic bold normal small/1.4em Verdana, sans-serif;
Lo anterior establecería el texto de un elemento en un estilo cursivo, un peso en negrita, una variante normal, un tamaño relativo, una altura de línea de 1.4em y la fuente a Verdana u otra fuente de tipo sans-serif.
Familia tipográfica
Puedes configurar qué fuente se mostrará en un elemento con la propiedad font-family.
Hay 2 opciones para los valores:
- Familia
- Genérica
Si se establece un apellido, es mejor agregar también la familia genérica al final. Se trata de una lista priorizada. En cambio, si el usuario no tiene el nombre de fuente especificado usará la misma familia genérica.
Font-family: Verdana, sin-serif;
Tamaño de fuente
Puedes establecer el tamaño del texto utilizado en un elemento utilizando la propiedad font-size.
Font-size: value;
Hay un montón de opciones para los valores:
Xx-grande x-grande más grande
Grande media pequeña pequeña x-pequeña xx-pequeña longitud
% (Porcentaje)
Estilo de fuente
Puedes establecer el estilo del texto en un elemento con la propiedad font-style
Font-style: value;
- Los valores posibles son
- Normal
- itailc
- oblique
El color en CSS
CSS utiliza valores de color para especificar un color. Típicamente, éstos se utilizan para establecer un color para el primer plano de un elemento o para el fondo del elemento. Se pueden utilizar para afectar el color de las fronteras y otros efectos decorativos.
Puedes especificar los valores de color en varios formatos.
Colores CSS – Valores RGB
Este valor de color se especifica mediante la propiedad rgb (). Esta propiedad toma tres valores, uno para el rojo, el verde y el azul. El valor puede ser un entero entre 0 y 255 o un porcentaje.
No todos los navegadores admiten la propiedad rgb () de color. Se recomienda no usarla.
Este curso CSS para principiantes espera que hayas comprendido los fundamentos de este lenguaje que es tan necesario para el desarrollo web. Es mucho lo que podemos hacer con CSS.
Espero que aproveches esta guía y me cuentes ¿Qué te pareció este curso CSS?
¡No olvides comentarmelo!
More from my site
