¬ŅSabes qu√© es CSS y c√≥mo se relaciona con HTML?

Última actualización 22 de Diciembre del 2020

user

Víctor Romero

¬Ņ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 web.¬†

Sabemos que puede ser difícil a primera vista, saber qué es exactamente HTML o CSS, o etender 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 cosas de las 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.

 

¬Ņ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.¬†

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í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 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. Lo que 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 estructura con la que fue creada. Pero para darle m√°s ‚Äúvida‚ÄĚ al¬†los elementos de¬†HTML aparecieron los estilos del lenguaje CSS.



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.


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) que en espa√Īol significa textualmente Modelo de Objetos del Documento. En la 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 sirve 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 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


¬Ņ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 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 de el 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. 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. 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.

     

¡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 y 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 introduci√©ndote en el mundo de la tecnolog√≠a. ¬°Sigamos aprendiendo! ūüĎ©‚ÄćūüíĽūüĎ®‚ÄćūüíĽ

Recomendados para ti