¿Qué es CSS?

INTRODUCCIÓN A CSS.
ELABORADO POR: ING. ERICKA ZAVALA
ezavalar
https://www.ezavalar.com

¿QUÉ ES CSS?
CSS (Cascading Style Sheets) es un lenguaje que trabaja en conjunto con HTML para el diseño y estilo de
una página web, anteriormente los diseños de una página se hacían dentro del código HTML con
etiquetas y atributos como <font size=“6”>, <body bgcolor=“blue”> etc. Sin embargo HTML5 ya no
soporta este tipo de codificación, en su lugar se utilizan las hojas de estilo CSS que es donde se realiza el
código de diseño de una página web.

¿CÓMO SE CODIFICA UN CSS?
La codificación en CSS es muy sencilla, con un
editor de texto hay que crear un archivo .css y
codificar dentro el nombre la etiqueta HTML (O
selector, que es un término que se verá con
detalle más adelante) al cual se le quiere aplicar
un estilo seguido de llaves y entre ellas colocar
las propiedades que se desea modificar siempre
terminando con punto y coma.
Los comentarios en el código son opcionales y
se hacen encerrando el texto entre /* */ como
se muestra en el ejemplo. Generalmente se usan
para hacer notas que ayuden a los
programadores a entender y organizar el código
de forma más ordenada. El charset utf-8 también
puede ser agregado mediante la instrucción
@charset “utf-8” al principio del documento.

¿CÓMO SE COLOCA UN ESTILO CSS A UNA PÁGINA WEB?
Las hojas de estilo generalmente se guardan en una carpeta llamada
css dentro del mismo proyecto y se enlazan con su ruta a nuestra
página mediante la etiqueta <link>, pero pueden codificarse dentro
del mismo archivo HTML dentro de la etiqueta <style> justo
después de la etiqueta de cierre </head>, sin embargo esto no se
recomienda si se quiere optimizar la carga de la página en
la red.

MEDIDAS DE CSS.
Las unidades de medición de CSS nos sirven para ajustar determinados elementos a un tamaño deseado y así poder
hacer el sitio responsivo, es decir que se adapte a un tamaño de versión de escritorio o bien versión móvil. Para ello
podemos utilizar las siguientes medidas de medición:
1. Porcentajes (%): Hace la medición de anchos y altos de un elemento en una página web con respecto al 100% de éste.
2. Pixeles (px): Hace la medición de anchos y altos de un elemento en una página web con respecto al número de pixeles
de éste, puede variar dependiendo de la pantalla del cliente.
3. Puntos (pt): Otro tipo de medición que se usa el navegador. Los navegadores toman por defecto el tamaño de 16
pixeles. 16 pixeles equivalen a 12 puntos.
4. Em: Su nombre proviene de la letra M, es una unidad escalable, es decir, el tamaño de los elementos dependen del
elemento padre <body> y cada elemento anidado hijo crecerá en tamaño con respecto a su antecesor, 1em equivale a
16px aproximadamente. Se recomienda usar esta medida para definir elementos de diseño que no requieran ser muy
exactos como por ejemplo: Tamaños de fuente o los altos de línea, también elementos que requieran una medida que tenga
relación con el tamaño del texto, como por ejemplo el margen entre párrafos o rellenos interiores.
5. Rem: Su nombre proviene de Root Em, es decir em basado en la raíz, es una unidad no escalable pues no depende del
elemento padre <body> sino del elemento raíz <html> lo que quiere decir que si el elemento HTML tiene un tamaño de
fuente de 16px (por defecto), entonces 1rem, sería igual a 16px, y si deseamos aplicar un tamaño basado en rem a cualquier
elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre
será igual a 16 pixeles a no ser que se modifique el elemento raíz.

TABLAS.
Las tablas son elementos HTML incluidos desde sus primeras versiones y son bastante
útiles para mostrar datos de forma clara. Si se construyen de forma semántica
correctamente podemos aplicar estilos CSS para modificar el diseño de las mismas.
Las etiquetas HTML que se utilizan para construir una tabla son:
Etiquetas Descripción
<table></table> Etiqueta contenedora de los elementos de una tabla.
<th></th> Table Header. La cabecera de la tabla.
<tr></tr> Table Row. Las filas de la tabla.
<td></td> Table Data. Los datos que se encuentran en las columnas de la tabla.

EJEMPLOS DE TABLA.
A continuación se muestran ejemplos de como construir tablas con HTML5 y CSS.

EJEMPLOS DE TABLA.
La tabla anterior pero cambiando de posición la cabecera de la tabla.

EDITORES DE TEXTO.
Para poder codificar una página web es necesario el uso de un editor de texto, se puede hacer en el mismo bloc de
notas, sin embargo existen editores más sofisticados que incluso ayudan al desarrollador a completar código y a
distinguirlo mediante sangrías automáticas o el uso de colores específicos, o a trabajar en una página web mediante
una interfaz gráfica.
Algunos de ellos son:
 Sublime Text.
 Brackets.
 Notepad ++.
 Adobe Dreamweaver.
Para que los editores de texto puedan interpretar el lenguaje se debe de guardar el archivo con la extensión que
corresponda con el lenguaje codificado en el editor (.htm, .html, .css, .js, .php) todas estas son extensiones manejadas
en la construcción de una página web.

AGRADECIMIENTOS ESPECIALES.
Quiero agradecer públicamente a la excelente plantilla de profesores de la Universidad Politécnica de Madrid, muy
especialmente al profesor Juan Quemada, pues gracias a sus MOOC este material ha sido posible.
http://www.upm.es/
https://www.facebook.com/universidadpolitecnicademadrid
https://twitter.com/La_UPM/
https://www.youtube.com/user/UPM
https://www.instagram.com/somosupm/

¿Qué es CSS?

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a ¿Qué es CSS?

Similar a ¿Qué es CSS? (20)

Más de Ericka Zavala

Más de Ericka Zavala (13)

Último

Último (20)

¿Qué es CSS?