¿Sabes qué es CSS y cómo se relaciona con HTML? | Crehana para empresas

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

Última actualización 16 de Febrero del 2021Tiempo de lectura: 9 min.

Antony Pinedo

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 eso cada vez es más importante que todo profesional conozca qué son los lenguajes CSS y HTML, dos de los más importantes para la creación de páginas web. 

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

Índice:

  1. ¿Qué significa el lenguaje HTML?
  2. ¿Qué es el HTML en informática?
  3. ¿Qué significa CSS?
  4. ¿Qué es el lenguaje CSS? 
  5. ¿Qué es el DOM? 
  6. ¿Qué son las etiquetas HTML?
  7. ¿Cuál es la estructura y sintaxis de CSS?
  8. ¿Cómo aplicar los selectores de CSS?
  9. Diferencias entre HTML y CSS.
  10. Ventajas y Desventajas del Lenguaje HTML.
  11. Ventajas y Desventajas del Lenguaje CSS.
  12. Editores HTML 2021

¿Qué significa el lenguaje HTML?

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

Libros de programación CSS

Fuente: Unsplash

El hipertexto es el método que permite la navegación a través de la red y las páginas web, ya que permite que al hacer clic en un texto especial llamado hipervínculo 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 clic. 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 de elemento, por ejemplo, un botón.

¿Qué es el HTML en informática?   

Entonces, el HTML es un lenguaje que permite definir la estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Esto permite que cualquier persona en el mundo con acceso a internet pueda visualizarlo.

Se le denomina como lenguaje ya que tiene palabras en 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 la muestra con las estructuras con la que fue creada. Pero para darle más “vida” a los elementos de HTML aparecieron los estilos del lenguaje CSS.


interfaz-css-html
Fuente: Pexels

¿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 botón no solo será cuadrado, sino que ahora tendrá las puntas redondeadas, será de color azul y tendrá una sombra detrás de él. El término cascada es porque se aplican de arriba hacia abajo siguiendo un patrón al que se le denomina "herencias". En caso de que exista ambigüedad se utilizan una serie de reglas como las que mencionamos arriba.

¿Qué es el lenguaje CSS? 

En términos simples, el lenguaje CSS es el que describe cómo nuestros elementos en HTML serán mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Las hojas de estilos 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 con una sola hoja de estilos o documento de CSS. Entonces, a través del CSS tendrás la capacidad de determinar el diseño, color, fuente, entre otras características de tus elementos.

persona-redactando-en-ordenador
Fuente: Pexels

El CSS y el HTML suelen renderizarse en los navegadores con una separación del contenido y la presentación o estilos de ese contenido, y este proceso se lleva a cabo en el siguiente orden:

  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. El navegador muestra el contenido del DOM al usuario.
     

¿Quieres aprender a usar CSS y HTML como todo un experto? Inicia desde cero con estos cursos de Front-end

¿Qué es el DOM? 

El DOM (Document Object Model) en español significa textualmente Modelo de Objetos del Documento. En programación, todas las páginas web HTML se denominan documentos.

El modelo de objetos de este 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 o navegadores.

La estructura de objetos del DOM está representada por lo que se llama un "árbol de nodos" y 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
Fuente: Slideshare

¿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. 

La sintaxis o formato en el que se escriben estas etiquetas es a través del uso de corchetes angulares < >. La gran mayoría de elementos HTML tienen una etiqueta de inicio o apertura, por ejemplo <button>, y luego se finaliza con una etiqueta de cierre que lleva una diagonal al inicio, por ejemplo </button>.

Estos elementos HTML tienen también dos propiedades básicas. Unos son los atributos, que se encuentran en la etiqueta de apertura y sirven para asignarle información relevante para tu sitio como un identificador, y luego se ingresa el contenido, que comprende el texto que se mostrará a los usuarios, y se ingresa dentro de las dos etiquetas (la de apertura y la de cierre).  En nuestro ejemplo del botón, este se vería así:

 <button id=”boton-de-compra”>Comprar curso</button>

Ejemplo etiquetas HTML más comunes:

    <html>
       <
head>
        <
title>TÍTULO DE TU PÁGINA</title>
       </
head>
       <
body>
            <
h1 id="encabezado-1">Encabezado que se muestra al usuario</h1>
            <
p class="texto-resaltado">La etiqueta p se usa para crear un párrafo.</p>
            <
p>Se vuelve a escribir para separar un párrafo de otro.</p>
       </
body>
    </
html>


Esta es una estructura muy básica que muestra el orden y algunos elementos muy comunes dentro de un archivo HTML. 

Observa cómo se relacionan entre ellos, en qué punto abren y cierran estos elementos. Por ejemplo, dentro de la etiqueta de body (<body>) ‘viven’ muchos elementos como headings (<h1>) y párrafos de texto (<p>), y esta etiqueta que alberga a la mayoría del contenido, abre después de que cierra la etiqueta del head (</head>), y cierra casi al final, justo antes de que la etiqueta principal del archivo (<html>).

También nota cómo el primer párrafo de texto tiene asignado un atributo llamado clase que busca diferenciarlo del otro párrafo con el nombre “texto-resaltado”.  Esto permitirá asignarle estilos y otras funcionalidades exclusivamente a ese párrafo, llamándolo a través de selectores de CSS como veremos a continuación.

¿Cuál es la estructura y sintaxis de CSS?

Estructura-y-sintaxis-CSS

  • Selector: se utiliza para llamar al elemento HTML al cual queremos modificar. Este es el primer parámetro que necesitamos para asignar estilos a nuestro contenido.

  • Propiedad: especifica qué característica queremos alterar de nuestro elemento HTML como el color, tipo de letra, opacidad, entre otros.

  • Valor de propiedad: define cómo o en qué cantidad vamos a aplicar el cambio de la propiedad.

  • Declaración: especifica cuál de las propiedades del elemento queremos darle un estilo.

Para hacer la declaración de estilo correctamente es necesario que respetemos los signos utilizados y su orden. Entonces, para asignarle color rojo al texto de nuestro botón, la declaración de CSS se vería así:

button {
    
color: red
;
}

 

Descarga gratis estas listas de etiquetas HTML y de las propiedades más usadas en CSS

etiqutas-html-propiedades-css


¿Cómo aplicar los selectores de CSS?

Existen tres formas en las que se pueden incluir los selectores de CSS en una hoja de estilos en una página web: 

1. Inline Styles o  Estilo de Línea: Los cuales se aplican directamente en un elemento HTML, en la que se adiciona el atributo style=”propiedad:valor;?” en la etiqueta de apertura de ese elemento. Por ejemplo:

<p style="color:green;">Texto en verde</p>


2. Etiqueta <style>: Dentro del documento HTML se pueden aplicar los estilos generales haciendo uso de la etiqueta de estilo (<style>). Esta se agrega en el encabezado de la página (<head></head>) y aplica para todo el contenido dentro de esta o los elementos especificados. 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 el más recomendado para sitios web complejos o con muchas secciones y elementos ya que de esta forma podrás manipular tus estilos de CSS sin volverte [email protected]

Esto se logra creando por separado un documento con extensión de archivo CSS (.css), es un código escrito en lenguaje CSS que luego se vincula con el código HTML. Puedes nombrar este archivo como quieras, pero muchos desarrolladores suelen llamarlo “style.css”.

La forma de vincularlo con el archivo HTML es haciendo uso de la etiqueta <link> y un par de atributos importantes que lucen así:

 <link rel="stylesheet" href="nombre-de-tu-archivo.css">


Para un correcto enlace del documento CSS, es necesario hacer uso de los atributos rel=”stylesheet” que se encarga de decirle a HTML el tipo de documento que se está vinculando, el href=”” que hace referencia al documento enlazado.

¿Notaste que la etiqueta <link> no tiene una etiqueta de cierre? Bueno, esto es porque no todas las etiquetas de HTML se deben de cerrar, simplemente porque es necesario que cuenten con contenido extra como texto entre ambas etiquetas como sucede con la de >button>Comprar curso</button>.

Diferencias 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 del etiquetado de hipertextos. Mientras que el lenguaje CSS nos permite asignar estilos y alterar las propiedades de nuestros elementos HTML.

Ventajas y Desventajas del Lenguaje HTML

HTML ha tenido una serie de mejoras y actualizaciones desde que fue creado, llegando a la última versión de HTML5. Ningún lenguaje es perfecto, y si profundizas en el desarrollo web, te podrás percatar de esto dependiendo del escenario en el que lo apliques.

Código de programación HTML

Fuente: Unsplash

En el caso del lenguaje HTML, estas son las ventajas y desventajas:

Ventajas:

  • Fácil de usar.
  • Sintaxis suelta (aunque ser demasiado flexible no cumplirá con los estándares).
  • Bastante fácil de escribir.
  • Permite el uso de plantillas, lo que facilita el diseño de una página web.
  • Fácil de aprender y codificar incluso para programadores novatos.
  • 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 necesitas comprar ningún software.
     

Desventajas:

  • No puede producir una salida dinámica por sí solo.
  • A veces, la estructuración de documentos HTML es difícil de comprender.
  • Los errores pueden resultar costosos.
  • El tiempo que lleva para crear algunos elementos como: listas y tablas.
  • 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

CSS, al igual que HTML, tiene una función muy específica, y aunque hay herramientas que te ayudan a aplicarlo de manera más productiva, el CSS en bruto tiene algunas áreas de oportunidad y sin duda grandes bondades.

Código de programación CSS

Fuente: Unsplash

Por ejemplo:

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 es muy simple.

Desventajas

  • Compatibilidad con algunos buscadores.

 

Editores HTML 2021

Si estás envuelto por el lenguaje HTML, los editores serán de mucha ayuda para ti. Al igual que necesitamos un corrector de textos para evitar errores involuntarios o algún descuido, los editores de lenguaje HTML te ayudan a escribir el código sin errores y te hacen algunas sugerencias sencillas pero oportunas. 

Aquí te presentamos dos editores HTML para que acabes tu programación pronto. 

Atom

Atom es uno de los más populares editores de lenguaje HTML por ser un software de código abierto. Este editor es gratuito y soporta el Teletype, para que puedas trabajar con otros programadores en línea y en simultáneo. 

Ofrece un interfaz personalizable y la función de autocompletado, para que puedas avanzar más rápido tus acciones. No importa si tienes que programar en lenguaje HTML en un ordenador Windows o Mac, Atom funciona en ambos sistemas operativos.

Sublime Text

Sublime Text es otro editor HTML con muchas ventajas. Cuenta con una versión libre y otra pagada. Permite agregar plugins de otros o puedes crear algunos tú. También puedes programar en simultáneo junto con otros compañeros del trabajo.

Además de utilizar lenguaje HTML, este editor permite programar por separado, es decir, usando distintos monitores y otras personas al mismo tiempo.

Libro de programación HTML y CSS

Fuente: Unsplash

¡Ahora ya conoces un poco más sobre cómo funcionan estos dos importantes lenguajes! Tanto el HTML como el CSS son herramientas indispensables al momento de desarrollar una página web o incluso aplicación móvil. 

Es posible que ahora te estés preguntando cómo darle interacción a este HTML y CSS, aplicar todos esos efectos que has visto en muchos grandes sitios. Para eso tenemos que hablar de JavaScript, pero esa será otra historia. 🔜

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. No olvides suscribirte a nuestro newsletter para recibir todo lo que necesitas saber sobre web si estás iniciando en el mundo de la tecnología. ¡Sigamos aprendiendo! 👩‍💻👨‍💻

¿Te gustó este artículo? Te encantarán estos cursos

También podría interesarte