Currículum
Curso: Aprender HTML y CSS
Acceso

Curriculum

Aprender HTML y CSS

Curso de HTML y CSS – Nivel inicial

0/11
Text lesson

Estilos en CSS

Objetivo del 6º tutorial del Curso de HTML y CCS

-Introducirnos a CSS, su definición y como se utilizan sus etiquetas y hojas de estilo.

Creo que en este punto quizás te estés preguntando ¿Cuando empezaremos a usar CSS? Y bueno, aquí en esta sección del curso es donde empezarás a utilizar CSS. Ahora conoceremos los estilos en CSS, aquí es donde darás los primeros pasos para embellecer tu página web y darle tu diseño y toque personal. Sigue leyendo y sorpréndete con lo fácil que es utilizar CSS en tu página web.

Conociendo CSS

El lenguaje deHojas de Estilo en Cascada (Cascading Style Sheets), conocido mejor como CSS, por sus siglas en inglés. Es el lenguaje visual de la web. Con él, se puede diseñar las vistas o la interfaz de las páginas webs escritas en lenguaje HTML. El lenguaje CSS describe cómo los elementos HTML se mostrarán en la pantalla, en el papel impreso, o en otros medios de visualización de páginas web. CSS nos permite separar el código de la maquetación de la página, (codificados dentro del HTML), del código del estilo visual de la página, (codificado en el lenguaje CSS) de una página web. Utilizando CSS para desarrollar los estilos de tu página web te ahorrarás mucho tiempo, esfuerzo y trabajo. Ya que puedes controlar el diseño de múltiples páginas a la vez con una sola hoja de estilos de CSS.

La razón por la que CSS es considerado un lenguaje “en cascada” es por la forma en que este lenguaje define qué estilos usar. Los elementos HTML heredan sus estilos en “cascada”, de acuerdo con un conjunto muy específico de prioridades; aquí te nombro estas prioridades de menor a mayor:

  • El navegador que estés usando por defecto influenciará en la forma que se muestran los elementos, esto depende mucho de la versión de tu navegador web, entre otras cosas.
  • Los estilos definidos en la página que estés realizando igualmente influenciarán en como se muestran los elementos, ya que si no has definido estilos tendrás solamente la visualización por defecto según lo que tengas escrito en HTML.
  • Algunos estilos heredarán un estilo a sus hijos, por ejemplo, qué fuente usar, o la alineación de los párrafos. Esto depende de la disposición de las etiquetas. Por ejemplo, si le aplicamos a la etiqueta <body> un estilo predeterminado, todos los elementos que esta etiqueta contenga heredará los estilos que esta posea.
  • La última norma que se defina en el orden de carga será la norma que haga efecto.
  • El selector de elementos (por ejemplo, estilizar todos los elementos <footer> de una página, o de diferentes páginas).
  • El selector de clase (por ejemplo, estilizando todos los elementos .main de una página web).
  • El selector de ID, usado para seleccionar un elemento específico en la página.
  • El tipo de medio
  • Definir el CSS específico de un elemento utilizando un atributo “style” en código HTML
  • La directiva de invalidación de CSS !important (Usa esta directiva sólo como último recurso)

Además, hay propiedades “en cascada” relativas que pueden apilarse en relación con su matriz, por ejemplo, la altura de la línea y el tamaño de la fuente; por ejemplo, o la métrica CSS rem (relativa em) que se define en relación con la matriz, o la unidad porcentual.

¿Qué tipo de lenguaje es CSS?

CSS no es tratado como un lenguaje de programación debido a que se trata simplemente de etiquetas. HTML y/o CSS no se pueden usar para hacer funciones que llevarán a cabo tareas personalizadas, no tiene variables u otras características que los lenguajes de programación comunes si poseen. Con HTML y CSS no podemos construir una aplicación o algo similar. Ni siquiera podemos hacer una simple página web dinámica sin usar algún tipo de lenguaje de programación o scripting como lenguaje PHP o javascript. Entonces básicamente puedes usar HTML para mostrar elementos en el navegador como texto, imágenes y usar CSS para darle estilo o un aspecto específico que desees. Pero ellos no pueden utilizarse para ejecutar tareas mas allá de esto.

Definiendo el CSS

Puedes definir tu CSS mediante cuatro métodos diferentes. Estos métodos son:

  • CSS en línea

Para definir un estilo CSS utilizando el método en línea, utiliza el atributo en el código HTML llamado style, por ejemplo:


<!DOCTYPE html>
<html>
<head>
 <title>Ejemplo de estilos</title>
</head>
<body>
 

Esta es la fuente predeterminada que se utiliza para la creación de páginas web. Se utiliza comúnmente en los medios impresos para una mejor legibilidad.




Esta es una fuente sans-serif. Se utiliza comúnmente en las pantallas porque es duro para que las pantallas muestren las letras con mas detalle.

</body>
</html>

 

  • Usando una etiqueta CSS

No se recomienda en absoluto definir CSS en línea, ya que esto mezclael código HTML junto con el cótigo CSS; evita usarlo tanto como te sea posible. Siempre se recomienda definir una hoja de estilo CSS y usar selectores para aplicar las hojas de estilo. El tutorial de “Selectores” te brindará una información mas detallada sobre cómo seleccionar elementos HTML utilizando los selectores de CSS.

Aquí abajo te muestro un ejemplo:


<!DOCTYPE html>
<lang="es">
<html>
<head>
 <title>Ejemplo</title>
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20.ejemplo%20%7B%0A%20font-family%3A%20sans-serif%3B%0A%20%7D%0A%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
 

Esta es la fuente predeterminada que se utiliza para la creación de páginas web. Se utiliza comúnmente en los medios impresos para una mejor legibilidad.




Esta es una fuente sans-serif. Se utiliza comúnmente en las pantallas porque es duro para que las pantallas muestren las letras con mas detalle.


</body>
</html>

 

  • Utilizando una hoja de estilos CSS

Se puede definir una hoja de estilo CSS en un archivo externo (generalmente anotado con la extensión .css) y cargarlo.

Aquí hay un ejemplo para definir la misma clase de CSS definida en el ejemplo anterior, pero en un archivo llamado “style.css”.



.ejemplo {
 font-family: sans-serif;
}

 

Para cargar el archivo CSS, necesitaríamos usar la etiqueta <link> dentro de la etiqueta <head>, en el código HTML.

Ten en cuenta que la hoja de estilo debe colocarse correctamente en relación con la página HTML. En este ejemplo, tanto el archivo HTML como el archivo CSS se encuentran en el mismo directorio.

La etiqueta de enlace debe colocarse dentro de la sección <head> de la página HTML, como esta:


<!DOCTYPE html>
<lang="es">
<html>
<head>
 <title>Ejemplo</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 

Esta es la fuente predeterminada que se utiliza para la creación de páginas web. Se utiliza comúnmente en los medios impresos para una mejor legibilidad.




Esta es una fuente sans-serif. Se utiliza comúnmente en las pantallas porque es duro para que las pantallas muestren las letras con mas detalle.


</body>
</html>

 

  • Acceso programático

Los elementos del código HTML cuentan con el atributo style. Este atributo, puede usarse para agregar estilos utilizando la programación como mediopara ello.

Aquí te muestro un ejemplo de cómo utilizarlo:


<!DOCTYPE html>
<lang="es">
<html>
<head>
 <title>Ejemplo</title>
</head>
<body>
 <body>
 

Esta es la fuente predeterminada que se utiliza para la creación de páginas web. Se utiliza comúnmente en los medios impresos para una mejor legibilidad.




Esta es una fuente sans-serif. Se utiliza comúnmente en las pantallas porque es duro para que las pantallas muestren las letras con mas detalle.


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20var%20sansSerifText%20%3D%20document.getElementById(%22sans-serif-text%22)%3B%0A%20sansSerifText.style.fontFamily%20%3D%20%22sans-serif%22%3B%0A%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>

</body>
</html>

¡Felicidades! Ya terminaste la primera unidad en la que empezamos a usar CSS; estoy seguro de que ha sido mucho mas fácil de lo que te imaginabas desde un principio. Próximamente veremos la sección titulada “Selectores”, donde enriquecerás y pondrás en práctica estos nuevos conocimientos que vas adquiriendo en este curso. Sigue adelante hacia la próxima sección del curso básico de HTML y CSS.