¿Sabes qué es CSS y cómo se relaciona con HTML?

Última actualización 14 de Octubre del 2020

user

Arnold Camus

¿Sabes qué es CSS y cómo se relaciona con HTML? ¿Sabes qué es CSS y cómo se relaciona con HTML?

A partir de la creación de internet y el desarrollo de páginas web, fueron surgiendo nuevos lenguajes. Estos nuevos idiomas rompen las barreras geográficas y culturales, consiguiendo una universalidad única. Por lo que cada vez es muy importante que todo profesional conozca aunque sea algunos términos básicos de lenguajes de programación como HTML y CSS. Dos de los más importantes para la creación de páginas webs. 

Sabemos que puede ser difícil, a primera vista, entender qué es exactamente HTML o CSS, qué hace y cómo funciona. Por eso hoy decidimos darnos a la tarea de contártelo. Una vez hayas terminado de leer este artículo entenderás muchas cosas de las que pasan en el backend de todo sitio web. 

Índice

¿Qué significa el lenguaje de programación HTML?
¿Qué es el HTML en informática?
¿Qué significa CSS?
¿Qué es el lenguaje CSS? 
¿Qué es el DOM? 
¿Qué son las etiquetas HTML?
¿Qué son las etiquetas CSS?
Diferencia entre HTML y CSS
Ventajas y Desventajas del Lenguaje HTML
Ventajas y Desventajas del Lenguaje CSS

¿Qué significa el lenguaje de programación HTML?

El lenguaje de programación HTML fue creado en 1989 por Tim Berners-Lee  y  es el acrónimo de Hyper Text Markup Language que traducido de manera directa al español sería Lenguaje de Marcado de Hipertexto. 

El texto hipertexto es el método que permite la navegación a través de la red y las páginas webs, ya que permite que al hacer click en un texto especial llamado hipervínculos puedas ir a una siguiente página. El prefijo hiper hace referencia a que el movimiento no es lineal ya que puede ir a cualquier lugar de internet con solo un click. Por otro lado el marcado es la acción de colocar etiquetas HTML al texto que se usa en una web. Este marcado le asigna un tipo al texto, por ejemplo “será un texto en cursiva”.

¿Qué es el HTML en informática?   

Entonces, el HTML es un lenguaje de programación que permite definir la estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Lo que permite que cualquier persona en el mundo con acceso a internet pueda visualizarlo. Se le denomina como lenguaje ya que tiene palabras de código y sintaxis como cualquier otro lenguaje. Los buscadores como Mozilla Firefox, Google Chrome, Safari o Microsoft Edge procesan toda la información en código HTML y nos muestran la versión más visual. Pero para darle más “vida” al texto en HTML aparecieron los estilo del lenguaje CSS

Encuentra aquí un curso introductorio para desarrollar una página weB con CSS y HTML

¿Qué significa CSS?

CSS es el acrónimo para Cascading Style Sheets, que traducido al español es Hojas de Estilo en Cascada. Haciendo referencia al lenguaje que le da un estilo determinado y complementa el lenguaje HTML. Usando nuestro ejemplo anterior: “nuestro texto no solo será en cursiva, si no que además será fuente Arial y tendrá tamaño 15”. El término cascada es porque se aplican de arriba a abajo siguiendo un patrón al que se le denomina herencia. En caso de que exista ambigüedad se utilizan una serie de reglas como las que mencionamos arriba.

¿Qué es el lenguaje CSS? 

Por lo que el lenguaje CSS es el cual describe como nuestro elementos en HTML serán mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Las hojas de estilo CSS son de gran ayuda y ahorran mucho trabajo al momento de programar un sitio web. Ya que pueden controlar el aspecto de múltiples páginas dentro del sitio a la vez. Entonces a través del CSS tendrás la capacidad de determinar el diseño, color, fuente y entre otras características de tu texto. 

El CSS se suele trabajar con una separación de presentación y contenido, de esta forma los datos HTML solo incluirán información y datos que se refieren al significado de la información a transmitir. Este proceso se lleva a cabo en dos fases:

  1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo) este DOM funciona como un documento para la memoria del ordenador, de forma que puede combinar el contenido del documento en texto con su hoja de estilo.
  2. 2El navegador muestra el contenido del DOM al usuario.
     

¿Quieres aprender a usar CSS y HTML como todo un experto?

¿Qué es el DOM? 

DOM son las siglas de Document Object Model que en español significa textualmente Modelo de Objetos del Documento. En el lenguaje de programación, todas las páginas web HTML se denominan documentos. El modelo de objetos de documento representa cada una de estas páginas web en una estructura en forma de árbol para facilitar el acceso y la gestión de los elementos. De manera general el DOM es esencialmente un intento de convertir la estructura y el contenido del documento HTML en un modelo de objetos que puede ser utilizado por varios programas.

La estructura de objetos del DOM está representada por lo que se llama un "árbol de nodos". Se llama así porque se puede pensar en un árbol con un solo tallo padre que se ramifica en varias ramas secundarias, cada una de las cuales puede tener hojas. En este caso, el "tallo" principal es el elemento raíz <html>, las "ramas" secundarias son los elementos anidados y las "hojas" son el contenido dentro de los elementos.
Nodos DOM

¿Qué son las etiquetas HTML?

Las etiquetas dentro del lenguaje de programación HTML son fragmentos de código que nos facilitan la creación de elementos HTML para crear una página web. Estos luego son procesados por los navegadores como ya te hemos explicado. 

El formato en el que se escriben estas etiquetas es encerradas entre corchetes angulares <>. Cada elemento HTML tiene una etiqueta de inicio, por ejemplo <etiqueta>, y luego selene finalizar con una etiqueta de cierre que lleva una barra inclinada al inicio, por ejemplo </etiqueta>.

Por ende los elementos HTML tiene dos propiedades básicas. Una son los Atributos, que se encuentran en la etiqueta de inicio y luego está el Contenido, que comprende el texto dentro de dos etiquetas. 

Ejemplo etiquetas HTML

<html> 
  <head> 
    <title> TITULO DE LA PÁGINA </title> 
  </head> 
  <body> 
    <h1> Encabezado que se muestra al usuario </h1> 
    <p> La etiqueta p se usa para crear un párrafo. La etiqueta p se usa para crear un párrafo. La etiqueta p se usa para crear un párrafo. La etiqueta p se usa para crear un párrafo. La etiqueta p se usa para crear un párrafo. </p> 
    <p> Se vuelve a escribir para separar un párrafo de otro. Se vuelve a escribir para separar un párrafo de otro. Se vuelve a escribir para separar un párrafo de otro. Se vuelve a escribir para separar un párrafo de otro.</p> 
  </body> 
</html>

¿Qué son las etiquetas CSS?

El lenguaje CSS no funciona específicamente a través de etiquetas sino de selectores. Sin embargo hay tres formas en las que se puede incluir una Hoja de Estilo Cascada en una página web: 

1. Inline Styles o  Estilo de Línea: Los cuales se aplican a un etiqueta HTML en la que se adiciona el atributo style=”?” en la etiqueta de inicio.  
Por ejemplo: <p style="color:green;">Texto en verde</p>

2.Etiqueta <style>: Dentro del lenguaje HTML se puede usar la etiqueta de estilo (<style>) que se agrega en el encabezado de la página y aplica para todo el contenido dentro de esta. Por ejemplo si queremos definir el estilo de los textos h1 haremos algo como esto:

<head>
<style type="text/css">
 h1 {
   color: red;
 }
</style>
</head>

3. Hoja de estilo externa: Este método es creando por separado un documento escrito en lenguaje CSS y que luego se vincula con el código HTML. Suelen tener una extensión de archivo .css. Por lo general llevan el nombre style.css.  Tienen una estructura cascada y está compuesta por los siguientes elementos: 

Estructura CSS

  • Selector: Es el elemento HTML con el que comienza la regla de estilo y al cual queremos modificar. 
  • Declaración: Especifica cuál de las propiedades del elemento queremos darle un estilo. 
  • Propiedad: Qué característica queremos alterar de nuestro elemento HTML como el color, tipo de letra, opacidad, entre otros. 
  • Valor de propiedad: Cómo o en qué cantidad vamos a aplicar el cambio de la propiedad. 

Diferencia entre HTML y CSS

La gran diferencia entre el lenguaje de programación HTML y CSS son sus funciones. De hecho, ambos lenguajes no compiten entre ellos pero sí se complementan. Por un lado el HTML nos permite armar la estructura de la web a través de el etiquetado de hipertextos. Mientras que el lenguaje CSS nos permite generar estilos y alterar las propiedades de nuestros elementos HTML.  

Ventajas y Desventajas del Lenguaje HTML

Ventajas

  • Fácil de usar
  • Sintaxis suelta (aunque ser demasiado flexible no cumplirá con los estándares)
  • HTML es bastante fácil de escribir
  • HTML es fácil de codificar.
  • HTML también permite el uso de plantillas, lo que facilita el diseño de una página web.
  • Muy útil para principiantes en el campo del diseño web.
  • Compatible con casi todos los navegadores, si no con todos los navegadores.
  • Ampliamente utilizado; establecido en casi todos los sitios web, si no en todos los sitios web.
  • Muy similar a la sintaxis XML, que se utiliza cada vez más para el almacenamiento de datos.
  • Gratis: no necesita comprar ningún software
  • Fácil de aprender y codificar incluso para programadores novatos

Desventajas

  • No puede producir una salida dinámica solo, ya que es un lenguaje estático.
  • A veces, la estructuración de documentos HTML es difícil de comprender.
  • Los errores pueden resultar costosos.
  • El tiempo que lleva elegir el esquema de color de una página y crear listas, tablas y
  • formas.
  • Puede crear solo páginas estáticas y sin formato, por lo que si necesitamos páginas dinámicas, HTML no es útil.
  • Necesito escribir mucho código para hacer una página web simple.
  • Debe mantenerse al día con las etiquetas obsoletas y asegurarse de no utilizarlas. Las etiquetas obsoletas aparecen porque otro lenguaje que funciona con HTML ha reemplazado el trabajo original de la etiqueta; por lo tanto, es necesario aprender el otro idioma (la mayoría de las veces, es CSS)
  • Las funciones de seguridad que ofrece HTML son limitadas.

Ventajas y Desventajas del Lenguaje CSS

Ventajas

  • Unificar todo lo referente al diseño visual en un solo documento
  • Se pueden hacer modificaciones en un solo lugar sin tener que recurrir a los archivos HTL por separado
  • Es menor la probabilidad de que exista duplicación de estilos en diferentes lugares, debido a esto es más fácil de organizar y hacer cambios. A esto debemos añadir que la información a transmitir es considerablemente menor y por tanto las páginas también se descargan más rápido
  • La creación de versiones para otros dispositivos: tablets o smartphones se simplifica

Desventajas

Compatibilidad con algunos buscadores. 

 ¡Ya conoces un poco más de cómo funcionan estos dos lenguajes de programación! Tanto el HTML como el CSS son herramientas indispensables en informática al momento de desarrollar una página web. Si recién estás comenzando y quieres aprender mucho más sobre estos temas te invitamos a revisar nuestros cursos de creación de sitios web y seguir puliendo tus conocimientos. 
 

Recomendados para ti