¿Qué es el CSS?
CSS es el acrónimo de Cascading Style Sheets (hojas de estilo en cascada), y se utilizan para dotar de funcionalidad, versatilidad y rendimiento eficiente al contenido de los sitios web. Permite la creación de sitios web ricos en contenido. Gráficos y animaciones más interactivos, una interfaz de usuario superior mucho más rica y un tiempo de descarga rápido.
El CSS se utiliza para dar formato al contenido estructurado formado por las etiquetas HTML. Es el responsable del Layout de la web, de las propiedades de las fuentes, los colores, la alineación del texto, los gráficos, las imágenes de fondo, las tablas, las animaciones y otros componentes.
La estructura básica de una web está formada por las etiquetas HTML, y es el CSS es el que ordena todos esos datos de la manera que nosotros queremos para maquetar la web, posicionando todos los elementos de la misma en su lugar correspondiente.
En estas entradas o posts vamos a ver cómo podemos utilizar el CSS para maquetar nuestras webs.
¿Cómo insertar el código CSS en la web?
Lo primero que tenemos que ver es como al código HTML le llegan las propiedades del código CSS
Existen tres maneras diferentes para insertar a la web las propiedades o el código CSS, en línea, interno y externo.
CSS en Línea.
En este caso el código o las propiedades CSS se añaden dentro de la propia etiqueta HTML
Como puedes ver en el ejemplo, hay dos etiquetas H1, una sin estilos y las otra con un estilo en línea el cual cambia el color del texto
<etiquetaHTML style=»Propiedad-CSS: Valor;»>Texto</etiquetaHTML>
See the Pen
css en linea by Alberto (@alnuper)
on CodePen.
CSS Interno
Se incluye una etiqueta <style></style> dentro del cuerpo del HTML y dentro de esta etiqueta se definen las propiedades CSS
See the Pen
CSS Interno by Alberto (@alnuper)
on CodePen.
CSS Externo
Dentro del HTML y dentro del <head></head> le indicamos al con la etiqueta <link> la ruta donde se encuentra el archivo con las propiedades CSS – archivo normalmente llamado style.css o estilos.css
la ruta suele ser algo así como <link rel=»stylesheet» href=»estilos.css» type=»text/css»>
See the Pen
by Alberto (@alnuper)
on CodePen.
Aunque como puedes ver funcionan perfectamente las tres formas, las buenas prácticas nos dicen que deberíamos utilizar el tipo de inserción CSS externo, así nos será mucho más fácil modificar en un solo archivo y poder tenerlo todo más ordenado, además que posteriormente lo podemos comprimir para que ocupe menos espacio.
